/* ============================================================================
   components.css — the shared page furniture for portal pages.
   Load order:  tokens.css  →  portal-applicant.css | portal-admin.css  →  this.

   Every class is prefixed `iitd-` so it can never collide with Bootstrap or
   with the purchased dashboard template.

   Two rules keep this file portable:

   1. BRAND COLOUR ONLY THROUGH TOKENS. There is no raw hex for a brand colour
      below. The same markup renders blue on an applicant page and red on an
      admin page purely by which portal file is linked.

   2. DIRECTION-NEUTRAL GEOMETRY. Spacing and borders use logical properties
      (padding-inline, margin-inline-start, border-inline-start, inset-inline-end)
      so the Arabic (RTL) rendering mirrors itself with no extra stylesheet and
      no `[dir=rtl]` overrides. Only genuinely directional art — the hero veil
      and gradient angles — is flipped explicitly at the end of this file.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. Page shell
   ------------------------------------------------------------------------- */
body.iitd-page {
    background: var(--paper) !important;
    font-family: var(--font-body);
    color: var(--ink);
    margin: 0;
}

/* Arabic needs a face with Arabic coverage; the display serif has none.
   Applies whichever way the locale is signalled. */
[dir="rtl"] body.iitd-page,
body.iitd-page:lang(ar) { font-family: var(--font-arabic), var(--font-body); }
[dir="rtl"] .iitd-display,
[dir="rtl"] .iitd-masthead h1,
[dir="rtl"] .iitd-hero h2,
[dir="rtl"] .iitd-card h3,
[dir="rtl"] .iitd-aside-head h4,
[dir="rtl"] .iitd-band h2 { font-family: var(--font-arabic), var(--font-display); }

.iitd-display { font-family: var(--font-display); font-weight: 700; }

/* ---------------------------------------------------------------------------
   1. Utility bar — the thin strip above the masthead
   ------------------------------------------------------------------------- */
.iitd-topbar {
    background: var(--brand-deep);
    color: var(--on-brand-soft);
    font-size: 12.5px;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 8px var(--page-gutter);
    flex-wrap: wrap;
}
.iitd-topbar a { color: var(--on-brand); text-decoration: none; opacity: .9; }
.iitd-topbar a:hover { opacity: 1; text-decoration: underline; }
.iitd-topbar-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.iitd-topbar-sep { opacity: .45; }

/* Language switcher lives in the utility bar on every portal page. */
.iitd-lang > .dropdown-toggle {
    color: var(--on-brand);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--radius-pill);
    padding: 3px 12px;
    font-size: 12.5px;
}
.iitd-lang > .dropdown-toggle:hover { background: rgba(255, 255, 255, .12); }
/* The menu sits on white, so its links must NOT inherit the white link colour
   the surrounding utility bar sets — that made every inactive language
   invisible until hover. Colour is stated explicitly here. */
.iitd-lang .dropdown-menu {
    min-width: 11rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 6px;
    box-shadow: var(--shadow-soft);
}
.iitd-topbar .iitd-lang .dropdown-menu .dropdown-item,
.iitd-lang .dropdown-item {
    color: var(--ink) !important;
    opacity: 1;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    padding: 7px 10px;
    text-decoration: none;
}
.iitd-topbar .iitd-lang .dropdown-menu .dropdown-item:hover,
.iitd-lang .dropdown-item:hover { background: var(--paper); color: var(--ink) !important; text-decoration: none; }
.iitd-topbar .iitd-lang .dropdown-menu .dropdown-item.active,
.iitd-lang .dropdown-item.active,
.iitd-lang .dropdown-item:active { background: var(--brand-soft); color: var(--brand-dark) !important; font-weight: 600; }

/* ---------------------------------------------------------------------------
   2. Masthead — logos flanking the institute name
   ------------------------------------------------------------------------- */
/* Three equal-weight columns rather than a flex row, so the institute name
   stays optically centred even when only one of the two logo slots is filled.
   The side columns align to the inline start and end, so in Arabic the whole
   masthead mirrors and the logo sits on the right without any RTL override. */
