/* ============================================================================
   applicant-portal.css — the signed-in applicant portal.

   Load order (see applicant/layouts/common/header_script.blade.php):

       vendor core.css + theme-default.css + demo.css   the Sneat template
       tokens.css                                       neutral design tokens
       portal-applicant.css                             the BLUE brand ramp
       applicant-portal.css                             THIS FILE

   Purpose
   -------
   The portal is built on the Sneat Bootstrap 5 template, whose own palette is
   purple. Rather than rewrite 13,000 lines of Blade, this file re-skins the
   primitives those pages already use — card, btn, form-control, table, badge,
   alert, accordion, modal — in the institute's blue design language. Every
   applicant page therefore changes together, and no business logic is touched.

   Rules for anything added here
   -----------------------------
   1. NO raw brand hex. Use var(--brand), var(--brand-deep), var(--brand-soft).
      Swapping one <link> must be enough to move a page between portals.
   2. Direction-neutral geometry. Use padding-inline, margin-inline,
      border-inline-start, inset-inline-end — never left/right — so Arabic
      mirrors correctly with no RTL override.
   3. Re-skin, do not re-layout. Bootstrap's grid and spacing utilities are the
      contract the Blade files rely on; changing what .row or .mb-3 mean would
      break pages this file never opened.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. Page ground
   ------------------------------------------------------------------------ */

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Arabic has no coverage in the display serif, so the Naskh face leads the
   stack for the whole document when the page is RTL. */
[dir="rtl"] body,
[dir="rtl"] .menu,
[dir="rtl"] .btn,
[dir="rtl"] .form-control,
[dir="rtl"] .form-select {
    font-family: var(--font-arabic), var(--font-body);
}

.layout-page,
.content-wrapper {
    background: var(--paper);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -.01em;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    font-family: var(--font-arabic), var(--font-body);
    letter-spacing: 0;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

/* One focus treatment everywhere. The template ships several; this makes the
   keyboard path legible and consistent, which matters on a form this long. */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.text-primary { color: var(--brand) !important; }
.text-info { color: var(--brand-dark) !important; }
.text-muted { color: var(--ink-mute) !important; }
.bg-primary { background-color: var(--brand) !important; }

hr { border-color: var(--line); opacity: 1; }


/* ---------------------------------------------------------------------------
   1. Sidebar

   A navy rail, not a white one. The portal is a long form on a pale ground, and
   giving the chrome its own material is what separates "where I am" from "what
   I am filling in" — a white menu beside a white page relies on a single
   hairline to do that, and loses at a glance.

   The rail carries the institute's deepest blue so the brand sits at the edge
   of every screen without ever competing with the content, which stays on
   paper. Everything on it is therefore light-on-dark and stated explicitly.
   ------------------------------------------------------------------------ */

.layout-menu,
.bg-menu-theme {
    background: linear-gradient(180deg, var(--brand-deep) 0%, #071c31 100%) !important;
    border-inline-end: 0;
    box-shadow: 2px 0 24px rgba(10, 37, 64, .16);
    display: flex;
    flex-direction: column;
}

/* ---- Logo plate -------------------------------------------------------
   Institute marks are drawn for light paper. A white plate lets any of them
   sit on the navy without being recoloured or knocked out. */

.layout-menu .app-brand {
    padding: 20px 18px 18px;
    margin-block-end: 0 !important;
    border-block-end: 1px solid rgba(255, 255, 255, .10);
}

.layout-menu .app-brand-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

.layout-menu .app-brand-link img {
    display: block;
    margin: 0 !important;
    max-width: 100%;
    height: auto;
    max-height: 52px;
}

/* The close control on small screens. */
.layout-menu .layout-menu-toggle {
    color: rgba(255, 255, 255, .72);
}
.layout-menu .layout-menu-toggle:hover { color: #ffffff; }

.menu-inner-shadow { display: none !important; }

/* ---- Identity ---------------------------------------------------------
   Who is signed in, and the number every support call starts with. */

.ap-who {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 14px 12px 4px;
    padding: 12px 13px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}

.ap-who-photo {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--brand-dark);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .22);
}

.ap-who-text { min-width: 0; }

.ap-who-name {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-who-no {
    display: block;
    margin-block-start: 2px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--brand-bright);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Navigation ------------------------------------------------------- */

.menu-inner {
    padding-inline: 12px;
    padding-block-start: 10px;
    flex: 1 1 auto;
}

.menu-vertical .menu-item { margin-block: 2px; }

.menu-vertical .menu-item .menu-link {
    position: relative;
    border-radius: var(--radius-sm);
    padding-block: 11px;
    padding-inline: 13px;
    font-size: var(--fs-body);
    font-weight: 500;
    color: rgba(255, 255, 255, .78);
    transition: background var(--t-fast), color var(--t-fast);
}

.menu-vertical .menu-item .menu-link:hover {
    background: rgba(255, 255, 255, .09);
    color: #ffffff;
}

.menu-vertical .menu-item.active > .menu-link {
    background: rgba(45, 127, 196, .26);
    color: #ffffff;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(45, 127, 196, .40);
}

/* A bright rule on the leading edge states the current page even where the
   tinted fill is too quiet to read, and mirrors correctly in Arabic. */
.menu-vertical .menu-item.active > .menu-link::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 9px;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--brand-bright);
}

/* ---- Overriding the vendor theme's hardcoded red ----------------------
   Someone hand-edited dashboard/applicant/assets/vendor/css/theme-default.css
   at some point and left two rules painting the active menu item #aa0000:

       .bg-menu-theme .menu-inner > .menu-item.active > .menu-link
           { color: #aa0000; background-color: rgba(236,74,74,.16) !important; }
       .bg-menu-theme .menu-inner > .menu-item.active:before
           { background: #aa0000; }

   That is five classes deep with an !important on the fill, so the rules above
   — four classes, no !important — lose to it, and the applicant's current page
   came out red on a blue rail.

   These are matched at the vendor's own specificity rather than by editing the
   file, because it is a vendor drop: the next time it is replaced an edit would
   be silently lost, while an override in this file survives.

   Its own :before is pinned to `right: 0`, which is the TRAILING edge and does
   not mirror in Arabic. It is dropped in favour of the leading-edge rule above.
   ------------------------------------------------------------------------- */

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
    color: #ffffff;
    background-color: rgba(45, 127, 196, .26) !important;
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link .menu-icon {
    color: var(--brand-bright);
}

.bg-menu-theme .menu-inner > .menu-item.active:before {
    background: transparent;
}

/* The section header ("SUPPORT") and the short dash beside it. The vendor sets
   both to #a1acb8, a grey picked for a white menu, and puts !important on the
   dash. On navy the header reads as washed-out and the dash as a stray mark. */
.bg-menu-theme .menu-header {
    color: rgba(255, 255, 255, .45);
}

.bg-menu-theme .menu-header:before {
    background-color: rgba(255, 255, 255, .22) !important;
}

.menu-vertical .menu-item .menu-link .menu-icon {
    font-size: 20px;
    color: rgba(255, 255, 255, .58);
    margin-inline-end: 11px;
    transition: color var(--t-fast);
}

.menu-vertical .menu-item .menu-link:hover .menu-icon { color: #ffffff; }
.menu-vertical .menu-item.active > .menu-link .menu-icon { color: var(--brand-bright); }

.menu-header {
    padding-block: 20px 7px;
    padding-inline: 13px;
    color: rgba(255, 255, 255, .45);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .1em;
}

.menu-header .menu-header-text { color: inherit; }

/* ---- Foot ------------------------------------------------------------- */

.ap-menu-foot {
    margin: auto 12px 14px;
    padding-block-start: 14px;
    border-block-start: 1px solid rgba(255, 255, 255, .10);
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, .45);
    text-align: center;
    line-height: 1.5;
}

.ap-menu-foot a { color: rgba(255, 255, 255, .70); text-decoration: none; }
.ap-menu-foot a:hover { color: #ffffff; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   2. Top bar
   ------------------------------------------------------------------------ */

/* White, against the navy rail. The bar belongs to the content side of the
   screen, so it takes the content's material: the eye then reads one dark edge
   and one light field rather than two competing chromes. */
.layout-navbar {
    background: var(--surface) !important;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    min-height: 58px;
}

.layout-navbar .nav-item .nav-link { color: var(--ink-soft); }
.layout-navbar .nav-item .nav-link:hover { color: var(--brand); }

/* The hamburger on small screens, which sits alone at the leading edge. */
.layout-navbar .layout-menu-toggle .nav-link {
    color: var(--brand-deep);
    font-size: 22px;
}

/* The avatar in the corner. A brand ring ties it to the identity block at the
   top of the rail without repeating the name. */
.layout-navbar .dropdown-user .avatar img {
    width: 34px;
    height: 34px;
    object-fit: cover;
}


/* ---------------------------------------------------------------------------
   3. Page heading

   Most pages open with `<h4 class="py-3 mb-4">` carrying a back button and a
   muted label. Giving that row a consistent rhythm is the cheapest way to make
   forty screens feel like one product.
   ------------------------------------------------------------------------ */

.content-wrapper h4.py-3 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    color: var(--brand-deep);
    padding-block: 4px 18px !important;
    margin-block-end: 20px !important;
    border-block-end: 1px solid var(--line);
}

