/* ==========================================================================
   AIU brand theme
   Crimson and navy are sampled from the university logo. They are used as
   accents on soft neutral surfaces rather than large saturated fills, so the
   interface stays low contrast and comfortable for long finance sessions.
   Both pass WCAG AA on the page background; navy reaches AAA.
   ========================================================================== */

:root {
    /* Brand, straight from the logo */
    --aiu-crimson: #ca2126;
    --aiu-crimson-dark: #a81a1f;
    --aiu-crimson-light: #e04a4f;
    --aiu-navy: #28256c;
    --aiu-navy-dark: #1c1a4e;
    --aiu-navy-light: #3d3a8f;

    /* Tinted neutrals: warm-cool greys pulled toward the brand hues so the
       page reads as one family rather than brand colour dropped on stock grey. */
    --aiu-ink: #1f2033;
    --aiu-body: #4a4b61;
    --aiu-muted: #74758c;
    --aiu-line: #e3e3ec;
    --aiu-line-soft: #eeeef4;
    --aiu-surface: #ffffff;
    --aiu-surface-alt: #f7f7fb;
    --aiu-canvas: #f2f2f7;

    /* Semantic states, desaturated to sit beside the brand without shouting */
    --aiu-success: #1f7a4d;
    --aiu-success-bg: #e8f4ee;
    --aiu-warning: #8a6100;
    --aiu-warning-bg: #fdf3e0;
    --aiu-danger: #b3261e;
    --aiu-danger-bg: #fbeceb;
    --aiu-info: #1c5f8a;
    --aiu-info-bg: #e9f2f8;

    /* Sidebar width: the default, and the bounds the drag handle honours.
       Kept here so CSS and portal.js agree on one source of truth. */
    --aiu-sidebar-width: 250px;
    --aiu-sidebar-min: 180px;
    --aiu-sidebar-max: 460px;

    --aiu-radius: 12px;
    --aiu-radius-sm: 8px;
    --aiu-shadow: 0 1px 2px rgba(31, 32, 51, .06), 0 4px 16px rgba(31, 32, 51, .05);
    --aiu-shadow-lg: 0 2px 6px rgba(31, 32, 51, .08), 0 12px 32px rgba(31, 32, 51, .10);

    /* Bootstrap overrides so stock components inherit the brand */
    --bs-primary: #28256c;
    --bs-primary-rgb: 40, 37, 108;
    --bs-link-color: #28256c;
    --bs-link-hover-color: #1c1a4e;
    --bs-border-color: #e3e3ec;
    --bs-body-color: #4a4b61;
    --bs-heading-color: #1f2033;
}

html, body {
    background-color: var(--aiu-canvas);
    color: var(--aiu-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--aiu-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

a {
    color: var(--aiu-navy);
    text-underline-offset: 2px;
}

a:hover {
    color: var(--aiu-navy-dark);
}

/* --------------------------------------------------------------------------
   Sidebar: deep navy with a crimson edge, echoing the campus buildings
   -------------------------------------------------------------------------- */

.sidebar {
    background: linear-gradient(180deg, var(--aiu-navy) 0%, var(--aiu-navy-dark) 100%);
    border-inline-end: 3px solid var(--aiu-crimson);
}

/* Set on <body> for the duration of a drag: without it the pointer selects
   text across the page and the cursor flickers off the handle. */
body.aiu-sidebar-resizing {
    cursor: col-resize;
    user-select: none;
}

body.aiu-sidebar-resizing .sidebar,
body.aiu-sidebar-resizing .sidebar .nav-link {
    transition: none;
}

.sidebar .top-row {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    min-height: 4.5rem;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .9375rem;
    font-weight: 600;
    color: #fff;
    padding-block: .5rem;
    /* The sidebar is a fixed 250px; let the label wrap instead of being cut off. */
    white-space: normal;
    line-height: 1.25;
    min-width: 0;
}

.navbar-brand img {
    height: 28px;
    width: auto;
    flex-shrink: 0;
    /* The mark is crimson on transparent; on navy it needs no treatment. */
}

.sidebar .container-fluid {
    padding-inline: .75rem;
}

.sidebar .nav-link {
    color: rgba(255, 255, 255, .78);
    border-radius: var(--aiu-radius-sm);
    margin-inline: .5rem;
    padding-inline: .75rem;
    font-size: .9375rem;
    transition: background-color .15s ease, color .15s ease;
    /* Long entries such as "Payment types and clauses" wrap onto a second
       line rather than overflowing a narrow sidebar. */
    white-space: normal;
    overflow-wrap: break-word;
    min-width: 0;
}

/* Keep the icon on the first line of a label that wraps. */
.sidebar .nav-link .bi {
    align-self: flex-start;
    margin-top: .1rem;
}

.sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, .10);
    color: #fff;
}

.sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, .16);
    color: #fff;
    font-weight: 600;
    /* Crimson marker on the inline edge, so it mirrors in Arabic. */
    box-shadow: inset 3px 0 0 var(--aiu-crimson);
}

[dir="rtl"] .sidebar .nav-link.active {
    box-shadow: inset -3px 0 0 var(--aiu-crimson);
}

.nav-section-label {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .45);
}

.culture-selector {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .22);
}

.culture-selector:hover {
    background-color: rgba(255, 255, 255, .12);
}

/* --------------------------------------------------------------------------
   Top bar and page surface
   -------------------------------------------------------------------------- */

.page > main > .top-row {
    background-color: var(--aiu-surface);
    border-bottom: 1px solid var(--aiu-line);
    height: 3.75rem;
}

.page > main > article {
    padding: 1.75rem 1.5rem 3rem;
}

/* --------------------------------------------------------------------------
   Cards and statistics
   -------------------------------------------------------------------------- */

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

.card-body {
    padding: 1.25rem;
}

/* Dashboard tiles: a thin crimson keyline on the top edge ties them together
   without filling a large area with saturated colour. */
.stat-card {
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--aiu-navy), var(--aiu-crimson));
}

.stat-label {
    font-size: .8125rem;
    color: var(--aiu-muted);
    font-weight: 500;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 650;
    color: var(--aiu-ink);
    line-height: 1.3;
    margin-top: .25rem;
}

.stat-value.is-due {
    color: var(--aiu-crimson);
}

.stat-value.is-clear {
    color: var(--aiu-success);
}

/* Owed but past its payment window: grey rather than crimson, because there is
   nothing the student can do about it here and red would urge them to try. */
.stat-value.is-lapsed {
    color: var(--aiu-muted);
}

/* The share of the outstanding figure that has lapsed, when only part has. Set
   in grey under the crimson headline so it reads as set aside, not as a second
   amount due. */
.tile-lapsed-note {
    color: var(--aiu-muted);
}

/* The payment window on a charge row: three dates that have to read as one
   unit, stacked so the eye takes the whole window in rather than scanning a
   run-on line. The due date is the only one set in ink — it is what the student
   is asked to meet and what a late fine hangs off, and emphasising all three
   would emphasise none of them. */
.charge-window {
    line-height: 1.5;
}

.charge-window > span {
    display: block;
}

.charge-window .window-bound {
    font-size: .78rem;
    color: var(--aiu-muted);
}

.charge-window .window-due {
    font-weight: 650;
    color: var(--aiu-ink);
}

.charge-window .window-due.is-late {
    color: var(--aiu-crimson);
}

.charge-window .window-countdown {
    font-size: .78rem;
    color: var(--aiu-muted);
}

/* The installment call-to-action sits in the charge's description cell. Its label
   is a whole sentence, so the button is allowed to wrap rather than stay on one
   nowrap line that would stretch the column and push the table off a narrow
   screen. Capped in width so the description stays the column's driver, and the
   help text beneath it wraps with it. */
.installment-cta {
    max-width: 15rem;
}

.installment-cta .btn {
    white-space: normal;
    text-align: start;
}