.iitd-masthead {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 14px var(--page-gutter);
}
.iitd-masthead .iitd-logo { display: flex; align-items: center; min-width: 0; }
.iitd-masthead .iitd-logo:first-child { justify-content: flex-start; }
.iitd-masthead .iitd-logo:last-child { justify-content: flex-end; }
.iitd-masthead .iitd-logo img { height: 74px; width: auto; max-width: 100%; object-fit: contain; }
.iitd-mast-mid { text-align: center; min-width: 0; }

/* Below the grid breakpoint the three cells stack into one centred column. */
@media (max-width: 767px) {
    .iitd-masthead { grid-template-columns: 1fr; gap: 10px; justify-items: center; }
    .iitd-masthead .iitd-logo:first-child,
    .iitd-masthead .iitd-logo:last-child { justify-content: center; }
    .iitd-masthead .iitd-logo:empty { display: none; }
}
.iitd-kicker {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0 0 3px;
}
.iitd-masthead h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h1);
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
}
@media (max-width: 575px) {
    .iitd-masthead { justify-content: center; }
    .iitd-masthead .iitd-logo img { height: 56px; }
}

/* ---------------------------------------------------------------------------
   3. Hero — the banner carrying the notification title
   ------------------------------------------------------------------------- */
.iitd-hero {
    position: relative;
    min-height: 270px;
    display: flex;
    align-items: flex-end;
    background-color: var(--brand-dark);
    background-position: center;
    background-size: cover;
}
.iitd-hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-veil); }
.iitd-hero-inner {
    position: relative;
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 46px var(--page-gutter) 34px;
    color: var(--on-brand);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.iitd-eyebrow {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--on-brand-soft);
    margin: 0 0 8px;
}
.iitd-hero h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-hero);
    line-height: 1.15;
    margin: 0 0 14px;
    color: var(--on-brand);
}
.iitd-hero-sub { font-size: 15px; color: var(--on-brand-soft); margin: 0 0 14px; }

/* Status chips: open / closed / informational */
.iitd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.iitd-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    color: var(--on-brand);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    backdrop-filter: blur(3px);
}
.iitd-chip a { color: var(--on-brand); text-decoration: underline; }
.iitd-chip.is-open { background: rgba(23, 105, 74, .85); border-color: rgba(255, 255, 255, .4); }
.iitd-chip.is-closed { background: rgba(0, 0, 0, .45); }

/* ---------------------------------------------------------------------------
   4. Layout — form column beside a sticky information column
   ------------------------------------------------------------------------- */
/* No z-index on .iitd-main: it would create a stacking context that traps a
   Bootstrap modal rendered inside the form beneath the body-level backdrop,
   leaving the dialog greyed out and unclickable. DOM order alone already
   paints this block above the hero. */
.iitd-main { max-width: var(--page-max); margin: -26px auto 60px; padding: 0 var(--page-gutter); position: relative; }
.iitd-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 26px; align-items: start; }
@media (max-width: 991px) { .iitd-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   5. Card — the white panel that holds the form
   ------------------------------------------------------------------------- */
.iitd-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 30px 32px 26px;
}
@media (max-width: 575px) { .iitd-card { padding: 22px 18px; } }

.iitd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.iitd-card-head h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); color: var(--brand); margin: 0; }
.iitd-card-sub { font-size: var(--fs-sm); color: var(--ink-mute); margin: 0 0 22px; }

/* Pill link, e.g. "Already registered? Log in" */
.iitd-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand-dark);
    border-radius: var(--radius-pill);
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.iitd-pill:hover { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

/* Section heading inside the form */
.iitd-section {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--brand);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 2px solid var(--brand-line);
    padding-bottom: 6px;
    margin: 26px 0 16px;
}
.iitd-section:first-of-type { margin-top: 4px; }
.iitd-section i { font-size: var(--fs-h4); }

/* ---------------------------------------------------------------------------
   6. Form controls
   ------------------------------------------------------------------------- */