/* Twelve pages label this row with `<span class="... float-end">`. A float is
   ignored on a flex item, so the label would otherwise sit tight against the
   back button instead of at the far end. `margin-inline-start: auto` restores
   the intent, and does so in both text directions. */
.content-wrapper h4.py-3 .float-end,
.content-wrapper h4.py-3 .text-muted {
    float: none !important;
    margin-inline-start: auto;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-mute) !important;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
}

[dir="rtl"] .content-wrapper h4.py-3 .float-end { float: none !important; }

/* The back button leads the row and should not stretch. */
.content-wrapper h4.py-3 > .btn { flex: none; }

/* An explicit page header for screens that adopt it. */
.ap-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-block-end: 16px;
    margin-block-end: 22px;
    border-block-end: 1px solid var(--line);
}

.ap-head-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    color: var(--brand-deep);
}

.ap-head-sub {
    margin: 4px 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-mute);
}

.ap-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }


/* ---------------------------------------------------------------------------
   4. Cards
   ------------------------------------------------------------------------ */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.card + .card { margin-block-start: 20px; }

.card-header {
    background: transparent;
    border-block-end: 1px solid var(--line);
    padding: 18px 22px;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 600;
    color: var(--brand-deep);
}

.card-header h5,
.card-header h4 { margin: 0; font-size: inherit; color: inherit; }

.card-body { padding: 22px; }

/* The template's own name for a body block on some pages. */
.card-block { padding: 22px; }

.card-footer {
    background: var(--brand-soft);
    border-block-start: 1px solid var(--line);
    padding: 16px 22px;
    border-end-start-radius: var(--radius-lg);
    border-end-end-radius: var(--radius-lg);
}

@media (max-width: 575px) {
    .card-body, .card-block, .card-header, .card-footer { padding: 16px; }
}


/* ---------------------------------------------------------------------------
   5. Section heading inside a card

   Long forms break into titled groups with a bare <h5>. Give those a rule so
   the eye can find the group boundaries while scrolling.
   ------------------------------------------------------------------------ */

.card-body > h5,
.card-body > .row > .form-group > h5,
.card-body > .col-md-12 > h5 {
    font-size: var(--fs-h4);
    color: var(--brand-deep);
    padding-block-end: 8px;
    margin-block: 4px 16px;
    border-block-end: 1px solid var(--line);
}


/* ---------------------------------------------------------------------------
   5b. Long-form layout

   The application form runs to a thousand lines of Blade across four steps.
   What it lacked was not decoration but structure: no visible boundary between
   one group of questions and the next, and the button that carries you forward
   sitting a full screen below wherever you happen to be reading.
   ------------------------------------------------------------------------ */

fieldset.scheduler-border {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;   /* fieldsets refuse to shrink inside a grid without this */
}

/* A group heading. The forms mark these with a bare <h5>, so the rule below is
   what turns a run of fields into a readable section. */
.card-body form h5,
.card-body fieldset h5 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 600;
    color: var(--brand-deep);
    padding-block-end: 9px;
    margin-block: 8px 18px;
    border-block-end: 2px solid var(--brand-line);
}

.card-body form h5::before {
    content: "";
    flex: none;
    width: 4px;
    height: 17px;
    border-radius: var(--radius-pill);
    background: var(--brand);
}

/* The tinted panel the test-centre block sits in. */
.card-body form .row[style*="--brand-soft"] {
    border: 1px solid var(--brand-line);
    padding-block-end: 6px;
}

/* ---- The action that ends the form ------------------------------------
   Made sticky, so on a form this long the way forward is always in reach
   rather than a scroll away. Browsers without :has() simply render it in
   place, which is what happened before, so nothing is lost. */

.card-body form .row:has(> .d-grid > input[type="submit"].btn-lg),
.card-body form .row:has(> .d-grid > button.btn-lg) {
    position: sticky;
    inset-block-end: 0;
    z-index: 5;
    margin-inline: -22px;
    margin-block-start: 26px;
    padding: 14px 22px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(8px);
    border-block-start: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(10, 37, 64, .07);
}

.card-body form .row:has(> .d-grid > input[type="submit"].btn-lg) .mb-4,
.card-body form .row:has(> .d-grid > button.btn-lg) .mb-4 {
    margin-block-end: 0 !important;
}

/* The button itself: full width of its column, and unmistakably the primary. */
.card-body form input[type="submit"].btn-lg,
.card-body form button.btn-lg[type="submit"] {
    width: 100%;
    padding-block: 14px;
    font-size: var(--fs-h4);
    font-weight: 700;
    box-shadow: var(--shadow-cta);
}

@media (max-width: 575px) {
    .card-body form .row:has(> .d-grid > input[type="submit"].btn-lg),
    .card-body form .row:has(> .d-grid > button.btn-lg) {
        margin-inline: -16px;
        padding-inline: 16px;
    }
}

/* ---- Read-only fields --------------------------------------------------
   Name, nationality and contact details are set at registration and shown
   disabled. Without a cue that reads as "fixed" rather than "broken", people
   try to click them. */

.card-body form .form-control:disabled,
.card-body form .form-select:disabled {
    background-color: var(--paper);
    background-image: none;
    border-style: dashed;
    color: var(--ink-soft);
}


/* ---------------------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------------------ */

.btn {
    --bs-btn-font-family: var(--font-body);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--fs-body);
    letter-spacing: .01em;
    padding: 10px 18px;
    border-width: 1px;
    transition: background var(--t-fast), border-color var(--t-fast),
                color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

[dir="rtl"] .btn { font-family: var(--font-arabic), var(--font-body); }

.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--focus-ring); }

.btn-sm { padding: 7px 13px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.btn-lg { padding: 13px 26px; font-size: var(--fs-h4); }

.btn-primary,
.btn-info {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    box-shadow: 0 1px 2px rgba(10, 37, 64, .16);
}

.btn-primary:hover, .btn-primary:focus,
.btn-info:hover, .btn-info:focus {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: var(--on-brand);
}

/* A disabled action goes neutral rather than faded.
   It used to be the brand fill at opacity .5, which dims the label along with
   the background and leaves white text on pale blue — the one part that still
   has to be readable is the part that stops being readable. Grey on grey says
   "not yet" just as clearly and keeps the word legible. */
.btn-primary:disabled, .btn-primary.disabled,
.btn-info:disabled, .btn-info.disabled {
    background: var(--line);
    border-color: var(--line-strong);
    color: var(--ink-soft);
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}

.btn-primary:disabled:active,
.btn-info:disabled:active { transform: none; }

.btn-secondary {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink-soft);
}

.btn-secondary:hover, .btn-secondary:focus {
    background: var(--paper);
    border-color: var(--ink-mute);
    color: var(--ink);
}

.btn-outline-primary {
    background: transparent;
    border-color: var(--brand-line);
    color: var(--brand);
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-deep);
}

.btn-success { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-success:hover, .btn-success:focus { background: #125a3e; border-color: #125a3e; color: #fff; }

.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-danger:hover, .btn-danger:focus { background: #94201a; border-color: #94201a; color: #fff; }

.btn-warning { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.btn-warning:hover, .btn-warning:focus { background: #f8ecd0; border-color: var(--warn); color: var(--warn); }

.btn-light {
    background: var(--paper);
    border-color: var(--line);
    color: var(--ink-soft);
}
.btn-light:hover { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); }

.btn-link { color: var(--brand); font-weight: 600; text-decoration: none; }
.btn-link:hover { color: var(--brand-dark); text-decoration: underline; }

/* Icons inside buttons should not push the label off centre. */
.btn i, .btn .bx, .btn .tf-icons {
    vertical-align: -2px;
    margin-inline-end: 6px;
}
.btn i:only-child { margin-inline-end: 0; }


/* ---------------------------------------------------------------------------
   7. Form controls

   Legibility is the whole job here: this is a long application form filled in
   once, often on a phone, sometimes in a second language.
   ------------------------------------------------------------------------ */

.form-label,
.col-form-label,
label:not(.form-check-label):not(.btn) {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-soft);
    margin-block-end: 6px;
}

/* The required marker the Blade files render as a bare <span>*</span> or
   <span class="text-danger">*</span> beside the label text. */
label .text-danger,
.form-label .text-danger { font-weight: 700; }

.form-control,
.form-select {
    min-height: var(--field-height);
    padding: 10px 14px;
    font-size: var(--fs-body);
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.form-control::placeholder { color: var(--ink-mute); opacity: 1; }

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--ink-mute); }

.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
    background-color: var(--surface);
    color: var(--ink);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--paper);
    color: var(--ink-soft);
    border-color: var(--line);
    cursor: not-allowed;
}

textarea.form-control { min-height: 110px; line-height: 1.6; }

.form-group { margin-block-end: 18px; }

.form-text, .form-hint {
    font-size: var(--fs-xs);
    color: var(--ink-mute);
    margin-block-start: 5px;
}