/* A charge past its end date: still owed and still listed, but closed to
   payment here, so the whole row is greyed rather than left looking like
   something waiting on the student. Set through Bootstrap's table variables
   so hover and the card layout below keep working. The due date and its
   lateness colour go grey with it — a crimson deadline on a row that cannot
   be paid would be urging an action that is not on offer. */
.dues-table tr.charge-expired {
    --bs-table-bg-type: var(--bs-secondary-bg);
    --bs-table-color-type: var(--bs-secondary-color);
}

.dues-table tr.charge-expired .window-due,
.dues-table tr.charge-expired .window-due.is-late,
.dues-table tr.charge-expired .text-danger {
    color: inherit !important;
}

.dues-table tr.charge-expired .badge:not(.bg-secondary) {
    filter: grayscale(1);
}

/* The student's dues table. Six columns cannot fit a phone, and scrolling the
   table sideways hides the pay button — the one thing the student came for —
   off the edge of the screen. So where the table's own box is narrow, each
   charge becomes a card: description across the top, the term beside the
   payment window, the amount beside the balance, and the status and its
   buttons across the bottom. A container query rather than a media query,
   because the sidebar takes a share of the width on tablets and the viewport
   alone says nothing about the room the table actually has. */
.dues-wrap {
    container-type: inline-size;
}

@container (max-width: 760px) {
    .dues-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .dues-table,
    .dues-table tbody {
        display: block;
    }

    /* The purpose heading: name and balance share a line, the invoice link
       and the purpose-wide pay button drop beneath them. */
    .dues-table tr.table-light {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background-color: var(--bs-table-bg);
    }

    .dues-table tr.table-light > th {
        border-bottom: 0;
        text-align: start !important;
    }

    .dues-table tr.table-light > .group-name {
        flex: 1 1 auto;
    }

    .dues-table tr.table-light > .group-spacer {
        display: none;
    }

    .dues-table tr.table-light > .group-actions {
        flex: 1 1 100%;
        padding-top: 0;
    }

    .dues-table tr.table-light > .group-actions:not(:has(*)) {
        display: none;
    }

    .dues-table tbody tr:not(.table-light) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "desc desc"
            "term window"
            "amount balance"
            "status status";
        column-gap: .75rem;
        padding-block: .5rem;
        border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    }

    .dues-table tbody tr:not(.table-light) > td {
        border-bottom: 0;
        padding-block: .25rem;
        text-align: start !important;
    }

    .dues-table .dues-desc { grid-area: desc; }
    .dues-table .dues-term { grid-area: term; }
    .dues-table .dues-window { grid-area: window; }
    .dues-table .dues-amount { grid-area: amount; }
    .dues-table .dues-balance { grid-area: balance; }
    .dues-table .dues-status { grid-area: status; }

    .dues-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .72rem;
        font-weight: 600;
        color: var(--aiu-muted);
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    /* The charge reference is one unbroken token; left alone it sets the
       card's minimum width and the card overflows the screen. */
    .dues-table .dues-desc .font-monospace {
        overflow-wrap: anywhere;
    }

    .dues-table .installment-cta {
        max-width: none;
    }

    /* Full-width buttons: easier to hit with a thumb, and the amount on
       them is the figure the student is deciding on. */
    .dues-table .dues-status .btn,
    .dues-table .group-actions .btn-pay {
        width: 100%;
    }

    .dues-table .group-actions .btn-pay {
        margin-inline-start: 0 !important;
        margin-top: .375rem;
    }
}

/* The plan note on the outstanding tile. It explains the figure directly above
   it — that the balance is being paid in parts — so it is tinted rather than
   ruled off: a full alert box beside a stat value reads as a second warning,
   and the tile already carries one in the crimson figure. The inline start
   border ties it to the number it qualifies and flips with the writing
   direction, which matters on the Arabic side of the portal. */
.tile-plan-note {
    padding: .5rem .625rem;
    border-radius: .375rem;
    border-inline-start: 3px solid var(--aiu-navy);
    background-color: rgba(13, 42, 92, .05);
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--aiu-ink);
}