.iitd-card .form-label,
.iitd-card label.form-label {
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 6px;
}
.iitd-card .form-check-label { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.iitd-card .form-control,
.iitd-card .form-select,
.iitd-card select.form-control {
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    min-height: var(--field-height);
    font-size: var(--fs-body);
    color: var(--ink);
    background-color: var(--surface);
    box-shadow: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.iitd-card .form-control:focus,
.iitd-card .form-select:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
.iitd-card .form-control::placeholder { color: var(--ink-mute); }
.iitd-card .form-control:disabled,
.iitd-card .form-control[readonly] { background-color: var(--paper); color: var(--ink-soft); }

.iitd-card .invalid-feedback { font-size: var(--fs-xs); }
.iitd-card .form-control.is-invalid,
.iitd-card .was-validated .form-control:invalid { border-color: var(--bad); }
.iitd-card label.error { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--bad); margin-top: 4px; display: block; }

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

/* select2, matched to the native controls */
.iitd-card .select2-container--default .select2-selection--single,
.iitd-card .select2-container--default .select2-selection--multiple {
    border: 1.5px solid var(--line) !important;
    border-radius: var(--radius) !important;
    min-height: var(--field-height) !important;
}
.iitd-card .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; padding-inline-start: 12px; }
.iitd-card .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.iitd-card .select2-container--default.select2-container--focus .select2-selection--multiple,
.iitd-card .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--brand) !important;
    box-shadow: var(--focus-ring);
}
.iitd-card .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    color: var(--brand-dark);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    font-size: 12.5px;
}

/* intl-tel-input keeps its own width rules */
.iti { width: 100%; }

/* Date field with a calendar affordance */
.iitd-dob { position: relative; }
.iitd-dob .iitd-dob-icon {
    position: absolute;
    inset-inline-end: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand);
    cursor: pointer;
    z-index: 3;
}

/* ---------------------------------------------------------------------------
   7. Declaration rows — tinted, with a brand rule on the leading edge
   ------------------------------------------------------------------------- */
.iitd-declare {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-inline-start: 4px solid var(--brand);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--radius);
    border-end-end-radius: var(--radius);
    padding: 14px 16px !important;
    width: 100%;
    margin: 0 0 12px;
    cursor: pointer;
}
/* The checkbox may sit directly in the row or nested inside a .form-check
   wrapper, so the gap between box and text is set on the input itself rather
   than relying on the row's flex gap. Logical margins keep it correct in RTL. */
.iitd-declare .form-check { margin: 0; display: flex; align-items: flex-start; gap: 12px; }
.iitd-declare .form-check-input {
    flex: 0 0 auto;
    float: none;
    margin-block: 2px 0 !important;
    margin-inline: 0 12px !important;
    border: 2px solid var(--brand-line);
    background-color: var(--surface);
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
}
.iitd-declare .form-check-input:hover { border-color: var(--brand); }
.iitd-declare .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.iitd-declare .form-check-label { flex: 1 1 auto; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   8. Status panels — application not yet open / closed / informational
   ------------------------------------------------------------------------- */
.iitd-status { border-radius: 12px; padding: 22px 24px; margin: 6px 0 12px; }
.iitd-status h5 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); margin: 0 0 6px; }
.iitd-status p { margin: 0; font-size: 13.5px; }
.iitd-status .btn { margin-top: 12px; }
.iitd-status.is-wait { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); }
.iitd-status.is-closed { background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-deep); }
.iitd-status.is-open { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok); }
.iitd-status.is-error { background: var(--bad-bg); border: 1px solid var(--bad-line); color: var(--bad); }

/* Inline note block, lighter than a status panel */
.iitd-note {
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius);
    color: var(--ink-soft);
    font-size: 13.5px;
    padding: 12px 16px;
    margin-bottom: 14px;
}
.iitd-note a { color: var(--brand); font-weight: 600; }

/* ---------------------------------------------------------------------------
   9. Primary call to action
   ------------------------------------------------------------------------- */
