/* ==========================================================================
   Hadhramout Bank — outward transfer requests platform

   A self-contained design system taken from the approved HTML prototype: the
   same variables, proportions and components, with no UI framework underneath.
   Every control in Components/Ui is styled here.

   The typeface and the gradients are the bank's own, read off its public
   account-opening site (hb-services.services). Tajawal is served from this
   host rather than a font CDN: the platform is on-premise and its policy
   admits no external origin, so a hosted font would simply not load.
   ========================================================================== */

/* Tajawal — SIL Open Font License 1.1. Arabic and Latin cuts, three weights. */
@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/tajawal-400-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}

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

@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/tajawal-500-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}

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

@font-face {
    font-family: "Tajawal";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/tajawal-700-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}

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

:root {
    --navy: #1B3A6B;
    --navy2: #214488;
    --navy-dark: #16305A;
    --gold: #C0900A;
    --goldsoft: #F4E9C9;
    --ink: #16202E;
    --ink2: #4A5567;
    --line: #DDE3EC;
    --bg: #F3F5F9;
    --card: #FFF;
    --green: #0F6B52;
    --greenbg: #E8F4EF;
    --amber: #8A5A00;
    --amberbg: #FDF3E0;
    --red: #A2291F;
    --redbg: #FBEBE9;
    --slate: #54607A;
    --slatebg: #ECEFF5;
    --field: #CCD4E0;
    --r: 6px;

    /* The bank's public identity, used where the platform faces outward: the sign-in page. The
       working screens keep the flatter prototype palette above, which is what was approved and
       what reads best over a long shift. */
    --brand-deep: #003D7A;
    --brand-light: #00589E;
    --brand-gold: #D4AF37;
    --brand-gold-dark: #C9A332;
    --brand-gradient: linear-gradient(135deg, #003D7A 0%, #00589E 100%);
    --brand-gold-gradient: linear-gradient(135deg, #D4AF37 0%, #C9A332 100%);
    --brand-shadow: 0 10px 30px rgba(0, 61, 122, .12);
    --font: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
}

button {
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

input, select, textarea {
    font-family: inherit;
    font-size: 14px;
}

a {
    color: var(--navy2);
}

h1 {
    font-size: 21px;
    margin: 0 0 4px;
}

.muted { color: var(--ink2); }
.small { font-size: 12.5px; }
.grow  { flex: 1; }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   Shell
   ========================================================================== */

.hdb-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* The gold rule under the header is the bank's signature on every screen. */
.hdb-header {
    background: #fff;
    border-bottom: 3px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    height: 70px;
    gap: 14px;
}

.hdb-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hdb-logo {
    flex: none;
    display: block;
    height: 44px;
    width: 44px;
    border-radius: 4px;
}

/* A rule separates the mark from the wordmark, as on the bank's stationery. */
.hdb-title {
    border-inline-start: 1px solid var(--line);
    padding-inline-start: 14px;
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
}

.hdb-title small {
    display: block;
    font-weight: 400;
    font-size: 11.5px;
    color: #7B8595;
}

.hdb-ornament {
    flex: 1;
    height: 40px;
    min-width: 30px;
    margin-inline: 16px;
    background: url("img/hdb-ornament.svg") no-repeat left center / auto 200%;
    opacity: .4;
}

.hdb-user {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--ink2);
    white-space: nowrap;
}

/* A button so it is reachable from the keyboard, but it must read as the signed-in identity
   rather than as another action beside the sign-out control. */
.hdb-user-id {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-align: start;
    line-height: 1.3;
    color: var(--navy);
    font-weight: 600;
}

.hdb-user-id:hover { text-decoration: underline; }

.hdb-user-id small {
    display: block;
    color: #7B8595;
    font-weight: 400;
    font-size: 11.5px;
}

/* ---- notification bell ---- */

.hdb-bell {
    position: relative;
    background: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 7px 12px;
    color: var(--navy);
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.hdb-bell:hover {
    background: #EEF2F8;
}

.hdb-bell .count {
    position: absolute;
    top: -7px;
    inset-inline-start: -7px;
    background: var(--gold);
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    padding: 0 5px;
    font-weight: 600;
}

/* ---- navigation ---- */

.hdb-nav {
    background: var(--navy);
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 0 22px;
    display: flex;
    gap: 2px;
    overflow-x: auto;
}

.hdb-nav a {
    color: #CFD8E6;
    text-decoration: none;
    font-size: 14px;
    padding: 12px 16px;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.hdb-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.hdb-nav a.on {
    color: #fff;
    font-weight: 600;
    border-bottom-color: var(--gold);
}

.hdb-main {
    flex: 1;
    padding: 22px 26px 60px;
    max-width: 1300px;
    width: 100%;
    margin-inline: auto;
}

.hdb-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 26px;
    color: #8A92A1;
    font-size: 12px;
}

.hdb-idle {
    background: #FBF6E7;
    border-block: 1px solid #ECDFBA;
    color: #6F5407;
    font-size: 12.5px;
    padding: 6px 20px;
    text-align: center;
}

/* ==========================================================================
   Page furniture
   ========================================================================== */

.hdb-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.hdb-page-head h1 {
    color: var(--ink);
}

/* FocusOnNavigate moves focus to the heading on every navigation so screen
   readers announce it. The heading is not interactive, so the ring is noise. */
.hdb-page-head h1:focus {
    outline: none;
}

.sub {
    color: var(--ink2);
    font-size: 13px;
    margin: 0;
}

.row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

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

.grid {
    display: grid;
    gap: 14px;
}

.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
    .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
}

.scroll-x {
    overflow-x: auto;
}

/* A field that needs the width of two, in any of the column grids above. */
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

/* Lines a control up with the bottom of the labelled fields beside it. */
.align-end { align-self: end; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 12px; }
.mb-3 { margin-bottom: 18px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 18px; }

/* ==========================================================================
   Card
   ========================================================================== */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 16px;
}

.sec-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
    margin: 0 0 10px;
}