/* The postponement note on the same tile: shaped like the plan note, since it
   too qualifies the figure above it, but in green — it is good news the student
   asked for, and has to read as such against the crimson balance. */
.tile-postpone-note {
    padding: .5rem .625rem;
    border-radius: .375rem;
    border-inline-start: 3px solid var(--aiu-success);
    background-color: var(--aiu-success-bg);
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--aiu-success);
}

/* The dashboard's payment-window panel: the same three dates as the table, at
   the size a summary deserves, so the student meets the deadline on the first
   screen they land on rather than only after opening their finances. */
.payment-window-panel .window-dates {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
}

.payment-window-panel .window-date-label {
    display: block;
    font-size: .75rem;
    color: var(--aiu-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.payment-window-panel .window-date-value {
    font-weight: 600;
    color: var(--aiu-ink);
}

.payment-window-panel .window-date-value.is-due {
    color: var(--aiu-crimson);
    font-weight: 700;
}

/* Grouping tiles: the same keyline as a stat card, since the two sit on one
   dashboard and should read as one family. A tile holds a heading and the links
   belonging to it, so it grows to its content rather than to a fixed figure. */
.group-tile {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.group-tile::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--aiu-navy), var(--aiu-crimson));
}

.group-tile-title {
    font-size: 1rem;
    font-weight: 650;
    color: var(--aiu-ink);
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* The icon is decoration beside a heading that already names the tile, so it is
   sized in step with the text rather than given a weight of its own. */
.group-tile-title .bi {
    color: var(--aiu-crimson);
    font-size: 1.125rem;
    line-height: 1;
}

.group-tile-note {
    font-size: .8125rem;
    color: var(--aiu-muted);
    margin: .25rem 0 .875rem;
}

.group-tile-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

/* Padded on the inline edges so the hover fill reads as a row rather than as a
   box drawn tight around the words. Logical properties throughout: the portal
   renders right to left in Arabic. */
.group-tile-links a {
    display: block;
    padding: .375rem .5rem;
    border-radius: calc(var(--aiu-radius) / 2);
    color: var(--aiu-body);
    text-decoration: none;
    font-size: .9375rem;
    transition: background-color .12s ease, color .12s ease;
}

.group-tile-links a:hover,
.group-tile-links a:focus-visible {
    background-color: var(--aiu-line-soft);
    color: var(--aiu-crimson);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table {
    --bs-table-color: var(--aiu-body);
    --bs-table-border-color: var(--aiu-line-soft);
    margin-bottom: 0;
}

.table > thead th {
    background-color: var(--aiu-surface-alt);
    color: var(--aiu-muted);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--aiu-line);
    padding-block: .75rem;
    white-space: nowrap;
}

.table > tbody td {
    padding-block: .8125rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--aiu-line-soft);
}

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

.table-hover > tbody > tr:hover > * {
    background-color: var(--aiu-surface-alt);
}

.table tfoot td {
    border-top: 1px solid var(--aiu-line);
    padding-block: .625rem;
}

/* Wrap tables in a card-like surface.

   Horizontal scroll is kept rather than clipped: a wide table on a narrow screen
   must be reachable by scrolling, not cut off at the edge. `overflow: hidden`
   here — used once to clip the rounded corners — instead defeated Bootstrap's own
   overflow-x:auto and trimmed the last columns on mobile with no way to reach
   them. The rounding still holds because the radius clips the corners on its own. */
.table-responsive {
    background-color: var(--aiu-surface);
    border: 1px solid var(--aiu-line);
    border-radius: var(--aiu-radius);
    overflow-x: auto;
    overflow-y: hidden;
}

/* A table given a height cap scrolls inside it. Hidden above, the rows past
   the cap were cut off with no way to reach them, as on the fee calculator's
   charge preview. */