.iitd-cta,
a.iitd-cta,
button.iitd-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: var(--brand-gradient) !important;
    color: var(--on-brand) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 22px !important;
    font-size: var(--fs-h4);
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: var(--shadow-cta);
    text-decoration: none;
    cursor: pointer;
}
.iitd-cta:hover { filter: brightness(1.1); color: var(--on-brand) !important; }
.iitd-cta:disabled, .iitd-cta.disabled { filter: grayscale(.4); opacity: .65; cursor: not-allowed; }
.iitd-cta-sm, button.iitd-cta-sm { display: inline-flex; width: auto; padding: 10px 22px !important; font-size: var(--fs-body); border-radius: var(--radius) !important; }

/* Secondary, quieter action */
.iitd-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface); color: var(--brand-dark);
    border: 1.5px solid var(--brand-line); border-radius: var(--radius);
    padding: 10px 20px; font-size: var(--fs-body); font-weight: 600; text-decoration: none;
}
.iitd-btn-ghost:hover { background: var(--brand-soft); color: var(--brand-deep); }

/* ---------------------------------------------------------------------------
   10. Aside — important dates and the "who can apply" block
   ------------------------------------------------------------------------- */
.iitd-aside { position: sticky; top: 18px; }
@media (max-width: 991px) { .iitd-aside { position: static; } }

.iitd-aside-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    margin-bottom: 20px;
}
.iitd-aside-head { background: var(--brand-gradient); color: var(--on-brand); padding: 18px 22px; }
.iitd-aside-head .iitd-eyebrow { font-size: 10.5px; margin: 0 0 4px; color: var(--on-brand-soft); text-shadow: none; }
.iitd-aside-head h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); margin: 0; color: var(--on-brand); line-height: 1.3; }
.iitd-aside-head .iitd-adv { font-size: var(--fs-xs); color: var(--on-brand-soft); margin-top: 6px; }
.iitd-aside-head .iitd-adv a { color: var(--on-brand); text-decoration: underline; }

/* Date rows. Border sits on the leading edge so RTL mirrors cleanly. */
.iitd-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-bottom: 1px solid var(--line); }
.iitd-date { padding: 12px 22px; }
.iitd-date + .iitd-date { border-inline-start: 1px solid var(--line); }
.iitd-date small {
    display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-mute); margin-bottom: 2px;
}
.iitd-date b { font-size: 13.5px; color: var(--ink); font-variant-numeric: tabular-nums; }

.iitd-aside-body { padding: 18px 22px 22px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; }
.iitd-aside-body h1, .iitd-aside-body h2, .iitd-aside-body h3,
.iitd-aside-body h4, .iitd-aside-body h5 {
    font-family: var(--font-display); color: var(--brand-dark); font-size: 15px; margin: 14px 0 6px;
}
.iitd-aside-body ul { padding-inline-start: 18px; margin-bottom: 10px; }
.iitd-aside-body a { color: var(--brand); }
.iitd-aside-body img { max-width: 100%; height: auto; }
.iitd-aside-body table { max-width: 100%; }

/* Time-zone footnote under the dates */
.iitd-tz {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--brand-dark);
    background: var(--brand-soft); padding: 9px 22px;
}

/* Download button for the brochure */
.iitd-aside-cta { padding: 0 22px 20px; }

/* ---------------------------------------------------------------------------
   11. Closing band and footer
   ------------------------------------------------------------------------- */
.iitd-band { background: var(--brand-gradient-wide); color: var(--on-brand); text-align: center; padding: 46px 22px; }
.iitd-band h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3.4vw, 30px); margin: 0 0 6px; color: var(--on-brand); }
.iitd-band p { color: var(--on-brand-soft); font-size: var(--fs-body); margin: 0 0 8px; }
.iitd-band h3 { font-size: var(--fs-h4); letter-spacing: .12em; color: var(--on-brand); margin: 0; font-weight: 600; }