/* File inputs. The native control is ugly at every size; this at least makes
   it match the other fields and gives the button a brand tint. */
input[type="file"].form-control { padding: 8px 12px; }

input[type="file"].form-control::file-selector-button {
    padding: 7px 13px;
    margin-inline-end: 12px;
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background var(--t-fast);
}

input[type="file"].form-control::file-selector-button:hover { background: var(--brand-line); }

/* Validation. Bootstrap's needs-validation pattern is used on every form. */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: var(--bad);
    box-shadow: none;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
    border-color: var(--bad);
    box-shadow: 0 0 0 3px rgba(179, 38, 30, .14);
}

.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: var(--ok-line);
    background-image: none;
}

.was-validated .form-control:valid:focus {
    border-color: var(--ok);
    box-shadow: 0 0 0 3px rgba(23, 105, 74, .13);
}

.invalid-feedback {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--bad);
    margin-block-start: 5px;
}

.input-group > .form-control,
.input-group > .form-select { min-height: var(--field-height); }

.input-group-text {
    background: var(--brand-soft);
    border: 1px solid var(--line-strong);
    color: var(--brand-dark);
    font-size: var(--fs-sm);
    font-weight: 600;
    padding-inline: 14px;
}


/* ---------------------------------------------------------------------------
   8. Checkboxes and radios

   The template's default box is 1rem, which is a small target on a phone for
   a declaration the applicant is legally agreeing to.
   ------------------------------------------------------------------------ */

.form-check { padding-inline-start: 1.9em; min-height: auto; }

.form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-block-start: .16em;
    margin-inline-start: -1.9em;
    border: 1.5px solid var(--line-strong);
    background-color: var(--surface);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}

.form-check-input:hover:not(:disabled) { border-color: var(--brand); }

.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.form-check-input:focus { box-shadow: var(--focus-ring); border-color: var(--brand); }

.form-check-label {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    padding-inline-start: 4px;
}

.form-switch .form-check-input { width: 2.1em; border-radius: var(--radius-pill); }


/* ---------------------------------------------------------------------------
   9. Session choice rows

   The multi-session booking list: one tickable sitting per row, each with its
   fee. Tinting the chosen ones makes the selection readable at a glance.
   ------------------------------------------------------------------------ */

.iitd-session-choice {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: border-color var(--t-fast), background var(--t-fast);
}

.iitd-session-choice:hover { border-color: var(--brand-line); background: var(--brand-soft); }

.iitd-session-choice:has(.form-check-input:checked) {
    border-color: var(--brand);
    background: var(--brand-soft);
}

/* The tick row. Bootstrap's .form-check indents for the box; here it is the
   inner row, not the card, that carries that indent. */
.iitd-session-choice .iitd-session-row { margin: 0; padding-inline-start: 1.9em; }
.iitd-session-choice .form-check-input { margin-inline-start: -1.9em; }

/* ── States ──────────────────────────────────────────────────────────────
   Each row carries is-<state> from ApplicationSessionService::sessionChoices():
   paid · processing · due · required · chosen · available · full · closed ·
   ineligible. Locked rows also carry is-locked. The row's look says what the
   session IS; the tag beside the title says it in words. */

.iitd-session-choice.is-locked { cursor: default; }
.iitd-session-choice.is-locked:hover { border-color: var(--line); background: var(--surface); }
.iitd-session-choice.is-locked .form-check-label { cursor: default; }

/* Settled or committed: ticked, and kept at full contrast. A disabled input is
   normally dimmed to the point of looking broken; these are settled, not
   unavailable. */
.iitd-session-choice.is-locked.is-required,
.iitd-session-choice.is-locked.is-required:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
}
.iitd-session-choice.is-locked.is-paid,
.iitd-session-choice.is-locked.is-paid:hover,
.iitd-session-choice.is-paid_movable,
.iitd-session-choice.is-paid_movable:hover {
    border-color: var(--ok-line);
    background: var(--ok-bg);
}
.iitd-session-choice.is-locked.is-processing,
.iitd-session-choice.is-locked.is-processing:hover,
.iitd-session-choice.is-locked.is-due,
.iitd-session-choice.is-locked.is-due:hover {
    border-color: var(--warn-line);
    background: var(--warn-bg);
}

.iitd-session-choice.is-locked.is-required .form-check-input:disabled,
.iitd-session-choice.is-locked.is-paid .form-check-input:disabled,
.iitd-session-choice.is-locked.is-processing .form-check-input:disabled,
.iitd-session-choice.is-locked.is-due .form-check-input:disabled {
    opacity: 1;
    cursor: default;
}
.iitd-session-choice.is-locked.is-required .form-check-input:disabled { background-color: var(--brand); border-color: var(--brand); }
.iitd-session-choice.is-locked.is-paid     .form-check-input:disabled { background-color: var(--ok);    border-color: var(--ok); }
.iitd-session-choice.is-locked.is-processing .form-check-input:disabled,
.iitd-session-choice.is-locked.is-due      .form-check-input:disabled { background-color: var(--warn);  border-color: var(--warn); }

/* Out of reach: quieter, but still legible — the title is the record of what
   this session was. */
.iitd-session-choice.is-locked.is-full,
.iitd-session-choice.is-locked.is-closed,
.iitd-session-choice.is-locked.is-ineligible {
    background: var(--paper);
    border-style: dashed;
}
.iitd-session-choice.is-locked.is-full .form-check-label b,
.iitd-session-choice.is-locked.is-closed .form-check-label b,
.iitd-session-choice.is-locked.is-ineligible .form-check-label b { color: var(--ink-soft); font-weight: 600; }
.iitd-session-choice.is-locked.is-full .form-check-input:disabled,
.iitd-session-choice.is-locked.is-closed .form-check-input:disabled,
.iitd-session-choice.is-locked.is-ineligible .form-check-input:disabled { opacity: .45; cursor: not-allowed; }

.iitd-session-fee {
    margin-inline-start: 8px;
    font-size: var(--fs-sm);
    color: var(--ink-mute);
}

/* The state, in words. Tone follows the row. */
.iitd-session-tag {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: 1px;
    white-space: nowrap;
}
/* ── Centre preferences, nested under each session row ─────────────────
   Unfold when the row is ticked, fold away when it is not. A locked row's
   preferences are read-only. */
.iitd-session-prefs {
    margin-block-start: 12px;
    padding-block-start: 12px;
    border-block-start: 1px dashed var(--line);
}
.iitd-session-prefs[hidden] { display: none; }

.iitd-pref-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-block-end: 8px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-soft);
}

.iitd-pref-label { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-mute); }

.iitd-pref-lock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: auto;
    font-size: var(--fs-label);
    font-weight: 500;
    color: var(--ink-mute);
}

/* A locked block keeps its values legible; disabled selects are normally
   dimmed to the point of looking empty. */
.iitd-session-prefs .form-control:disabled {
    opacity: 1;
    color: var(--ink-soft);
    background: var(--paper);
    border-color: var(--line);
}

/* The nested selects sit on the row's tint; a plain white field reads better
   against it than the tinted default. */
.iitd-session-prefs .form-control:not(:disabled) { background: var(--surface); }

/* ── Fee summary: settled, and still to pay ─────────────────────────────
   Two tiles under the session list. Paid is green and only present once
   something has been paid; payable is brand while an amount is owed and
   goes quiet (is-zero) when nothing is. */
.iitd-fee-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-start: 14px;
}

.iitd-fee-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.iitd-fee-item i { font-size: 20px; flex: 0 0 auto; }
.iitd-fee-label {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.iitd-fee-amount {
    margin-inline-start: auto;
    font-size: var(--fs-h4);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.iitd-fee-item.is-paid { border-color: var(--ok-line); background: var(--ok-bg); }
.iitd-fee-item.is-paid i,
.iitd-fee-item.is-paid .iitd-fee-amount { color: var(--ok); }
.iitd-fee-item.is-paid .iitd-fee-label  { color: var(--ok); opacity: .85; }

.iitd-fee-item.is-due { border-color: var(--brand-line); background: var(--brand-soft); }
.iitd-fee-item.is-due i,
.iitd-fee-item.is-due .iitd-fee-amount { color: var(--brand-deep); }
.iitd-fee-item.is-due .iitd-fee-label  { color: var(--brand); }

.iitd-fee-item.is-due.is-zero { border-color: var(--line); background: var(--paper); }
.iitd-fee-item.is-due.is-zero i,
.iitd-fee-item.is-due.is-zero .iitd-fee-amount { color: var(--ink-soft); }
.iitd-fee-item.is-due.is-zero .iitd-fee-label  { color: var(--ink-mute); }

@media (max-width: 575.98px) {
    .iitd-fee-item { width: 100%; }
}

.iitd-session-tag.is-brand { background: var(--brand);   color: var(--on-brand); }
.iitd-session-tag.is-ok    { background: var(--ok);      color: #fff; }
.iitd-session-tag.is-warn  { background: var(--warn);    color: #fff; }
.iitd-session-tag.is-mute  { background: var(--line);    color: var(--ink-soft); }


/* ---------------------------------------------------------------------------
   10. Select2
   ------------------------------------------------------------------------ */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: var(--field-height);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--field-height) - 2px);
    color: var(--ink);
    padding-inline-start: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--field-height) - 2px);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