.table-responsive[style*="max-height"] {
    overflow-y: auto;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    border-radius: var(--aiu-radius-sm);
    font-weight: 500;
    padding: .5rem 1rem;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn:focus-visible {
    outline: 2px solid var(--aiu-navy-light);
    outline-offset: 2px;
    box-shadow: none;
}

.btn-primary {
    background-color: var(--aiu-navy);
    border-color: var(--aiu-navy);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--aiu-navy-dark);
    border-color: var(--aiu-navy-dark);
    color: #fff;
}

.btn-primary:disabled {
    background-color: var(--aiu-navy);
    border-color: var(--aiu-navy);
    opacity: .55;
}

/* Crimson is reserved for the money action, so "pay" reads as the one
   decisive control on the page. */
.btn-pay {
    background-color: var(--aiu-crimson);
    border-color: var(--aiu-crimson);
    color: #fff;
}

.btn-pay:hover,
.btn-pay:focus {
    background-color: var(--aiu-crimson-dark);
    border-color: var(--aiu-crimson-dark);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--aiu-body);
    border-color: var(--aiu-line);
    background-color: var(--aiu-surface);
}

.btn-outline-secondary:hover {
    background-color: var(--aiu-surface-alt);
    border-color: var(--aiu-muted);
    color: var(--aiu-ink);
}

/* --------------------------------------------------------------------------
   Badges: tinted backgrounds rather than solid fills, to keep contrast low
   -------------------------------------------------------------------------- */

.badge {
    font-weight: 600;
    font-size: .75rem;
    padding: .375em .7em;
    border-radius: 999px;
    letter-spacing: .01em;
}

.badge.bg-success {
    background-color: var(--aiu-success-bg) !important;
    color: var(--aiu-success) !important;
}

.badge.bg-danger {
    background-color: var(--aiu-danger-bg) !important;
    color: var(--aiu-danger) !important;
}

.badge.bg-warning {
    background-color: var(--aiu-warning-bg) !important;
    color: var(--aiu-warning) !important;
}

.badge.bg-info {
    background-color: var(--aiu-info-bg) !important;
    color: var(--aiu-info) !important;
}

.badge.bg-primary {
    background-color: #e9e9f2 !important;
    color: var(--aiu-navy) !important;
}

.badge.bg-secondary {
    background-color: var(--aiu-line-soft) !important;
    color: var(--aiu-muted) !important;
}

.badge.bg-light {
    background-color: var(--aiu-line-soft) !important;
    color: var(--aiu-body) !important;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-control,
.form-select {
    border-color: var(--aiu-line);
    border-radius: var(--aiu-radius-sm);
    color: var(--aiu-ink);
    padding: .5rem .75rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--aiu-navy-light);
    box-shadow: 0 0 0 3px rgba(40, 37, 108, .12);
}

.form-label {
    font-size: .875rem;
    font-weight: 500;
    color: var(--aiu-body);
    margin-bottom: .375rem;
}

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

.form-check-input:focus {
    border-color: var(--aiu-navy-light);
    box-shadow: 0 0 0 3px rgba(40, 37, 108, .12);
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */

.alert {
    border-radius: var(--aiu-radius);
    border-width: 1px;
    padding: .875rem 1rem;
}

.alert-success {
    background-color: var(--aiu-success-bg);
    border-color: #c9e4d7;
    color: #145736;
}

.alert-danger {
    background-color: var(--aiu-danger-bg);
    border-color: #f0cdcb;
    color: #8c1d17;
}

.alert-warning {
    background-color: var(--aiu-warning-bg);
    border-color: #f0dcb4;
    color: #6b4b00;
}

.alert-info {
    background-color: var(--aiu-info-bg);
    border-color: #c8deeb;
    color: #14486a;
}

.alert-secondary {
    background-color: var(--aiu-surface-alt);
    border-color: var(--aiu-line);
    color: var(--aiu-body);
}

/* --------------------------------------------------------------------------
   Account pages: their own minimal chrome, no portal navigation
   -------------------------------------------------------------------------- */

.aiu-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--aiu-canvas);
}

.aiu-auth-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 1.5rem;
    background: linear-gradient(90deg, var(--aiu-navy) 0%, var(--aiu-navy-dark) 100%);
    border-bottom: 3px solid var(--aiu-crimson);
}