/* ==========================================================================
   KPI tiles
   ========================================================================== */

.kpi .n {
    font-size: 28px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
}

.kpi .l {
    font-size: 12.5px;
    color: var(--ink2);
}

.kpi.warn .n { color: var(--red); }
.kpi.good .n { color: var(--green); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    /* The anchor form of a button must not carry a link underline. */
    text-decoration: none;
    border: 1px solid var(--navy);
    background: var(--navy);
    color: #fff;
    border-radius: 5px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1.4;
    transition: background .15s, border-color .15s;
}

.btn:hover:not(:disabled) { background: var(--navy-dark); }

.btn.ghost {
    background: #fff;
    color: var(--navy);
}

.btn.ghost:hover:not(:disabled) { background: #EEF2F8; }

.btn.gold {
    background: var(--gold);
    border-color: var(--gold);
}

.btn.gold:hover:not(:disabled) { background: #A87D08; }

/* A returning or destructive action is outlined in red, never filled: it should
   read as deliberate, not as the obvious next step. */
.btn.danger {
    background: #fff;
    border-color: #D9B3AF;
    color: var(--red);
}

.btn.danger:hover:not(:disabled) { background: var(--redbg); }

.btn.link {
    background: none;
    border-color: transparent;
    color: var(--navy);
    padding: 6px 8px;
}

.btn.link:hover:not(:disabled) {
    background: #EEF2F8;
}

.btn.link.danger { color: var(--red); }
.btn.link.danger:hover:not(:disabled) { background: var(--redbg); }

.btn:disabled {
    background: #E9ECF2;
    border-color: #E2E6EE;
    color: #A4AAB7;
    cursor: not-allowed;
}

.btn.sm {
    padding: 5px 11px;
    font-size: 12.5px;
}

.btn.block {
    width: 100%;
    justify-content: center;
}

.btn .ico {
    font-size: 15px;
    line-height: 1;
}

/* ==========================================================================
   Chips
   ========================================================================== */

.chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 12px;
    white-space: nowrap;
    background: var(--slatebg);
    color: var(--slate);
}

.chip.amber  { background: var(--amberbg); color: var(--amber); }
.chip.green  { background: var(--greenbg); color: var(--green); }
.chip.red    { background: var(--redbg);   color: var(--red); }
.chip.slate  { background: var(--slatebg); color: var(--slate); }
.chip.navy   { background: #E7EDF7;        color: var(--navy); }

/* ==========================================================================
   Notes
   ========================================================================== */

.note {
    background: #EEF3FA;
    border: 1px solid #CFDCEE;
    color: var(--navy);
    border-radius: var(--r);
    padding: 10px 13px;
    font-size: 13px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.note .ico { flex: none; line-height: 1.4; }

.note.lock    { background: var(--amberbg); border-color: #F0DCB8; color: var(--amber); }
.note.bad     { background: var(--redbg);   border-color: #EECFCC; color: var(--red); }
.note.good    { background: var(--greenbg); border-color: #C5E2D6; color: var(--green); }

/* ==========================================================================
   Fieldsets — the prototype's most distinctive form element: a navy pill
   legend sitting on the top border of a white panel.
   ========================================================================== */

.fieldset {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 22px 16px 16px;
    margin: 0 0 24px;
    background: #fff;
    position: relative;
}

.fieldset > .legend {
    position: absolute;
    top: -13px;
    inset-inline-start: 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: var(--navy);
    padding: 4px 14px;
    border-radius: 4px;
}

/* ==========================================================================
   Form fields
   ========================================================================== */

.field {
    display: block;
    min-width: 0;
}

.field > label {
    display: block;
    font-size: 12.5px;
    color: var(--ink2);
    margin-bottom: 4px;
}

.field .req { color: var(--red); }

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--field);
    border-radius: 5px;
    background: #fff;
    color: var(--ink);
}

.field textarea { resize: vertical; min-height: 68px; }

/* A figure is written left to right whatever the page direction, so the box carries dir="ltr"
   and the digits would otherwise start at the far side from the label that names them. Aligning
   them to the reading edge puts the value where the eye already is, and lines a column of figures
   up on its units the way a ledger does. */
[dir="rtl"] .field input[inputmode],
[dir="rtl"] .datefield input {
    text-align: right;
}

[dir="ltr"] .field input[inputmode],
[dir="ltr"] .datefield input {
    text-align: left;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 2px solid #E6D6A2;
    border-color: var(--gold);
}

.field input:disabled,
.field select:disabled,
.field textarea:disabled,
.field input[readonly] {
    background: #F2F4F8;
    color: #7A8496;
    cursor: default;
}

.field.invalid input,
.field.invalid select,
.field.invalid textarea {
    border-color: var(--red);
    background: #FFF7F6;
}

.field .hint {
    font-size: 12px;
    color: #8A92A1;
    margin-top: 3px;
}

.field .msg {
    font-size: 12px;
    color: var(--red);
    margin-top: 3px;
}

/* An input with a trailing unit — days, MB, %.

   The unit sits beside the box rather than inside it. Overlaying it would have to guess both the
   unit's rendered width and which end of the box the value starts at: a numeric field reads left
   to right even on an Arabic page, so an "inside" unit lands on top of the figure. */
.field .with-affix {
    display: flex;
    align-items: center;
    gap: 8px;
}

.field .with-affix input {
    flex: 1;
    min-width: 0;
}

.field .affix {
    flex: none;
    font-size: 12.5px;
    color: var(--ink2);
    white-space: nowrap;
}

/* ==========================================================================
   Date field and calendar

   The platform draws its own calendar so the month names, the day names and the first day of the
   week come from the interface language rather than from the browser's locale.
   ========================================================================== */

.datefield {
    position: relative;
    display: flex;
    align-items: center;
}

/* A date reads left to right whatever the page direction, so its value always starts at the
   physical left. The buttons therefore sit at the physical right in both directions — a logical
   end would put them on top of the value on an Arabic page. */
.datefield input {
    padding-right: 62px;
}

.datefield .cal-open,
.datefield .cal-clear {
    position: absolute;
    background: none;
    border: none;
    padding: 4px 6px;
    line-height: 1;
    color: var(--ink2);
    font-size: 14px;
    border-radius: 4px;
}

.datefield .cal-open { right: 6px; }
.datefield .cal-clear { right: 32px; font-size: 12px; }

.datefield .cal-open:hover,
.datefield .cal-clear:hover { background: #EEF2F8; color: var(--navy); }

.datefield .cal-open:disabled { color: #B3B9C6; cursor: not-allowed; }

/* The sheet only has to catch a click; the popup above it stays interactive. */
.cal-sheet {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.cal {
    position: absolute;
    z-index: 41;
    margin-top: 4px;
    inset-inline-start: 0;
    width: 268px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: 0 6px 20px rgba(12, 28, 52, .16);
    padding: 10px;
}

.cal-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.cal-head > button {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 4px;
    padding: 3px 9px;
    color: var(--navy);
    line-height: 1.4;
}

.cal-head > button:hover { background: #EEF2F8; }

.cal-pick {
    flex: 1;
    display: flex;
    gap: 6px;
}

.cal-pick select {
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid var(--field);
    border-radius: 4px;
    background: #fff;
    font-size: 12.5px;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cal-dow span {
    text-align: center;
    font-size: 11px;
    color: #8A92A1;
    padding: 4px 0;
}

.cal-day {
    border: 1px solid transparent;
    background: none;
    border-radius: 4px;
    padding: 6px 0;
    font-size: 12.5px;
    color: var(--ink);
    text-align: center;
}

.cal-day:hover:not(:disabled) { background: #EEF2F8; }

/* Days spilling in from the neighbouring months stay visible but recede. */
.cal-day.out { color: #B3B9C6; }

.cal-day.today { border-color: var(--gold); font-weight: 600; }

.cal-day.on {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    font-weight: 600;
}

.cal-day.off {
    color: #CBD0DA;
    cursor: not-allowed;
    text-decoration: line-through;
}

.cal-foot {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.cal-foot button {
    flex: 1;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 4px;
    padding: 5px;
    font-size: 12.5px;
    color: var(--navy);
}

.cal-foot button:hover:not(:disabled) { background: #EEF2F8; }
.cal-foot button:disabled { color: #B3B9C6; cursor: not-allowed; }

/* The field owns the popup's coordinate space. */
.field { position: relative; }

/* Checkbox reads as a single control, not a stray box plus text. */
.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
}

.check input {
    width: 16px;
    height: 16px;
    accent-color: var(--navy);
    cursor: pointer;
    margin: 0;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.tw {
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    background: #fff;
}

table.data {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

/* The heading stays in view while the rows scroll under it. On a permission matrix or an audit
   trail that runs off the screen, a column you cannot name is a column you cannot read. */
table.data th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--navy);
    color: #fff;
    font-weight: 600;
    font-size: 12.5px;
    padding: 10px 12px;
    white-space: nowrap;
}

/* The scroll container must not clip the sticky heading out of existence. */
.tw .scroll {
    max-height: min(72vh, 900px);
    overflow: auto;
}

table.data td {
    padding: 10px 12px;
    border-bottom: 1px solid #EEF1F6;
    font-size: 13.5px;
    vertical-align: middle;
}

table.data tbody tr:last-child td { border-bottom: none; }

/* A request past its stage's agreed period. Marked by a band on the row's leading edge as well
   as a tinted ground, so it is not colour alone that carries it. */
table.data tr.overdue td:first-child {
    box-shadow: inset 4px 0 0 0 var(--red);
}

[dir="rtl"] table.data tr.overdue td:first-child {
    box-shadow: inset -4px 0 0 0 var(--red);
}

table.data tr.overdue td { background: #FEF8F7; }
table.data tr.overdue.click:hover td { background: #FCEFED; }

/* The possible-duplicate list inside its warning. */
.dup-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.dup-list li {
    padding: 6px 0;
    border-top: 1px solid rgba(162, 41, 31, .16);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
}

table.data tr.click { cursor: pointer; }
table.data tr.click:hover td { background: #F7F9FC; }

table.data th.sortable {
    cursor: pointer;
    user-select: none;
}

table.data th.sortable:hover { background: #254A80; }

table.data th .arrow {
    font-size: 10px;
    opacity: .85;
    margin-inline-start: 4px;
}

/* Alignment is pinned to the document's direction rather than written logically.

   A cell resolves its own direction (see `plaintext` below), so a digits-only cell — a count, an
   amount — reads left to right even on an Arabic page. Logical `start`/`end` would then resolve
   against the cell's own direction and align the figure to the opposite side from the Arabic
   heading above it. */
table.data th,
table.data td { text-align: right; }

table.data th.center,
table.data td.center { text-align: center; }

table.data th.end,
table.data td.end { text-align: left; }

[dir="ltr"] table.data th,
[dir="ltr"] table.data td { text-align: left; }

[dir="ltr"] table.data th.center,
[dir="ltr"] table.data td.center { text-align: center; }

[dir="ltr"] table.data th.end,
[dir="ltr"] table.data td.end { text-align: right; }

table.data .empty {
    text-align: center;
    padding: 26px 12px;
    color: var(--ink2);
    font-size: 13px;
}

table.data tfoot td {
    background: #F0F3F9;
    font-weight: 600;
    border-top: 1px solid var(--line);
}

/* Dates and reference numbers are digit runs joined by neutral characters
   ("2026/09/06", "TR-2026-0418"). In a right-to-left paragraph the bidi
   algorithm reorders those groups, so a date written yyyy/MM/dd displays as
   dd/MM/yyyy. `plaintext` takes each cell's direction from its own first strong
   character: Arabic text stays RTL, a digits-only cell renders as written. */
table.data td {
    unicode-bidi: plaintext;
}

/* A value that is always Latin — an IP address, a ratio, a paged range — pinned left to right and
   isolated, so the Arabic around it cannot reorder its parts. `plaintext` is not enough here:
   "::1" and "1–25" open with a neutral character and would be laid out right to left. */
.ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---- pager ---- */

.pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 12px;
    border-top: 1px solid var(--line);
    background: #FAFBFD;
    font-size: 12.5px;
    color: var(--ink2);
}

.pager .pg {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pager button {
    border: 1px solid #CCD4E0;
    background: #fff;
    color: var(--navy);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12.5px;
    min-width: 32px;
}

.pager button:hover:not(:disabled) { background: #EEF2F8; }

.pager button.on {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.pager button:disabled {
    color: #B3B9C6;
    cursor: not-allowed;
}

.pager .gap { padding: 0 2px; color: #B3B9C6; }

.pager select {
    padding: 3px 6px;
    border: 1px solid #CCD4E0;
    border-radius: 4px;
    width: auto;
    font-size: 12.5px;
    background: #fff;
}

/* The table toolbar: search on one side, actions on the other. */
.tbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.tbar .search {
    position: relative;
    min-width: 240px;
    flex: 1;
    max-width: 420px;
}

.tbar .search input {
    width: 100%;
    padding: 7px 32px 7px 10px;
    border: 1px solid var(--field);
    border-radius: 5px;
}

.tbar .search input:focus {
    outline: 2px solid #E6D6A2;
    border-color: var(--gold);
}

.tbar .search .ico {
    position: absolute;
    inset-inline-end: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9AA3B2;
    font-size: 13px;
    pointer-events: none;
}

/* ==========================================================================
   Fact lists

   Stored data shown as data. A read-only <input> looks like somewhere to type,
   and a reader who tries and cannot reads it as a fault rather than a rule.
   ========================================================================== */

dl.facts {
    display: grid;
    gap: 14px 18px;
    margin: 0;
}

dl.facts.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
dl.facts.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1100px) {
    dl.facts.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    dl.facts.cols-2, dl.facts.cols-3 { grid-template-columns: 1fr; }
}

dl.facts > div {
    padding-bottom: 10px;
    border-bottom: 1px solid #F1F4F9;
}

dl.facts dt {
    font-size: 12px;
    color: var(--ink2);
    margin-bottom: 3px;
}

dl.facts dd {
    margin: 0;
    font-size: 13.5px;
    color: var(--ink);
    font-weight: 500;
    /* A client name or a goods description can be long; it wraps rather than clipping. */
    overflow-wrap: anywhere;
    /* Digit runs — an account number, a BIC, a date — keep the order they were written in. */
    unicode-bidi: plaintext;
}

/* Alignment is pinned to the document's direction, not left to resolve per value.

   `plaintext` above gives each value its own direction, so an account number or a BIC resolves
   left-to-right. Under a logical `start` that put the value against the far edge of its box while
   the Arabic label above it sat against the near one — the pair stopped reading as a pair. */
[dir="rtl"] dl.facts dt,
[dir="rtl"] dl.facts dd { text-align: right; }

[dir="ltr"] dl.facts dt,
[dir="ltr"] dl.facts dd { text-align: left; }

/* An absent optional value recedes; it is not a figure to be read. */
dl.facts dd.empty {
    color: #B3B9C6;
    font-weight: 400;
}

/* ==========================================================================
   Stage rail
   ========================================================================== */

.rail {
    display: flex;
    margin: 6px 0 4px;
    overflow-x: auto;
}

.rail .stop {
    flex: 1;
    min-width: 92px;
    text-align: center;
    position: relative;
    padding-top: 22px;
}

/* The connector runs toward the previous stop, so it flows with the text. */
.rail .stop::before {
    content: "";
    position: absolute;
    top: 8px;
    inset-inline-start: 50%;
    inset-inline-end: -50%;
    height: 2px;
    background: #E2E5F0;
}

.rail .stop:first-child::before { display: none; }

.rail .stop i {
    position: absolute;
    top: 2px;
    inset-inline-end: calc(50% - 7px);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #CCD4E2;
}

.rail .stop.done i { background: var(--green); border-color: var(--green); }
.rail .stop.done::before { background: var(--green); }

.rail .stop.now i {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(192, 144, 10, .18);
}

.rail .stop.now::before { background: var(--green); }

.rail .stop span {
    font-size: 11.5px;
    color: var(--ink2);
    display: block;
    padding: 0 4px;
}

.rail .stop.now span {
    color: var(--navy);
    font-weight: 600;
}

/* ==========================================================================
   Attachment rows
   ========================================================================== */

.up {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    border: 1px dashed #C7CFDD;
    border-radius: 5px;
    padding: 9px 12px;
    background: #FAFBFD;
    font-size: 13px;
    margin-bottom: 8px;
}

.up.ok {
    border-style: solid;
    border-color: #BFDFD2;
    background: var(--greenbg);
}

.up.locked {
    background: #F2F4F8;
    color: #98A0AF;
    border-color: #E2E6EE;
}

.up .meta {
    font-size: 11.5px;
    color: #7B8595;
}

/* The native file input is unusable as styled furniture; the label is the
   button and the input itself is taken out of the layout but kept focusable. */
.filebtn {
    position: relative;
    display: inline-flex;
}

.filebtn input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    cursor: pointer;
}

/* ==========================================================================
   Timeline
   ========================================================================== */

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

.tl li {
    position: relative;
    padding-inline-start: 22px;
    padding-bottom: 14px;
}

.tl li::before {
    content: "";
    position: absolute;
    inset-inline-start: 1px;
    top: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
}

.tl li::after {
    content: "";
    position: absolute;
    inset-inline-start: 5px;
    top: 16px;
    bottom: -2px;
    width: 1px;
    background: #E4E8F0;
}

.tl li:last-child { padding-bottom: 0; }
.tl li:last-child::after { display: none; }

.tl li.bad::before { background: var(--red); }

.tl .w {
    font-size: 12px;
    color: #8A92A1;
}

/* Audit details can carry a 64-character SHA-256 digest — an unbroken run with
   no natural break opportunity, which would otherwise overflow its column. */
.wrap-any {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* The same digest in the request log. It has to stay — it is what proves the file has not been
   swapped — but at full length it shouted over the action it belongs to. One line, with the whole
   value on hover and in the audit trail screen. */
.tl .digest {
    display: block;
    direction: ltr;
    unicode-bidi: isolate;
    font-size: 11px;
    color: #A4AAB7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Progress bars
   ========================================================================== */

.bar {
    height: 7px;
    background: #EEF1F7;
    border-radius: 4px;
    overflow: hidden;
}

.bar > i {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: var(--navy);
}

.loading {
    height: 3px;
    background: #E5EAF3;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.loading::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 35%;
    background: var(--gold);
    animation: slide 1.1s infinite ease-in-out;
}

@keyframes slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(340%); }
}

/* ==========================================================================
   Toasts
   ========================================================================== */

.toasts {
    position: fixed;
    bottom: 22px;
    inset-inline-start: 22px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    background: var(--navy);
    color: #fff;
    padding: 11px 16px;
    border-radius: 6px;
    font-size: 13.5px;
    box-shadow: 0 4px 14px rgba(12, 28, 52, .22);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 460px;
    animation: rise .22s ease-out;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.toast.good { background: var(--green); }
.toast.bad  { background: var(--red); }
.toast.warn { background: var(--amber); }

.toast button {
    background: none;
    border: none;
    color: inherit;
    opacity: .8;
    font-size: 15px;
    line-height: 1;
    padding: 0;
}

.toast button:hover { opacity: 1; }

/* ==========================================================================
   Dialog
   ========================================================================== */

.backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 28, 52, .5);
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dlg {
    background: #fff;
    border-radius: 8px;
    width: min(520px, 100%);
    max-height: 90vh;
    overflow: auto;
    animation: rise .18s ease-out;
}

.dlg.wide { width: min(820px, 100%); }

.dlg .head {
    padding: 16px 20px 0;
}

.dlg .head h3 {
    margin: 0;
    font-size: 16px;
    color: var(--navy);
}

.dlg .body { padding: 14px 20px; }

.dlg .foot {
    padding: 0 20px 18px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ==========================================================================
   Mail preview

   What the message will read like, rendered against sample values as the
   administrator types, so a placeholder's effect is visible before anything is
   sent to a real recipient.
   ========================================================================== */

.mail-preview {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: #F7F9FC;
    padding: 12px 14px;
}

.mail-preview-subject {
    font-weight: 700;
    color: var(--navy);
    font-size: 13.5px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.mail-preview-body {
    font-size: 13px;
    color: var(--ink2);
    line-height: 1.9;
    /* The template's own line breaks are what the reader will see. */
    white-space: pre-wrap;
}

/* ==========================================================================
   Permission matrix
   ========================================================================== */

.perm-matrix td.perm-name {
    min-width: 220px;
}

.perm-matrix .perm-key {
    font-size: 11.5px;
    color: #8A92A1;
    direction: ltr;
    text-align: end;
}

/* ==========================================================================
   Language switcher
   ========================================================================== */

.hdb-lang {
    display: inline-flex;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}

.hdb-lang button {
    border: none;
    background: transparent;
    color: var(--ink2);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    line-height: 1.4;
}

.hdb-lang button:hover { background: #EEF2F8; color: var(--navy); }

.hdb-lang button.on {
    background: var(--navy);
    color: #fff;
}

/* On the sign-in pages there is no header to sit in, so it floats in the
   corner. Pinned to the physical top-left in both languages: the panel beside
   it flips, this does not need to. */
.hdb-lang-floating {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 10;
}

/* ==========================================================================
   Sign-in
   ========================================================================== */

/* ==========================================================================
   Account pages — sign in, forced password change, reset, two-factor

   One centred card on the bank's own navy gradient. A person on these pages has
   exactly one thing to do, so the form sits where the eye lands and stays put as
   the window resizes; the brand is carried by the ground and the card's head so
   nothing competes with the fields.
   ========================================================================== */

.hdb-auth {
    position: relative;
    min-height: 100vh;

    /* Deeper than the card's own head, which is the bank's gradient. Ground and card were the
       same navy before, so the card's top edge and its rounded corners simply were not there. */
    background: linear-gradient(135deg, #00203F 0%, #003D7A 55%, #00294F 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    overflow: hidden;
}

/* The bank's ornament, set large and faint behind the card. */
.hdb-auth::before {
    content: "";
    position: absolute;
    inset-inline-end: -160px;
    top: -140px;
    width: 620px;
    height: 620px;
    background: url("img/hdb-ornament.svg") no-repeat center / contain;
    opacity: .1;
    pointer-events: none;
}

.hdb-auth::after {
    content: "";
    position: absolute;
    inset-inline-start: -180px;
    bottom: -200px;
    width: 560px;
    height: 560px;
    background: url("img/hdb-ornament.svg") no-repeat center / contain;
    opacity: .06;
    pointer-events: none;
}

.hdb-auth > * {
    position: relative;
    z-index: 1;
}

.hdb-auth-lang {
    position: absolute;
    top: 20px;
    inset-inline-start: 22px;
    z-index: 2;
}

.hdb-auth-card {
    width: min(440px, 100%);
    background: #fff;
    border-radius: 15px;

    /* A hairline of light around the card lifts its edge off the ground even where the two are
       closest in tone, so the corner reads as a corner. */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .14),
        0 20px 50px rgba(0, 16, 36, .42);
    overflow: hidden;
}

/* The head carries the bank's navy, which is what makes the gold emblem read. On a near-white
   ground the mark washes out to nothing. */
.hdb-auth-head {
    text-align: center;
    padding: 26px 28px 22px;
    border-bottom: 3px solid var(--brand-gold);
    background: var(--brand-gradient);

    /* The card clips with overflow:hidden, but a painted child background can still square off
       the corner during compositing. Giving the head the same radius settles it. */
    border-radius: 15px 15px 0 0;
}

.hdb-auth-emblem {
    display: block;
    margin: 0 auto 12px;
    height: 72px;
    width: 72px;
}

.hdb-auth-name {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
}

.hdb-auth-bank {
    font-size: 12.5px;
    color: #B9CFE7;
    margin-top: 2px;
}

.hdb-auth-body {
    padding: 26px 30px 30px;
}

.hdb-auth-body h1 {
    font-size: 21px;
    font-weight: 700;
    color: var(--brand-deep);
    margin: 0 0 4px;
}

/* FocusOnNavigate moves focus to the heading so a screen reader announces the page. The heading
   is not interactive, so the ring is noise here as it is on the working screens. */
.hdb-auth-body h1:focus,
.lockscreen-card h2:focus {
    outline: none;
}

.hdb-auth-foot {
    padding: 14px 30px;
    background: #F7F9FC;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 12.5px;
    color: var(--ink2);
}

/* The assurances, laid under the card in the ground's own colour range. */
.hdb-auth-points {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    width: min(680px, 100%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 26px;
}

.hdb-auth-points li {
    color: #C9DAEE;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hdb-auth-points li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-gold-gradient);
    flex: none;
}

.hdb-auth-copy {
    margin: 22px 0 0;
    color: rgba(255, 255, 255, .45);
    font-size: 11.5px;
    text-align: center;
}

@media (max-width: 560px) {
    .hdb-auth { padding: 24px 14px; }
    .hdb-auth-body { padding: 22px 20px 26px; }
    .hdb-auth-lang { position: static; margin-bottom: 18px; }
    .hdb-auth-points { flex-direction: column; align-items: center; }
}

/* ==========================================================================
   Account forms

   The sign-in, password-change and reset pages render as static server HTML —
   there is no circuit yet — so they use Blazor's own EditForm inputs rather
   than the interactive controls. These give those inputs the same look.
   ========================================================================== */

.hdb-auth label {
    display: block;
    font-size: 13px;
    color: var(--ink2);
    margin-bottom: 6px;
}

.hdb-auth .field-row {
    margin-bottom: 16px;
}

.form-control {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--field);
    border-radius: var(--r);
    font: inherit;
    background: #fff;
    color: var(--ink);
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.form-control:focus {
    outline: none;
    border-color: var(--brand-light);
    box-shadow: 0 0 0 3px rgba(0, 88, 158, .14);
}

.hdb-submit {
    width: 100%;
    background: var(--brand-gradient);
    color: #fff;
    border: none;
    border-radius: var(--r);
    padding: 13px;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 61, 122, .22);
    transition: transform .15s, box-shadow .15s;
}

.hdb-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 61, 122, .3);
}

.hdb-submit:active { transform: none; }

.validation-message {
    display: block;
    color: var(--red);
    font-size: 12px;
    margin-top: 4px;
}

/* Identity's status banner. "Error" prefixes are set by the framework, so both tones exist. */
.alert {
    border-radius: var(--r);
    padding: 11px 14px;
    font-size: 13px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.alert-danger {
    background: var(--redbg);
    border-color: #EECFCC;
    color: var(--red);
}

.alert-success {
    background: var(--greenbg);
    border-color: #C5E2D6;
    color: var(--green);
}

/* ==========================================================================
   Quick sign-in for review

   Only rendered where the demo accounts exist, which is never in production.
   Deliberately styled as a notice rather than as part of the form, so nobody
   mistakes it for something the platform normally offers.
   ========================================================================== */

.demo-pick {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--line);
}

.demo-pick-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.demo-pick-head b {
    font-size: 13px;
    color: var(--ink);
}

.demo-pick-head span {
    font-size: 11.5px;
    color: var(--amber);
}

.demo-pick-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.demo-pick-item {
    text-align: start;
    background: #FBFCFE;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 7px 10px;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.demo-pick-item:hover {
    background: #EEF3FA;
    border-color: var(--brand-light);
}

.demo-pick-item .who {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-deep);
}

.demo-pick-item .role {
    display: block;
    font-size: 11px;
    color: var(--ink2);
}

@media (max-width: 480px) {
    .demo-pick-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Screen lock

   Covers the platform after a short idle. The card is deliberately narrow and
   says who is locked out of it, so the person coming back knows whose session
   they are resuming before they type anything.
   ========================================================================== */

.lockscreen {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: linear-gradient(135deg, #00203F 0%, #003D7A 55%, #00294F 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lockscreen::before {
    content: "";
    position: absolute;
    inset-inline-end: -140px;
    bottom: -180px;
    width: 560px;
    height: 560px;
    background: url("img/hdb-ornament.svg") no-repeat center / contain;
    opacity: .09;
    pointer-events: none;
}

.lockscreen-card {
    position: relative;
    width: min(360px, 100%);
    background: #fff;
    border-radius: 15px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .14),
        0 20px 50px rgba(0, 16, 36, .44);
    padding: 28px 26px;
    text-align: center;
}

/* The gold mark is drawn for a dark ground, so it gets one rather than fading out on the card. */
.lockscreen-emblem {
    display: block;
    margin: 0 auto 14px;
    height: 52px;
    width: 52px;
    padding: 11px;
    box-sizing: content-box;
    background: var(--brand-gradient);
    border-radius: 12px;
}

.lockscreen-who {
    line-height: 1.35;
    margin-bottom: 16px;
}

.lockscreen-who b {
    display: block;
    color: var(--brand-deep);
    font-size: 15px;
}

.lockscreen-who small {
    color: #7B8595;
    font-size: 12px;
}

.lockscreen-card h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
}

.lockscreen-card .sub {
    margin-bottom: 16px;
}

/* The field is the one thing to do here, so it reads left-aligned like a form, not centred. */
.lockscreen-card .field {
    text-align: start;
}

/* "Unlock" resumes what you were doing; "sign in as someone else" ends it. They are different
   in kind, so they are not left flush against each other where one is hit meaning the other. */
.lockscreen-card form {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.hdb-auth-link {
    text-align: center;
    margin: 16px 0 0;
    font-size: 13px;
}

/* ==========================================================================
   Framework error banner
   ========================================================================== */

#blazor-error-ui {
    background: #FBF6E7;
    border-top: 1px solid #ECDFBA;
    color: #6F5407;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .1);
    display: none;
    left: 0;
    padding: 0.7rem 1.25rem 0.9rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    top: 0.55rem;
    inset-inline-end: 0.9rem;
}