.select2-dropdown {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--brand);
    color: var(--on-brand);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--brand-soft);
    color: var(--brand-deep);
}


/* ---------------------------------------------------------------------------
   11. Tables
   ------------------------------------------------------------------------ */

.table {
    --bs-table-bg: transparent;
    font-size: var(--fs-body);
    color: var(--ink);
    margin-block-end: 0;
}

.table > thead > tr > th {
    background: var(--brand-soft);
    color: var(--brand-deep);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-block-end: 1px solid var(--brand-line);
    padding: 12px 14px;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: 12px 14px;
    border-block-end: 1px solid var(--line);
    vertical-align: middle;
}

.table > tbody > tr:last-child > td { border-block-end: 0; }

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    background: color-mix(in srgb, var(--paper) 55%, transparent);
    box-shadow: none;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: transparent;
    background: var(--brand-soft);
    box-shadow: none;
}

.table-bordered > :not(caption) > * > * { border-color: var(--line); }

/* Any table must be able to scroll on a phone rather than push the page wide. */
.table-responsive { border-radius: var(--radius); }


/* ---------------------------------------------------------------------------
   12. Badges and status chips
   ------------------------------------------------------------------------ */

.badge {
    border-radius: var(--radius-pill);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .05em;
    padding: 5px 11px;
    text-transform: uppercase;
}

.badge.bg-primary, .badge.bg-info { background: var(--brand) !important; color: var(--on-brand) !important; }
.badge.bg-success { background: var(--ok-bg) !important; color: var(--ok) !important; }
.badge.bg-warning { background: var(--warn-bg) !important; color: var(--warn) !important; }
.badge.bg-danger  { background: var(--bad-bg) !important; color: var(--bad) !important; }
.badge.bg-secondary { background: var(--paper) !important; color: var(--ink-soft) !important; }

/* The notification count on the bell stays a solid dot, not a pale chip. */
.layout-navbar .badge.badge-notifications {
    background: var(--bad) !important;
    color: #fff !important;
    padding: 2px 6px;
}

/* Text for a screen reader only. Used where a chip's state is carried by
   colour, which says nothing to someone who cannot see it. */
.ap-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ap-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink-soft);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

.ap-status::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.ap-status.is-done    { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--ok); }
.ap-status.is-pending { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.ap-status.is-fail    { background: var(--bad-bg);  border-color: var(--bad-line);  color: var(--bad); }
.ap-status.is-info    { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); }


/* ---------------------------------------------------------------------------
   13. Alerts
   ------------------------------------------------------------------------ */

.alert {
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--ink-mute);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    font-size: var(--fs-body);
    color: var(--ink);
}

.alert-primary, .alert-info {
    background: var(--brand-soft);
    border-color: var(--brand-line);
    border-inline-start-color: var(--brand);
    color: var(--brand-deep);
}

.alert-success {
    background: var(--ok-bg);
    border-color: var(--ok-line);
    border-inline-start-color: var(--ok);
    color: var(--ok);
}

.alert-warning {
    background: var(--warn-bg);
    border-color: var(--warn-line);
    border-inline-start-color: var(--warn);
    color: var(--warn);
}

.alert-danger {
    background: var(--bad-bg);
    border-color: var(--bad-line);
    border-inline-start-color: var(--bad);
    color: var(--bad);
}

.alert .btn-close { padding: 16px; }


/* ---------------------------------------------------------------------------
   14. Accordion — syllabus, FAQ, past papers
   ------------------------------------------------------------------------ */

.accordion { --bs-accordion-border-color: var(--line); }

.accordion-item {
    border: 1px solid var(--line);
    border-radius: var(--radius) !important;
    background: var(--surface);
    margin-block-end: 10px;
    overflow: hidden;
}

.accordion-button {
    background: var(--surface);
    color: var(--ink);
    font-size: var(--fs-body);
    font-weight: 600;
    padding: 15px 18px;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    background: var(--brand-soft);
    color: var(--brand-deep);
}

.accordion-button::after { filter: saturate(0) brightness(.6); }
.accordion-button:not(.collapsed)::after { filter: none; }

/* The caret sits on the trailing edge in both directions. */
[dir="rtl"] .accordion-button::after { margin-inline-start: auto; margin-inline-end: 0; }

.accordion-body {
    padding: 18px;
    font-size: var(--fs-body);
    color: var(--ink-soft);
    line-height: 1.7;
    border-block-start: 1px solid var(--line);
}


/* ---------------------------------------------------------------------------
   15. Tabs and pills
   ------------------------------------------------------------------------ */

.nav-tabs {
    border-block-end: 1px solid var(--line);
    gap: 4px;
}

.nav-tabs .nav-link {
    border: 0;
    border-block-end: 2px solid transparent;
    border-radius: 0;
    padding: 11px 16px;
    font-weight: 600;
    font-size: var(--fs-body);
    color: var(--ink-mute);
    background: transparent;
}

.nav-tabs .nav-link:hover { color: var(--brand); }

.nav-tabs .nav-link.active {
    color: var(--brand-deep);
    border-block-end-color: var(--brand);
    background: transparent;
}

.nav-pills .nav-link {
    border-radius: var(--radius-pill);
    padding: 8px 16px;
    font-weight: 600;
    color: var(--ink-soft);
}

.nav-pills .nav-link.active { background: var(--brand); color: var(--on-brand); }


/* ---------------------------------------------------------------------------
   16. Application progress stepper

   The four form steps. Built to degrade: without JavaScript it is still an
   ordered list of labelled states.
   ------------------------------------------------------------------------ */

.ap-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0 0 24px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.ap-step {
    flex: 1 1 160px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    background: var(--paper);
    border: 1px solid transparent;
    min-width: 0;
}

.ap-step-no {
    flex: none;
    width: 27px; height: 27px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--line);
    color: var(--ink-soft);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.ap-step-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-step-note {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--ink-mute);
    text-transform: none;
    letter-spacing: 0;
}

.ap-step.is-current {
    background: var(--brand-soft);
    border-color: var(--brand-line);
}
.ap-step.is-current .ap-step-no { background: var(--brand); color: var(--on-brand); }
.ap-step.is-current .ap-step-label { color: var(--brand-deep); }

.ap-step.is-done { background: var(--ok-bg); }
.ap-step.is-done .ap-step-no { background: var(--ok); color: #fff; }
.ap-step.is-done .ap-step-label { color: var(--ok); }

.ap-step.is-locked { opacity: .62; }

/* bs-stepper, where a page uses the vendor widget instead. */
.bs-stepper .step-trigger { font-family: var(--font-body); font-weight: 600; }
.bs-stepper .bs-stepper-circle { background: var(--line); color: var(--ink-soft); }
.bs-stepper .active .bs-stepper-circle { background: var(--brand); color: var(--on-brand); }
.bs-stepper .line { background: var(--line); }

/* ---------------------------------------------------------------------------
   16b. The application stepper

   Four or five steps across the top of the dashboard — five when the programme
   charges a fee. They were four detached rectangles, each carrying the word
   STEP above its number and its name repeated underneath, which read as a row
   of buttons rather than a route through an application.

   It is now a stepper: numbered discs on a connecting rail, named underneath.
   The rail is what turns four separate things into one sequence, and it is
   drawn behind the discs so a disc always sits on top of it.

   State arrives as an inline `background` on the button — the dashboard sets it
   per step from $status_*_color — so nothing here may set a background or a
   text colour. Everything below is shape, weight and position only.
   ------------------------------------------------------------------------ */

.bs-stepper-header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    padding-block: 6px 4px !important;
}

.bs-stepper-header > .step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    max-width: 168px;
}

/* The rail. Runs from the centre of this disc to the centre of the next, so it
   never overhangs the row at either end. `inset-inline-start` keeps it on the
   correct side when the page is Arabic. */
.bs-stepper-header > .step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 27px;
    inset-inline-start: 50%;
    width: 100%;
    height: 2px;
    background: var(--line);
    z-index: 0;
}

/* The tile and its name are inside one inline <a>, which put them side by side
   and made every step twice as wide as it needed to be. */