.iitd-foot { background: #232a35; color: #c3cad6; text-align: center; font-size: 12.5px; padding: 14px 22px; }
.iitd-foot a { color: #e6ebf2; text-decoration: none; }
.iitd-foot a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   12. Modal
   ------------------------------------------------------------------------- */
.iitd-modal .modal-content { border: none; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-modal); white-space: initial; text-align: start; }
.iitd-modal .modal-header { background: var(--brand-gradient); color: var(--on-brand); border: none; padding: 16px 22px; }
.iitd-modal .modal-title { color: var(--on-brand) !important; font-weight: 700; }
.iitd-modal .modal-body { padding: 20px 24px 6px; }
.iitd-modal-lead { font-size: var(--fs-body); font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.iitd-modal-list { list-style: none; margin: 0 0 14px; padding: 0; }
.iitd-modal-list li {
    display: flex; align-items: flex-start; gap: 11px;
    font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.55;
    padding: 8px 0; border-bottom: 1px solid var(--line);
}
.iitd-modal-list li:last-child { border-bottom: none; }
.iitd-modal-list li i { flex: 0 0 18px; margin-top: 2px; color: var(--brand); font-size: var(--fs-sm); }
.iitd-modal-ask { font-size: 13.5px; font-weight: 700; color: var(--brand-dark); margin: 0 0 6px; }
.iitd-modal .modal-footer .btn i { margin-inline-end: 6px; }

/* The dashboard template floats .btn-close outside the corner; pin it back
   inside the header row and recolour it for a dark header. */
.iitd-modal .modal-header .btn-close {
    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 !important;
    background-color: transparent !important;
    filter: none !important; box-shadow: none !important;
    width: 28px; height: 28px; padding: 0; border-radius: var(--radius-sm); opacity: .85;
    position: static !important; top: auto !important; right: auto !important;
    transform: none !important; margin: 0 0 0 auto !important;
}
.iitd-modal .modal-header .btn-close:hover { opacity: 1; background-color: rgba(255, 255, 255, .15) !important; }

/* ---------------------------------------------------------------------------
   13. Direction-specific art
       Logical properties handle layout mirroring on their own. Only gradients
       and the hero veil carry a real direction, so they are flipped here.
   ------------------------------------------------------------------------- */
[dir="rtl"] .iitd-hero::before { transform: scaleX(-1); }
[dir="rtl"] .iitd-band { background: linear-gradient(-120deg, var(--brand-deep), var(--brand) 70%, var(--brand-bright)); }
[dir="rtl"] .iitd-modal .modal-header .btn-close { margin: 0 auto 0 0 !important; }

/* Latin digits stay legible inside Arabic text for dates and reference numbers. */
[dir="rtl"] .iitd-date b,
[dir="rtl"] .iitd-chip { unicode-bidi: plaintext; }

/* ---------------------------------------------------------------------------
   14. Password panel — checklist, strength meter and generator

   Markup: resources/views/common/inc/password_rules.blade.php, included on
   every screen where an applicant sets a password.

   Lives here rather than in a portal skin because three different shells use
   it: the signed-in portal, the public application form, and the sign-in shell.
   The last of those (pages/auth.css) is deliberately self-contained and carries
   its own ramp, so the four strength colours are read from --pw-* tokens that
   each shell points at its own palette. Everything else below is shell-neutral.
   ------------------------------------------------------------------------- */
:root {
    --pw-weak:   var(--bad);
    --pw-fair:   var(--warn);
    --pw-good:   var(--brand);
    --pw-strong: var(--ok);
}

.pw-rules {
    margin-block: 14px 4px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2, #f7f9fc);
}

/* ── Folded form ────────────────────────────────────────────────────────
   On a long form the rules are one section among many, so they start closed
   and open when the applicant reaches the field. A <details>, so the keyboard
   and assistive tech get the disclosure for free.

   Closed, the summary still reports the tally, which is what makes folding
   defensible: progress is legible without opening anything. */
.pw-rules.is-foldable { padding: 0; }

.pw-summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    border-radius: var(--radius);
    user-select: none;
    list-style: none;                  /* Firefox marker */
}

.pw-summary::-webkit-details-marker { display: none; }   /* Safari marker */

.pw-summary:hover { color: var(--ink); }
.pw-summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.pw-summary-icon { font-size: 17px; color: var(--pw-good); }
.pw-summary-label { flex: 1 1 auto; min-width: 0; }

.pw-summary-count {
    flex: 0 0 auto;
    padding: 2px 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--line);
    border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
}