.aiu-auth-home {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    color: #fff;
    font-weight: 600;
    font-size: .9375rem;
    text-decoration: none;
}

.aiu-auth-home:hover {
    color: #fff;
    opacity: .9;
}

.aiu-auth-home img {
    height: 26px;
    width: auto;
}

.aiu-auth-culture {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: rgba(255, 255, 255, .85);
    font-size: .875rem;
    text-decoration: none;
    padding: .375rem .75rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--aiu-radius-sm);
}

.aiu-auth-culture:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .12);
}

/* Inside the account shell the hero fills what is left of the viewport. */
.aiu-auth .aiu-hero {
    flex: 1;
    margin: 0;
    min-height: 0;
}

/* --------------------------------------------------------------------------
   Brand hero, used on the signed-out landing and the account pages
   -------------------------------------------------------------------------- */

.aiu-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    background-image: url("../img/aiu/bg-campus-wide.jpg");
    background-size: cover;
    background-position: center;

    /* The page article has its own gutters; cancel them so the photograph
       reaches the edges of the content area rather than floating in a box. */
    margin: -1.75rem -1.5rem -3rem;
    min-height: calc(100vh - 3.75rem);
}

@media (min-width: 641px) {
    .aiu-hero {
        margin-inline: -2rem -1.5rem;
    }
}

/* A navy veil keeps the photograph from fighting the card for attention and
   guarantees the text on top stays readable whatever the image does. */
.aiu-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(28, 26, 78, .92) 0%, rgba(40, 37, 108, .86) 45%, rgba(168, 26, 31, .78) 100%);
}

.aiu-hero > * {
    position: relative;
}

.aiu-hero-card {
    width: 100%;
    max-width: 26rem;
    background-color: var(--aiu-surface);
    border-radius: 16px;
    box-shadow: var(--aiu-shadow-lg);
    padding: 2rem;
}

.aiu-hero-logo {
    display: block;
    width: 100%;
    max-width: 15rem;
    height: auto;
    margin: 0 auto 1.5rem;
}

.aiu-hero-title {
    text-align: center;
    font-size: 1.125rem;
    color: var(--aiu-ink);
    margin-bottom: .25rem;
}

.aiu-hero-subtitle {
    text-align: center;
    font-size: .875rem;
    color: var(--aiu-muted);
    margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Invoice and payment detail surfaces
   -------------------------------------------------------------------------- */

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: .5rem;
}

.summary-row + .summary-row {
    border-top: 1px solid var(--aiu-line-soft);
}

.summary-row.is-total {
    border-top: 2px solid var(--aiu-line);
    margin-top: .25rem;
    padding-top: .75rem;
    font-weight: 650;
    color: var(--aiu-ink);
}

.summary-label {
    color: var(--aiu-muted);
}

/* --------------------------------------------------------------------------
   Bidirectional text
   -------------------------------------------------------------------------- */

/* Arabic needs a little more leading and a stack with real Arabic coverage. */
.portal-rtl {
    font-family: "Segoe UI", "Noto Naskh Arabic", "Tahoma", Arial, sans-serif;
    line-height: 1.8;
}

/* References, card numbers and amounts stay left to right in both languages,
   matching how they are printed on bank documents. */
/* Identifiers that are not monospaced but still must not be reordered in
   Arabic, e.g. the academic term code "2026-FALL". */