.bs-stepper-icon > a,
.bs-stepper-icon > div > a {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

/* The disc. A circle reads as "one of a sequence" in a way a rectangle does
   not, and it is what lets the rail pass cleanly between the steps. */
.bs-stepper-icon .btn {
    width: 54px !important;      /* the markup hardcodes 98px inline */
    height: 54px;
    padding: 0 !important;
    display: inline-flex !important;   /* markup sets display:inherit inline */
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 4px var(--surface);   /* masks the rail behind the disc */
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}

/* The word "STEP" is already said by the name underneath, so it is dropped
   from the disc — but kept in the document for anyone using a screen reader,
   where "Step 1, Personal Information" is exactly right. */
.bs-stepper-icon .btn > div {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Only a step you can actually open is interactive. The closed ones are
   wrapped in href="javascript:void(0)". */
.bs-stepper-icon a[href]:not([href^="javascript"]) .btn { cursor: pointer; }

.bs-stepper-icon a[href]:not([href^="javascript"]):hover .btn {
    transform: translateY(-2px);
    box-shadow: 0 0 0 4px var(--surface), var(--shadow-soft);
}

.bs-stepper-icon a[href]:not([href^="javascript"]):focus-visible .btn {
    box-shadow: 0 0 0 4px var(--surface), var(--focus-ring);
}

.bs-stepper-icon a[href^="javascript"] .btn { cursor: default; }

/* The step's name. The markup hardcodes width:80px inline, which broke
   "Personal Information" over three lines and made the row needlessly tall. */
/* The step's name, always two lines deep.
 *
 * The markup hardcodes width:80px inline, which broke "Personal Information"
 * over three lines. Widening it fixed that but left the row ragged: the long
 * names ran to two lines while "Upload Documents" and "Preview and Submit" sat
 * on one, so no two labels shared a baseline.
 *
 * The width below is chosen to wrap every two-word name onto two lines. It
 * cannot go narrower: "Information" is a single unbreakable word about 84px
 * wide, and anything tighter would push it out of its own box.
 *
 * That leaves "Fee Payment", which is short enough to fit on one line at any
 * width that still holds "Information". Rather than hyphenate it — which would
 * look like a defect — the block simply reserves two lines' height, so every
 * label occupies the same space and the row reads level whichever steps this
 * programme happens to show.
 */
.bs-stepper-label {
    width: auto !important;
    max-width: 92px;
    min-height: 2.7em;        /* exactly two lines at the line-height below */
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-wrap: balance;
}

@media (max-width: 767px) {
    .bs-stepper-header > .step { max-width: 108px; }
    .bs-stepper-icon .btn { width: 46px !important; height: 46px; font-size: 17px; }
    .bs-stepper-header > .step:not(:last-child)::after { inset-block-start: 23px; }

    /* 78px still clears "Information" at this smaller size, and keeps every
       other name on two lines. */
    .bs-stepper-label { max-width: 78px; font-size: var(--fs-xs); }
}

/* Below this five discs cannot sit side by side and stay legible, so the row
   wraps. The rail is dropped with it — a rail that jumps between lines says
   the wrong thing about the order. */
@media (max-width: 519px) {
    .bs-stepper-header { flex-wrap: wrap; gap: 14px 4px; }
    .bs-stepper-header > .step { flex: 0 1 96px; }
    .bs-stepper-header > .step:not(:last-child)::after { display: none; }
    .bs-stepper-icon .btn { box-shadow: none; }
}

/* ---------------------------------------------------------------------------
   16c. Inside a dark brand card

   The session card on the dashboard is navy. Bootstrap's link and muted
   colours are drawn for light paper and vanish on it, so they are restated
   here in the card's own material.
   ------------------------------------------------------------------------ */

.session-card-body a:not(.btn):not([style*="background"]) { color: #ffffff; }
.session-card-body a:not(.btn):hover { color: var(--brand-soft); }
.session-card-body .text-muted { color: rgba(255, 255, 255, .62) !important; }
.session-card-body hr { border-color: rgba(255, 255, 255, .16); }


/* ---------------------------------------------------------------------------
   17. Key / value display

   Review screens print a label and its value over and over. A definition grid
   reads far better than the <p><mark>Label:</mark> value</p> the pages use
   today, and the tint on the label keeps the two apart at a glance.
   ------------------------------------------------------------------------ */

.ap-kv {
    display: grid;
    grid-template-columns: minmax(140px, 34%) 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.ap-kv dt,
.ap-kv dd {
    margin: 0;
    padding: 11px 14px;
    background: var(--surface);
    font-size: var(--fs-body);
}

.ap-kv dt {
    background: var(--paper);
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.ap-kv dd { color: var(--ink); font-weight: 500; word-break: break-word; }

@media (max-width: 575px) {
    .ap-kv { grid-template-columns: 1fr; }
    .ap-kv dt { padding-block-end: 4px; }
    .ap-kv dd { padding-block-start: 4px; }
}

/* The existing <mark class="text-primary"> label idiom, tidied rather than
   replaced, so review pages improve without being rewritten. */
mark.text-primary,
mark.text-info {
    background: transparent;
    padding: 0;
    color: var(--ink-mute) !important;
    font-size: var(--fs-sm);
    font-weight: 600;
}


/* ---------------------------------------------------------------------------
   18. Statistic tiles
   ------------------------------------------------------------------------ */

.ap-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-block-end: 22px;
}

.ap-stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    box-shadow: var(--shadow-soft);
}

.ap-stat-label {
    display: block;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-block-end: 8px;
}

.ap-stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 600;
    color: var(--brand-deep);
    line-height: 1.15;
}

.ap-stat-note { display: block; margin-block-start: 6px; font-size: var(--fs-xs); color: var(--ink-mute); }


/* ---------------------------------------------------------------------------
   18b. Fee payment

   The screen where an applicant hands over money. It has one job: say exactly
   what is being charged and for which sittings, then offer one button. The
   figures are the content, so they are set large, in tabular figures, and the
   total is separated from the lines above it rather than being one more row.
   ------------------------------------------------------------------------ */

.pay {
    max-width: 520px;
    margin-inline: auto;
}

.pay-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.pay-head {
    padding: 22px 24px;
    background: var(--brand-gradient);
    color: var(--on-brand);
    text-align: center;
}

.pay-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    color: var(--on-brand);
}

.pay-head p {
    margin: 6px 0 0;
    font-size: var(--fs-sm);
    color: var(--on-brand-soft, rgba(255, 255, 255, .82));
}

.pay-body { padding: 22px 24px; }

/* One charged item. */
.pay-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-block: 12px;
    border-block-end: 1px dashed var(--line);
}

.pay-line:first-child { padding-block-start: 0; }

.pay-line-what { min-width: 0; }

.pay-line-what b {
    display: block;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--ink);
}

.pay-line-what span {
    display: block;
    margin-block-start: 2px;
    font-size: var(--fs-xs);
    color: var(--ink-mute);
}

.pay-line-amt {
    flex: none;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The total. Deliberately not another row: it is what the applicant is about
   to agree to, so it gets its own plate and the largest figure on the page. */
.pay-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-block-start: 18px;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
}

.pay-total-label {
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
}

.pay-total-amt {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 700;
    color: var(--brand-deep);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pay-cta {
    display: block;
    width: 100%;
    margin-block-start: 18px;
    padding: 14px 20px;
    border: 0;
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--on-brand);
    font-family: inherit;
    font-size: var(--fs-h4);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--shadow-cta);
    transition: background var(--t-fast), transform var(--t-fast);
}

.pay-cta:hover { background: var(--brand-dark); color: var(--on-brand); }
.pay-cta:active { transform: translateY(1px); }
.pay-cta:focus-visible { box-shadow: var(--focus-ring); }

/* What the applicant needs to know before pressing it. */
.pay-notes {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.pay-notes li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--ink-mute);
}

.pay-notes i { flex: none; margin-block-start: 1px; font-size: 14px; color: var(--brand); }
.pay-notes li.is-warn { color: var(--warn); }
.pay-notes li.is-warn i { color: var(--warn); }

.pay-foot {
    padding: 14px 24px;
    background: var(--paper);
    border-block-start: 1px solid var(--line);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--ink-mute);
}

/* Sandbox card list, shown only in test mode. */
.pay-sandbox {
    margin-block-start: 18px;
    padding: 14px 16px;
    border: 1px dashed var(--warn-line);
    border-radius: var(--radius);
    background: var(--warn-bg);
}

.pay-sandbox h3 {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--warn);
}

.pay-sandbox ul { margin: 0; padding-inline-start: 18px; }
.pay-sandbox li { font-size: var(--fs-xs); color: var(--warn); font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
    .pay-body, .pay-head { padding-inline: 16px; }
    .pay-total { flex-direction: column; align-items: flex-start; gap: 6px; }
}


/* ---------------------------------------------------------------------------
   18c. Review and submit

   The final page prints the whole application back as sixty-odd label/value
   rows, each written as:

       <li class="d-flex align-items-center mb-3">
           <i class="bx bx-bullseye text-info"></i>
           <span class="fw-medium mx-2">Label:</span>
           <span>value</span>
       </li>

   Left alone that reads as a wall: every row the same weight, a bullseye
   beside thirty-six of them, and the value indistinguishable from its label.
   The rules below turn each row into a proper record line — quiet label, firm
   value, hairline between — without the markup changing at all.
   ------------------------------------------------------------------------ */

.invoice-preview .list-unstyled { margin: 0; }

.invoice-preview li.d-flex {
    display: grid !important;
    grid-template-columns: 20px minmax(120px, 34%) 1fr;
    align-items: baseline !important;
    gap: 0 10px;
    margin-block-end: 0 !important;
    padding-block: 9px;
    border-block-end: 1px solid var(--line);
}

.invoice-preview li.d-flex:last-child { border-block-end: 0; }