.pw-summary-count.is-ok { color: var(--ok); background: var(--ok-bg); }

.pw-summary-caret {
    flex: 0 0 auto;
    font-size: 19px;
    color: var(--ink-mute);
    transition: transform .18s ease;
}

.pw-rules[open] .pw-summary-caret { transform: rotate(180deg); }

/* The rule appears only once the panel is open, so a closed summary reads as a
   single quiet strip rather than a boxed heading. */
.pw-rules.is-foldable .pw-rules-body {
    padding: 2px 14px 14px;
    border-block-start: 1px solid var(--line);
    margin-block-start: 0;
}

/* With the heading visually hidden the generator is the only thing left on the
   row, and space-between would park it on the leading edge. */
.pw-rules.is-foldable .pw-rules-head { justify-content: flex-end; }

/* Visually hidden, still read aloud. The folded summary already names the
   panel, so the heading inside it would be said twice. */
.pw-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Strength meter ─────────────────────────────────────────────────────── */
.pw-meter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block-end: 12px;
}

.pw-meter-track {
    flex: 1 1 auto;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--line);
    overflow: hidden;
}

.pw-meter-bar {
    width: 0;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--pw-weak);
    transition: width .18s ease, background-color .18s ease;
}

.pw-meter-text {
    flex: 0 0 auto;
    min-width: 5.5em;
    text-align: end;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-mute);
}

/* ── Heading row, with the generator ────────────────────────────────────── */
.pw-rules-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-block-end: 8px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-soft);
}

/* Its own button rather than a .btn, because this partial is rendered inside
   three shells whose .btn means three different things. */
.pw-suggest {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    color: var(--pw-good);
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.pw-suggest:hover,
.pw-suggest:focus-visible {
    color: var(--surface);
    background: var(--pw-good);
}

/* ── The rules themselves ───────────────────────────────────────────────── */
.pw-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 4px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pw-checklist li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-sm);
    line-height: 1.7;
    /* --ink-mute would be the natural "not yet" grey, but it lands at 3.6:1 on
       this panel and these lines have to be read, not skimmed. The unmet state
       is carried by the icon and by the absence of weight instead. */
    color: var(--ink-soft);
    transition: color .15s ease;
}

.pw-checklist li:not(.is-ok) i { color: var(--ink-mute); }

.pw-checklist li i {
    flex: 0 0 auto;
    font-size: 15px;
}

/* A met rule changes its icon as well as its colour, so the state survives a
   reader who cannot separate green from grey. */
.pw-checklist li.is-ok {
    color: var(--ok);
    font-weight: 600;
}

/* Sits under the checklist and explains the disabled button above which it is
   the only clue. Separated by a rule so it reads as a footnote to the rules
   rather than a seventh rule. */
.pw-hint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-block: 12px 0;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--line);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--ink-soft);
}

.pw-hint i {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1.4;
}

/* ── Action row ─────────────────────────────────────────────────────────
   The buttons under a password form. Without this the two sit on a single
   text line separated by nothing but the whitespace between the tags. */
.pw-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-block-start: 18px;
}

/* Full width when they would otherwise wrap into a ragged second line. */
@media (max-width: 400px) {
    .pw-actions { flex-direction: column; align-items: stretch; }
    .pw-actions > .btn { width: 100%; }
}

/* Field-level error text, for the forms that show one under the box. */
.pw-error {
    margin-block-start: 5px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--bad);
}

@media (max-width: 575.98px) {
    .pw-checklist { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   15. Print — drop the chrome, keep the content
   ------------------------------------------------------------------------- */
@media print {
    .iitd-topbar, .iitd-hero, .iitd-band, .iitd-foot, .iitd-cta, .iitd-pill { display: none !important; }
    .iitd-main { margin: 0; max-width: none; }
    .iitd-grid { grid-template-columns: 1fr; }
    .iitd-card, .iitd-aside-card { box-shadow: none; border: 1px solid #ccc; }
}