.code-text {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

.font-monospace,
.numeral {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
    direction: ltr;
    unicode-bidi: isolate;
}

/* --------------------------------------------------------------------------
   Print: receipts and invoices go to paper often, so make them behave
   -------------------------------------------------------------------------- */

@media print {
    .sidebar,
    .page > main > .top-row,
    .btn,
    .culture-selector {
        display: none !important;
    }

    .page > main > article {
        padding: 0 !important;
    }

    body {
        background: #fff;
    }

    .card,
    .table-responsive {
        border: 1px solid #ccc;
        box-shadow: none;
        break-inside: avoid;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ---------------------------------------------------------------------------
   Academic calendar
   One tone per category group, so "exams" or "holidays" read at a glance on
   the month grid, in the legend and in lists. A top-priority entry is drawn
   solid in its tone rather than tinted: it is the one a student must not miss.
   ------------------------------------------------------------------------- */
.cal-tone-term { --cal-fg: var(--aiu-navy); --cal-bg: #ebeaf6; }
.cal-tone-registration { --cal-fg: var(--aiu-info); --cal-bg: var(--aiu-info-bg); }
.cal-tone-exam { --cal-fg: var(--aiu-danger); --cal-bg: var(--aiu-danger-bg); }
.cal-tone-break { --cal-fg: var(--aiu-success); --cal-bg: var(--aiu-success-bg); }
.cal-tone-finance { --cal-fg: var(--aiu-warning); --cal-bg: var(--aiu-warning-bg); }
.cal-tone-milestone { --cal-fg: #6b3fa0; --cal-bg: #f2ecf9; }
.cal-tone-other { --cal-fg: var(--aiu-muted); --cal-bg: #f0f0f5; }

/* The tone classes only define colours; chips and badges are what paint with
   them, so a list row can carry a tone for its bar without being tinted. */
.cal-chip[class*="cal-tone-"],
.cal-badge[class*="cal-tone-"],
.cal-badge-block[class*="cal-tone-"] {
    color: var(--cal-fg);
    background-color: var(--cal-bg);
}

.cal-chip[class*="cal-tone-"].is-key,
.cal-badge[class*="cal-tone-"].is-key {
    color: #fff;
    background-color: var(--cal-fg);
}

.cal-swatch {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 3px;
    vertical-align: -.05rem;
    background-color: var(--cal-fg);
}

.cal-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.cal-filter {
    border: 1px solid var(--aiu-line);
    background: var(--aiu-surface);
    color: var(--aiu-body);
    border-radius: 999px;
    padding: .2rem .65rem;
    font-size: .8rem;
}

.cal-filter.is-off {
    opacity: .45;
    text-decoration: line-through;
}

.cal-entry {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .6rem .25rem;
    border-top: 1px solid var(--aiu-line-soft);
}

.cal-entry:first-child {
    border-top: 0;
}

.cal-entry-bar {
    flex: none;
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    background-color: var(--cal-fg);
}

.cal-entry.is-key {
    background: linear-gradient(90deg, var(--cal-bg), transparent 70%);
    border-radius: var(--aiu-radius-sm);
}

[dir="rtl"] .cal-entry.is-key {
    background: linear-gradient(270deg, var(--cal-bg), transparent 70%);
}

.priority-meter {
    display: inline-flex;
    gap: 2px;
    vertical-align: middle;
}

.priority-pip {
    width: 6px;
    height: 10px;
    border-radius: 2px;
    background: var(--aiu-line);
}

.priority-pip.is-on {
    background: var(--aiu-navy-light);
}

.priority-meter.is-top .priority-pip.is-on {
    background: var(--aiu-crimson);
}

.priority-picker .btn {
    min-width: 2.5rem;
}

/* The dashboard's important dates: highlighted because priority 5 is exactly
   what the university decided a student must see without going looking. */
.key-dates-panel {
    border: 1px solid #f1c9cb;
    border-inline-start: 4px solid var(--aiu-crimson);
    background: linear-gradient(180deg, #fff7f7, var(--aiu-surface) 60%);
}

.key-date {
    display: flex;
    gap: .85rem;
    align-items: center;
    padding: .55rem 0;
    border-top: 1px solid var(--aiu-line-soft);
}

.key-date:first-child {
    border-top: 0;
}

.key-date-day {
    flex: none;
    width: 3.25rem;
    text-align: center;
    border-radius: var(--aiu-radius-sm);
    padding: .25rem 0;
    line-height: 1.1;
}

.key-date-day .num {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.key-date-day .mon {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
}

.min-w-0 {
    min-width: 0;
}