/* The icon is a bullet, not an illustration: one size, one colour, aligned. */
.invoice-preview li.d-flex > i {
    font-size: 15px;
    color: var(--brand) !important;
    opacity: .55;
    line-height: 1.5;
}

/* The label. It carries a trailing colon in the markup, so no punctuation is
   added here. */
.invoice-preview li.d-flex > .fw-medium {
    margin: 0 !important;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-mute);
}

/* Everything after the label is the value. */
.invoice-preview li.d-flex > .fw-medium ~ * {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--ink);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Section headings inside the review, e.g. "Personal", "Education". */
.invoice-preview .fw-bold.text-uppercase,
.invoice-preview h6.text-uppercase {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .09em;
    color: var(--brand);
    padding-block-end: 7px;
    margin-block-end: 10px;
    border-block-end: 2px solid var(--brand-line);
}

/* The two-column tables the review uses for layout. Their cells become real
   panels rather than bare table cells, and they stack on a phone. */
.invoice-preview .table > tbody > tr > td {
    padding: 16px 18px;
    border-block-end: 1px solid var(--line);
    vertical-align: top;
}

.invoice-preview .table { border-radius: var(--radius); overflow: hidden; }
.invoice-preview .table.border-top { border-block-start: 0 !important; }

@media (max-width: 767px) {
    .invoice-preview .table,
    .invoice-preview .table > tbody,
    .invoice-preview .table > tbody > tr,
    .invoice-preview .table > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .invoice-preview .table > tbody > tr > td { padding-inline: 0; }
    .invoice-preview li.d-flex { grid-template-columns: 20px 1fr; }
    .invoice-preview li.d-flex > .fw-medium ~ * { grid-column: 2; }
}

/* The masthead at the top of the printed review. */
.invoice-preview-card .svg-illustration h5 {
    font-size: var(--fs-h3);
    color: var(--brand-deep);
}

.invoice-preview-card .svg-illustration h6 {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-soft);
}

/* Uploaded-document previews, rendered as accordions by docAccordion(). */
.invoice-preview .accordion-button.btn-info {
    background: var(--brand-soft);
    color: var(--brand-deep);
    border: 0;
}

.invoice-preview .accordion-button.btn-info:not(.collapsed) {
    background: var(--brand);
    color: var(--on-brand);
}

.invoice-preview .accordion-button.btn-info:not(.collapsed)::after { filter: brightness(0) invert(1); }

.invoice-preview .filePreview img,
.invoice-preview .filePreview embed {
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
}


/* ---------------------------------------------------------------------------
   18d. Profile

   The header was built for a banner image that was commented out years ago, so
   the photograph floated against nothing. A brand band costs no asset, never
   fails to load, and gives the portrait something to sit against.
   ------------------------------------------------------------------------ */

.user-profile-header-banner {
    height: 150px;
    background: var(--brand-gradient-wide, var(--brand-gradient));
    border-start-start-radius: var(--radius-lg);
    border-start-end-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

/* A very fine diagonal ruling. Felt rather than seen; it stops the flat
   gradient reading as a plastic panel. */
.user-profile-header-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, .05) 0px, rgba(255, 255, 255, .05) 1px,
        rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 15px
    );
}

.user-profile-header { position: relative; }

.user-profile-img,
.user-profile-header .profile-thumb {
    width: 132px !important;
    height: 132px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 4px solid var(--surface);
    box-shadow: var(--shadow-card);
    margin-block-start: -58px;
    background: var(--surface);
}

.user-profile-info h4 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    color: var(--brand-deep);
    margin-block-end: 6px;
}

.user-profile-info .list-inline-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.user-profile-info .list-inline-item i { font-size: 15px; opacity: .8; }

/* A tighter key/value grid for the panels that carry a lot of short rows. */
.ap-kv-tight dt,
.ap-kv-tight dd { padding-block: 8px; }

/* A value that is legitimately not there yet, as against one that is missing.
   "Not submitted" is a fact about the application, so it is stated rather than
   left blank, but it is not set in the same weight as a real date. */
.ap-kv-pending {
    color: var(--warn);
    font-weight: 600;
}

/* The line under the contact panel saying where a detail is actually changed.
   The profile is read-only on purpose: a second place to edit the same field
   is a second version of the truth. */
.ap-profile-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--brand-dark);
}

.ap-profile-note i { flex: none; margin-block-start: 1px; font-size: 14px; }

/* ---- One application ---------------------------------------------------
   An applicant may hold several: a UG intake this year, a master's the next.
   Each is a panel rather than a table row, because the four step chips are the
   point and they do not belong in a cell. */

.ap-appcard {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.ap-appcard + .ap-appcard { margin-block-start: 14px; }

.ap-appcard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-block-end: 12px;
    margin-block-end: 12px;
    border-block-end: 1px solid var(--line);
}

.ap-appcard-title {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 600;
    color: var(--brand-deep);
}

.ap-appcard-type {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .06em;
    vertical-align: 2px;
}

.ap-appcard-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block: 14px;
}

.ap-appcard-steps .ap-status { font-size: var(--fs-label); padding-inline: 10px; }

/* The quiet state a step sits in before it has been touched. */
.ap-status.is-mute {
    background: var(--paper);
    border-color: var(--line);
    color: var(--ink-mute);
}

/* ---- Activity timeline -------------------------------------------------
   Fed by application_logs, so it is the applicant's real history rather than
   a single hardcoded "Registration" row. A rail runs down the dots; the last
   entry drops it, or the line would dangle past the oldest event.
   ---------------------------------------------------------------------- */

.ap-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ap-timeline-item {
    position: relative;
    display: flex;
    gap: 14px;
    padding-block-end: 20px;
}

.ap-timeline-item:last-child { padding-block-end: 0; }

.ap-timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: 15px;
    inset-block: 34px 0;
    width: 2px;
    background: var(--line);
}

.ap-timeline-dot {
    position: relative;
    z-index: 1;
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink-mute);
    font-size: 16px;
}

.ap-timeline-item.is-brand .ap-timeline-dot { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.ap-timeline-item.is-ok    .ap-timeline-dot { background: var(--ok-bg);    border-color: var(--ok-line);    color: var(--ok); }
.ap-timeline-item.is-warn  .ap-timeline-dot { background: var(--warn-bg);  border-color: var(--warn-line);  color: var(--warn); }
.ap-timeline-item.is-bad   .ap-timeline-dot { background: var(--bad-bg);   border-color: var(--bad-line);   color: var(--bad); }

.ap-timeline-body { min-width: 0; padding-block-start: 4px; }

.ap-timeline-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ap-timeline-title {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--ink);
}

.ap-timeline-time {
    font-size: var(--fs-xs);
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ap-timeline-note {
    margin: 4px 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.ap-timeline-who {
    display: inline-block;
    margin-block-start: 5px;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-mute);
}


/* ---------------------------------------------------------------------------
   18e. Support

   A thread of past requests, rendered as accordions. The date was set in a
   <mark>, which browsers paint highlighter-yellow.
   ------------------------------------------------------------------------ */

.accordion-button mark {
    background: var(--brand-soft);
    color: var(--brand-dark);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-weight: 600;
}

.accordion-button mark small { font-size: var(--fs-xs); }

.accordion-item.active > .accordion-header .accordion-button {
    background: var(--brand-soft);
    color: var(--brand-deep);
}


/* ---------------------------------------------------------------------------
   19. Empty state
   ------------------------------------------------------------------------ */

.ap-empty {
    text-align: center;
    padding: 46px 24px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.ap-empty i { font-size: 40px; color: var(--brand-line); display: block; margin-block-end: 12px; }
.ap-empty-title { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--ink); margin: 0 0 6px; }
.ap-empty-text { font-size: var(--fs-sm); color: var(--ink-mute); margin: 0; }


/* ---------------------------------------------------------------------------
   20. Modal
   ------------------------------------------------------------------------ */

.modal-content {
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
}

.modal-header {
    background: var(--brand-gradient);
    color: var(--on-brand);
    border-block-end: 0;
    padding: 18px 22px;
}

.modal-header .modal-title { color: var(--on-brand); font-size: var(--fs-h4); }

/* The close control on a brand header.

   The template does not use Bootstrap's own cross: it paints its own SVG as a
   background image, in its own grey. Inverting that turned the icon black
   against the dark header — a blob rather than a cross. brightness(0) flattens
   whatever the source is to black first, and invert(1) then lifts every one of
   those pixels to white, so the result is the same whatever icon the template
   ships. The background is forced transparent in case the theme fills it. */
/* Every modal, not only .iitd-modal: the template floats the cross out
   past the corner (translate(23px, -25px) on a white plate). Pinned back
   inside the header row, on the right, drawn white for the brand header. */
.modal .modal-header .btn-close,
.modal .modal-header .btn-close:hover,
.modal .modal-header .btn-close:focus,
.modal .modal-header .btn-close:active {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 12px auto no-repeat;
    background-color: transparent;
    filter: none;
    box-shadow: none;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0 0 0 auto;
    border-radius: var(--radius-sm);
    opacity: .85;
    position: static;
    transform: none;
    transition: opacity var(--t-fast), background-color var(--t-fast);
}
.modal .modal-header .btn-close:hover,
.modal .modal-header .btn-close:focus { opacity: 1; background-color: rgba(255, 255, 255, .16); }
[dir="rtl"] .modal .modal-header .btn-close { margin: 0 auto 0 0; }

.modal-body { padding: 22px; font-size: var(--fs-body); color: var(--ink); }
.modal-footer { border-block-start: 1px solid var(--line); padding: 16px 22px; background: var(--paper); }


/* ---------------------------------------------------------------------------
   21. Progress bar
   ------------------------------------------------------------------------ */

.progress {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--line);
    overflow: hidden;
}

.progress-bar { background: var(--brand); }


/* ---------------------------------------------------------------------------
   22. List groups
   ------------------------------------------------------------------------ */

.list-group-item {
    border-color: var(--line);
    padding: 13px 16px;
    font-size: var(--fs-body);
    color: var(--ink);
    background: var(--surface);
}

.list-group-item-action:hover { background: var(--brand-soft); color: var(--brand-deep); }


/* ---------------------------------------------------------------------------
   23. Images and uploaded document previews

   `img-border-thick` is used on scanned documents throughout the form. It was
   a heavy tan border; a quiet frame reads as a document rather than a mistake.
   ------------------------------------------------------------------------ */

.img-border-thick {
    border: 1px solid var(--line-strong) !important;
    border-radius: var(--radius-sm);
    padding: 4px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------------------------
   24. Footer
   ------------------------------------------------------------------------ */

.content-footer {
    background: transparent !important;
    border-block-start: 1px solid var(--line);
    margin-block-start: 28px;
}

.content-footer .container-xxl {
    font-size: var(--fs-xs);
    color: var(--ink-mute);
    padding-block: 16px !important;
}


/* ---------------------------------------------------------------------------
   25. Toastr — the notice shown after every save
   ------------------------------------------------------------------------ */

#toast-container > div {
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    opacity: 1;
    font-size: var(--fs-body);
}

#toast-container > .toast-success { background-color: var(--ok); }
#toast-container > .toast-error   { background-color: var(--bad); }
#toast-container > .toast-info    { background-color: var(--brand); }
#toast-container > .toast-warning { background-color: #b07d08; }


/* ---------------------------------------------------------------------------
   26. Responsive trims
   ------------------------------------------------------------------------ */

@media (max-width: 991px) {
    .content-wrapper h4.py-3 { font-size: var(--fs-h3); }
    .ap-steps { padding: 12px; }
}

@media (max-width: 575px) {
    .btn { width: auto; }
    .ap-head { align-items: flex-start; }
    .ap-stats { grid-template-columns: 1fr; gap: 12px; }
    .table > thead > tr > th,
    .table > tbody > tr > td { padding: 10px; }
}


/* ---------------------------------------------------------------------------
   27. Print

   Applicants print the submitted form, the fee invoice and the admit card.
   Drop the shell, keep the content, and never print a page of blue ink.
   ------------------------------------------------------------------------ */

@media print {
    .layout-menu,
    .layout-navbar,
    .content-footer,
    .layout-overlay,
    .btn,
    .ap-head-actions,
    #toast-container { display: none !important; }

    body, .layout-page, .content-wrapper { background: #fff !important; }

    .layout-page { margin: 0 !important; padding: 0 !important; }

    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    .card-header { background: #fff !important; color: #000 !important; }

    .table > thead > tr > th {
        background: #f1f1f1 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    a[href]::after { content: ""; }
}


/* ---------------------------------------------------------------------------
   28. Support desk

   The helpdesk the applicant sees: the ticket list, the new-request form with
   its FAQ deflection panel, and the conversation thread. Everything here that
   could be a portal primitive already is one — .card, .btn, .form-control,
   .ap-status, .ap-empty, .accordion. What is left is genuinely new: a list row
   that behaves as one large link, a chat thread, an attachment picker and a
   star rating.

   Same two rules as the rest of the file: no raw brand hex, and
   direction-neutral geometry so the whole module mirrors in Arabic.
   ------------------------------------------------------------------------ */

/* --- 28.1 Screen-reader-only label -------------------------------------- */

.sup-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* --- 28.2 Sub-header ----------------------------------------------------
   The page h4 carries the portal label; this second row carries the screen's
   own title, its one-line explanation and the primary actions. */

.sup-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-block-end: 20px;
}

.sup-head-text { min-width: 0; }

.sup-head-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    color: var(--brand-deep);
    word-break: break-word;
}

.sup-head-sub {
    margin: 5px 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-mute);
}

.sup-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* The reference number is quoted on the phone and in email; tabular figures
   keep it from wobbling between rows. */
.sup-ref {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--brand-dark);
}

.sup-sep { color: var(--line-strong); margin-inline: 6px; }


/* --- 28.3 Filter tabs and search ---------------------------------------- */

.sup-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-block-end: 18px;
}

.sup-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
}

.sup-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}

.sup-tab:hover { background: var(--brand-soft); color: var(--brand-dark); }
.sup-tab:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.sup-tab.is-active { background: var(--brand); color: var(--on-brand); }

.sup-count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    background: var(--paper);
    color: var(--ink-mute);
    font-size: var(--fs-label);
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.sup-tab.is-active .sup-count { background: rgba(255, 255, 255, .22); color: var(--on-brand); }

.sup-search { min-width: 0; }
.sup-search .form-label { margin-block-end: 5px; }

.sup-search-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.sup-search-row .form-control { min-width: 0; max-width: 320px; }
.sup-search-row .btn { flex: none; }


/* --- 28.4 Ticket list ---------------------------------------------------
   Each row is a single anchor so the whole card is the hit target, which is
   what makes the list usable with a thumb. */

.sup-list { display: flex; flex-direction: column; gap: 10px; }

.sup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.sup-row:hover {
    border-inline-start-color: var(--brand);
    box-shadow: var(--shadow-soft);
    color: inherit;
}

.sup-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sup-row.is-unread { border-inline-start-color: var(--brand); background: var(--brand-soft); }

.sup-row-main { min-width: 0; display: block; }

.sup-row-subject {
    display: block;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--ink);
    word-break: break-word;
}

.sup-row-meta {
    display: block;
    margin-block-start: 4px;
    font-size: var(--fs-xs);
    color: var(--ink-mute);
}

.sup-row-end {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* An answer is waiting to be read. */
.sup-unread {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand);
    margin-inline-end: 7px;
    vertical-align: middle;
}

/* Rate nudge on a resolved ticket with no rating yet. */
.sup-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--warn-line);
    background: var(--warn-bg);
    color: var(--warn);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

.sup-flag i { font-size: 14px; }


/* --- 28.5 Status and priority chips -------------------------------------
   .ap-status already carries the shape and the dot; these add the five ticket
   states on top of it. Closed keeps the neutral default. */

.ap-status.is-open     { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); }
.ap-status.is-progress { background: var(--warn-bg);    border-color: var(--warn-line);  color: var(--warn); }
.ap-status.is-awaiting { background: var(--bad-bg);     border-color: var(--bad-line);   color: var(--bad); }
.ap-status.is-resolved { background: var(--ok-bg);      border-color: var(--ok-line);    color: var(--ok); }
.ap-status.is-closed   { background: var(--paper);      border-color: var(--line);       color: var(--ink-mute); }

.sup-pri {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink-mute);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

.sup-pri.is-3 { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
.sup-pri.is-4 { border-color: var(--bad-line);  background: var(--bad-bg);  color: var(--bad); }


/* --- 28.6 Form pieces ---------------------------------------------------- */

.sup-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.sup-fieldset > legend { float: none; width: auto; padding: 0; }

/* Priority picker: segmented radios that stay radios without CSS. */
.sup-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sup-choice-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

.sup-choice-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.sup-choice-label:hover { border-color: var(--brand-line); background: var(--brand-soft); }

.sup-choice-input:checked + .sup-choice-label {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}

.sup-choice-input:focus-visible + .sup-choice-label { box-shadow: var(--focus-ring); }

.sup-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-block-start: 20px;
}

.sup-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    color: var(--ink-mute);
}

.sup-hint i { font-size: 15px; color: var(--brand); }


/* --- 28.7 Attachment picker ---------------------------------------------
   A styled face over a real file input. The input stays in the tab order and
   keeps its label, so the keyboard and the screen reader use the native
   control; the script rewrites input.files with DataTransfer, so the form
   posts exactly what it always posted. Browsers without that constructor get
   .is-plain and the native picker back. */

.sup-dz { position: relative; }

.sup-dz-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
}

.sup-dz-face {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}

.sup-dz-face:hover { border-color: var(--brand); background: var(--brand-soft); }
.sup-dz.is-drag .sup-dz-face { border-color: var(--brand); background: var(--brand-soft); }

.sup-dz-input:focus-visible + .sup-dz-face {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

.sup-dz-face > i { font-size: 26px; color: var(--brand); flex: none; }

.sup-dz-tx { display: block; min-width: 0; }
.sup-dz-tx b { display: block; font-size: var(--fs-sm); color: var(--ink); }

/* The limits are stated on the control itself, never only in an error. */
.sup-dz-tx span {
    display: block;
    margin-block-start: 3px;
    font-size: var(--fs-xs);
    color: var(--ink-mute);
    word-break: break-word;
}

.sup-dz.is-compact .sup-dz-face { padding: 12px 14px; }
.sup-dz.is-compact .sup-dz-face > i { font-size: 20px; }

.sup-dz-err {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--bad-line);
    background: var(--bad-bg);
    color: var(--bad);
    font-size: var(--fs-xs);
}

.sup-dz-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 10px;
}

.sup-dz-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding-block: 5px;
    padding-inline: 12px 6px;
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    font-size: var(--fs-xs);
    color: var(--brand-deep);
}

.sup-dz-file .nm {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sup-dz-file .sz { color: var(--ink-mute); font-variant-numeric: tabular-nums; }

.sup-dz-file .rm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-mute);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.sup-dz-file .rm:hover { background: var(--bad-bg); color: var(--bad); }
.sup-dz-file .rm:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/* No DataTransfer — surrender to the native control. */
.sup-dz.is-plain .sup-dz-face { display: none; }
.sup-dz.is-plain .sup-dz-input {
    position: static;
    width: 100%; height: auto;
    opacity: 1;
}


/* --- 28.8 Side panels: FAQ deflection and what-happens-next -------------- */

.sup-side-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    color: var(--brand-deep);
}

.sup-side-title i { font-size: 18px; color: var(--brand); }

.sup-side-sub {
    margin: 0 0 12px;
    font-size: var(--fs-xs);
    color: var(--ink-mute);
}

.sup-next {
    counter-reset: sup-step;
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.sup-next li {
    position: relative;
    counter-increment: sup-step;
    padding-inline-start: 34px;
    padding-block: 7px;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

.sup-next li::before {
    content: counter(sup-step);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 6px;
    width: 22px; height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: var(--fs-label);
    font-weight: 700;
}

.sup-faq-item { border-block-start: 1px solid var(--line); }
.sup-faq-item:first-child { border-block-start: 0; }

.sup-faq-q {
    display: block;
    width: 100%;
    padding: 10px 0;
    border: 0;
    background: transparent;
    text-align: start;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--brand-dark);
    cursor: pointer;
}

.sup-faq-q:hover { color: var(--brand); }
.sup-faq-q:focus-visible { box-shadow: var(--focus-ring); outline: none; }

.sup-faq-a {
    padding-block-end: 12px;
    font-size: var(--fs-xs);
    color: var(--ink-soft);
    line-height: 1.7;
}

.sup-faq-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-block-start: 22px;
    padding: 16px 20px;
    border: 1px solid var(--brand-line);
    border-radius: var(--radius);
    background: var(--brand-soft);
    font-size: var(--fs-sm);
    color: var(--brand-deep);
}


/* --- 28.9 Resolved banner ----------------------------------------------- */

.sup-resolved { border-inline-start: 3px solid var(--ok); }

.sup-resolved-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sup-resolved-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 4px;
    font-size: var(--fs-h4);
    color: var(--ok);
}

.sup-resolved-title i { font-size: 19px; }

.sup-resolved-text {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--ink-mute);
}

.sup-resolved-actions { display: flex; gap: 8px; flex-wrap: wrap; }


/* --- 28.10 Star rating ---------------------------------------------------
   Five real radios in descending order. row-reverse puts 1 first along the
   writing direction, which is correct in both Arabic and English, and the
   sibling combinator lights every star below the hovered one.

   The gold below is the one literal in this section. A filled star is a rating
   colour, not a brand colour — it must stay gold in the red staff portal too —
   and the token set has no slot for it, so it is written once here. */

.sup-rate {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-block-start: 10px;
}

.sup-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 2px;
}

.sup-stars input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

.sup-stars label {
    font-size: 27px;
    line-height: 1;
    color: var(--line-strong);
    cursor: pointer;
    transition: color var(--t-fast), transform var(--t-fast);
}

.sup-stars label:hover,
.sup-stars label:hover ~ label,
.sup-stars input:checked ~ label { color: #e0a80d; }

.sup-stars label:hover { transform: scale(1.08); }
.sup-stars input:focus-visible + label { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.sup-rate-note { min-width: 200px; flex: 1 1 200px; }
.sup-rate-note .form-label { margin-block-end: 5px; }

.sup-rated { margin: 6px 0 0; font-size: 22px; line-height: 1; color: #e0a80d; }
.sup-rated-note { margin: 8px 0 0; font-size: var(--fs-sm); font-style: italic; color: var(--ink-mute); }


/* --- 28.11 Conversation thread ------------------------------------------
   The applicant's own messages sit on the trailing edge, the Support Desk's on
   the leading edge. Both edges are logical, so Arabic mirrors the whole
   conversation without a second rule. */

.sup-thread { display: flex; flex-direction: column; gap: 18px; }

.sup-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 82%;
}

.sup-msg.is-own {
    flex-direction: row-reverse;
    margin-inline-start: auto;
}

.sup-avatar {
    flex: none;
    width: 34px; height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.sup-avatar.is-agent { background: var(--brand-deep); }

.sup-bubble {
    min-width: 0;
    padding: 12px 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.sup-msg.is-own .sup-bubble {
    background: var(--brand-soft);
    border-color: var(--brand-line);
}

.sup-by {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 6px;
    font-size: var(--fs-xs);
}

.sup-by b { color: var(--brand-deep); font-weight: 700; }
.sup-time { color: var(--ink-mute); font-variant-numeric: tabular-nums; }

.sup-text {
    font-size: var(--fs-body);
    color: var(--ink);
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sup-files {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-block-start: 10px;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--line);
}

.sup-file {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-size: var(--fs-xs);
    color: var(--brand-dark);
    text-decoration: none;
}

.sup-file:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }
.sup-file i { font-size: 14px; flex: none; }

.sup-file .nm {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sup-file .sz { color: var(--ink-mute); font-variant-numeric: tabular-nums; }

.sup-thread-empty {
    margin: 0;
    padding: 24px 0;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--ink-mute);
}

.sup-closed-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sup-links { list-style: none; margin: 10px 0 0; padding: 0; }
.sup-links li { padding-block: 4px; font-size: var(--fs-sm); }
.sup-links a { color: var(--ink); text-decoration: none; }
.sup-links a:hover { color: var(--brand); }


/* --- 28.12 Pagination ---------------------------------------------------
   The ticket list is the first paginated applicant screen, so the Bootstrap
   pager is skinned here rather than left in the template's purple. */

.pagination { gap: 4px; margin: 0; flex-wrap: wrap; }

.page-link {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm) !important;
    padding: 7px 13px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface);
}

.page-link:hover { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); }
.page-link:focus { box-shadow: var(--focus-ring); }

.page-item.active .page-link {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}

.page-item.disabled .page-link { background: var(--paper); color: var(--ink-mute); opacity: .7; }

/* The pager's own chevrons are drawn for LTR. */
[dir="rtl"] .pagination { flex-direction: row-reverse; justify-content: flex-end; }


/* --- 28.13 Responsive trims ---------------------------------------------
   At 400px the thread must still read as a conversation, so the bubbles widen
   and the rows stack rather than squeeze. */

@media (max-width: 767px) {
    .sup-msg { max-width: 100%; }

    .sup-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .sup-row-end { justify-content: flex-start; width: 100%; }

    .sup-toolbar { align-items: stretch; }
    .sup-tabs { justify-content: space-between; }
    .sup-search { width: 100%; }
    .sup-search-row .form-control { max-width: none; flex: 1 1 auto; }

    .sup-resolved-actions,
    .sup-form-actions { width: 100%; }
}

@media (max-width: 575px) {
    .sup-head { align-items: flex-start; }
    .sup-head-actions { width: 100%; }
    .sup-head-actions .btn { flex: 1 1 auto; justify-content: center; }

    .sup-tab { padding-inline: 11px; font-size: var(--fs-xs); }

    .sup-dz-face { flex-direction: column; align-items: flex-start; }
    .sup-dz-file .nm,
    .sup-file .nm { max-width: 140px; }

    .sup-avatar { width: 28px; height: 28px; font-size: var(--fs-xs); }
    .sup-bubble { padding: 10px 12px; }

    .sup-rate { gap: 10px; }
    .sup-rate-note { flex-basis: 100%; }
}


/* --- 28.14 Print ---------------------------------------------------------
   Applicants print a ticket to attach it to an email or carry it to a counter.
   Keep the correspondence, drop the composer. */

@media print {
    .sup-head-actions,
    .sup-toolbar,
    .sup-dz,
    .sup-resolved-actions,
    .sup-form-actions,
    .sup-closed-foot,
    .sup-faq-foot,
    .pagination { display: none !important; }

    .sup-msg { max-width: 100%; break-inside: avoid; }
    .sup-bubble { border: 1px solid #ccc !important; background: #fff !important; }
}