/* gov-recruit.css - application-specific additions on top of the GIGW/DBIM kit (colours come from gov-tokens.css). */

/* Legacy .button class used across the old pages: render like the kit button, keyboard and contrast safe */
a.button, button.button, input.button {
  display: inline-block; min-height: 44px; padding: .55rem 1.1rem; border: 2px solid var(--gov-key, #162f6a);
  border-radius: 4px; background: var(--gov-key, #162f6a); color: #fff; font: inherit; font-weight: 600;
  text-decoration: none; text-align: center; cursor: pointer; line-height: 1.3;
}
a.button:hover, button.button:hover, input.button:hover { background: #fff; color: var(--gov-key, #162f6a); }
a.button:focus-visible, button.button:focus-visible, input.button:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }

/* Server-side validation message / field highlight: colour plus text weight and underline, not colour alone */
.errorColor { color: #b3261e !important; font-weight: 700; text-decoration: underline; }
.gov-form-error { border-left: 4px solid #b3261e; background: #fdecea; color: #7a1410; padding: .75rem 1rem; margin: 1rem 0; font-weight: 600; }

/* Bootstrap-based form pages: keep the form look but use the kit font and a visible focus ring */
.form-control:focus, select:focus, textarea:focus, input:focus { outline: 3px solid #ffbf47; outline-offset: 1px; }
.form-control { font-family: inherit; }

/* Page layout helpers */
.rec-page { padding-block: 1.5rem 2.5rem; }
.rec-boxed { border: 1px solid #c6c6c6; border-radius: 6px; padding: 1rem 1.25rem; background: #fff; margin-bottom: 1.25rem; }
.rec-dates dt { font-weight: 600; }
.rec-dates dd { margin: 0 0 .75rem; }
.rec-captcha { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rec-captcha img { max-width: 100%; height: auto; }
.rec-captcha button { background: none; border: 1px solid #606060; border-radius: 4px; min-height: 44px; min-width: 44px; cursor: pointer; padding: .25rem; }
.rec-captcha button img { height: 28px; }
.rec-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.rec-timeout { position: fixed; inset-inline: 0; bottom: 0; z-index: 1000; background: #fff3cd; border-top: 4px solid #8a6d00; padding: 1rem; text-align: center; }
.rec-timeout[hidden] { display: none; }

/* Responsive tables on small screens */
.gov-table-wrap { overflow-x: auto; position: relative; max-width: 100%; }

.rec-refresh { background: none; border: 1px solid #606060; border-radius: 4px; min-height: 44px; min-width: 44px; cursor: pointer; padding: .25rem; vertical-align: middle; }

.rec-h1 { margin: 1rem auto .5rem; max-width: var(--gov-container, 75rem); padding-inline: 1rem; font-size: 1.5rem; }
.rec-pay { display: block; text-align: center; margin: 1rem 0; }
/* The kit's single typeface (DBIM 4.1.1) also for the legacy Bootstrap/Georgia form pages */
body.gov-root, body.gov-root label, body.gov-root .form-control, body.gov-root select, body.gov-root button, body.gov-root input, body.gov-root textarea { font-family: var(--gov-font, "Noto Sans", system-ui, sans-serif); }
body.gov-root h1.rec-h1 { font-family: inherit; font-weight: 700; font-size: 1.5rem; color: var(--gov-key, #162f6a); }

/* ===== Application forms (single column, labels on top - DBIM Annex B) ===== */
.rec-form-page { padding-block: 1rem 2.5rem; }
.rec-form-page h1 { margin-top: 0; }
.rec-summary { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1.25rem; margin: 0 0 1.25rem; padding: 1rem 1.25rem; background: var(--gov-5); border: 1px solid var(--gov-4); border-left: 4px solid var(--gov-key); border-radius: var(--gov-radius); }
.rec-summary dt { font-weight: 600; }
.rec-summary dd { margin: 0; font-weight: 600; color: var(--gov-key); overflow-wrap: anywhere; }
.rec-summary__out { grid-column: 1 / -1; margin-top: .5rem; }

/* Steps (ARIA tabs, same look as the kit's .gov-tabs) */
.rec-steps { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; border-bottom: 2px solid var(--gov-key); }
.rec-steps [role="tab"] { min-height: 44px; padding: .5rem var(--gov-s4); background: var(--gov-5); color: var(--gov-key); border: 1px solid var(--gov-4); border-bottom: 0; border-radius: var(--gov-radius) var(--gov-radius) 0 0; font: 600 var(--gov-fs-p2)/1.2 var(--gov-font, "Noto Sans", sans-serif); cursor: pointer; }
.rec-steps [role="tab"][aria-selected="true"] { background: var(--gov-key); color: var(--gov-white); }
.rec-steps [role="tab"][aria-disabled="true"] { background: #f1f1f1; color: #595959; border-color: #d4d4d4; cursor: not-allowed; }
.rec-steps [role="tab"]:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.rec-panel { padding: 1.25rem 0 0; }
.rec-panel[hidden] { display: none; }
.rec-panel > h2 { font-size: 1.25rem; margin: 0 0 .25rem; }
.rec-panel h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; color: var(--gov-key); }
.rec-intro { margin: .25rem 0 1rem; }
.rec-intro .gov-req { color: #b02a37; font-weight: 700; }
.rec-summary-box { margin-bottom: 1rem; }
.rec-summary-box:focus { outline: 3px solid #ffbf47; outline-offset: 2px; }
.rec-summary-box ul { margin: .5rem 0 0; padding-left: 1.25rem; }

/* Fields */
.rec-form { max-width: 42rem; margin: 0 0 1.5rem; }
.rec-form .gov-input, .rec-form .gov-select { max-width: 100%; }
.rec-form .gov-input--md { max-width: 24rem; }
.rec-form .gov-input--sm { max-width: 12rem; }
.rec-form .gov-select { width: auto; min-width: 12rem; max-width: 100%; }
.rec-form .gov-select--sm { min-width: 6rem; }
.rec-form .gov-fieldset { margin-bottom: var(--gov-s4); }
.rec-form .gov-fieldset > legend { font-weight: 600; }
.rec-inline { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; }
.rec-inline > .gov-select, .rec-inline > .gov-input { margin: 0; }
.rec-form .gov-hint { margin: 0 0 .35rem; }
.rec-live { min-height: 1.5em; margin: .5rem 0 0; font-weight: 600; color: var(--gov-key); }
.rec-actions-row { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.rec-pic { display: block; max-width: 130px; height: auto; margin-top: .5rem; border: 1px solid var(--gov-grey-2); }
.rec-file .gov-input { padding: .5rem; }
.rec-form .gov-input[readonly] { background: var(--gov-linen, #f5f1e8); }
.rec-datatable { width: 100%; }
.rec-datatable .gov-input, .rec-datatable .gov-select { min-width: 5rem; width: 100%; }
.rec-declaration { padding: 1rem 1.25rem; border: 1px solid var(--gov-4); border-left: 4px solid var(--gov-key); background: #fff; margin: 1rem 0; }
.rec-declaration h3 { margin-top: 0; }
@media (max-width: 40rem) {
  .rec-summary { grid-template-columns: 1fr; }
  .rec-steps [role="tab"] { flex: 1 1 100%; border-radius: var(--gov-radius); border-bottom: 1px solid var(--gov-4); }
}

.rec-tight { margin-bottom: .25rem; }


/* ===== Plan 5: cards, application header, even form grid ===== */
.rec-card { background: #fff; border: 1px solid #c6c6c6; border-top: 4px solid var(--gov-key); border-radius: var(--gov-radius, 6px); padding: 1.25rem 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.rec-card > h2:first-child, .rec-card > h3:first-child { margin-top: 0; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; align-items: stretch; margin-bottom: 1.25rem; }
.rec-grid > .rec-card { margin: 0; }
.rec-badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-weight: 700; font-size: .875rem; border: 2px solid currentColor; }
.rec-badge--open { color: #0b6b2e; }
.rec-badge--closed { color: #8a1c14; }
.rec-datetable { width: 100%; border-collapse: collapse; }
.rec-datetable th, .rec-datetable td { text-align: left; padding: .5rem .25rem; border-bottom: 1px solid #e0e0e0; vertical-align: top; }
.rec-datetable th { font-weight: 600; width: 55%; }
.rec-btnlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.rec-btnlist .gov-btn { display: flex; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; }
.rec-btnlist .rec-size { font-weight: 400; white-space: nowrap; }
.rec-instr { margin: 0; padding-left: 1.25rem; }
.rec-instr li { margin-bottom: .5rem; }

/* Application header: title + Logout button + details, one bordered card */
.rec-apphead { border: 2px solid var(--gov-key); border-radius: var(--gov-radius, 6px); background: #fff; margin: 1rem 0 1.25rem; overflow: hidden; }
.rec-apphead__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .75rem 1.25rem; background: var(--gov-5, #eef2fb); border-bottom: 2px solid var(--gov-key); }
.rec-apphead .rec-h1, body.gov-root .rec-apphead h1.rec-h1 { margin: 0; padding: 0; max-width: none; font-size: 1.5rem; }
.rec-apphead .rec-summary { display: grid; grid-auto-flow: column; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; gap: .15rem 0; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.rec-apphead .rec-summary dt, .rec-apphead .rec-summary dd { padding: .5rem 1.25rem 0; }
.rec-apphead .rec-summary dt { font-size: .875rem; color: #444; font-weight: 600; }
.rec-apphead .rec-summary dd { padding-bottom: .75rem; font-size: 1.05rem; }
.rec-apphead .rec-summary dt + dd { border-right: 1px solid #d4d4d4; }
.rec-apphead .rec-summary dd:last-of-type { border-right: 0; }
@media (max-width: 56rem) {
  .rec-apphead .rec-summary { grid-auto-flow: row; grid-template-columns: max-content 1fr; grid-template-rows: none; padding: .5rem 0; }
  .rec-apphead .rec-summary dt, .rec-apphead .rec-summary dd { padding: .3rem 1.25rem; }
  .rec-apphead .rec-summary dt + dd { border-right: 0; }
}

/* Step card and an even two-column field grid */
.rec-panel { border: 1px solid #c6c6c6; border-top: 0; border-radius: 0 0 var(--gov-radius, 6px) var(--gov-radius, 6px); padding: 1.25rem 1.5rem 1.5rem; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.rec-steps { margin-top: .5rem; }
.rec-form { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; align-items: start; }
.rec-form > * { grid-column: 1 / -1; }
.rec-form > .gov-field { grid-column: auto; min-width: 0; }
.rec-form > .gov-field.rec-wide { grid-column: 1 / -1; }
.rec-form > .gov-hint.rec-wide { grid-column: 1 / -1; margin: 0 0 .25rem; }
.rec-form .gov-input, .rec-form .gov-select, .rec-form .gov-input--md, .rec-form .gov-input--sm { width: 100%; max-width: 100%; min-width: 0; }
.rec-form .rec-inline .gov-select, .rec-form .rec-inline .gov-input { width: auto; flex: 1 1 8rem; }
.rec-form .gov-fieldset { border: 1px solid #c6c6c6; }
.rec-form > input[type="hidden"] { display: none; }
.rec-actions-row { justify-content: flex-end; padding-top: 1rem; margin-top: 1rem; border-top: 1px solid #e0e0e0; }
.rec-panel > button.gov-btn, .rec-panel > .rec-actions-row { margin-right: .5rem; }
@media (max-width: 40rem) {
  .rec-form { grid-template-columns: 1fr; }
  .rec-panel { padding: 1rem; }
}

.rec-stack { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
.rec-instr { columns: 2 22rem; column-gap: 2rem; }
.rec-instr li { break-inside: avoid; }
.rec-stack .rec-btnlist { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.rec-page > h1 { font-size: 1.75rem; margin: 0 0 1.25rem; }
/* login, registration and the other short pages use the same card look */
.rec-boxed { border-top: 4px solid var(--gov-key); box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 1.25rem 1.5rem; }
.rec-boxed > h2:first-child { margin-top: 0; }
.rec-datetable + h3 { margin-top: 1.25rem; }

/* Reflow audit (Oct 2026): grid children may shrink, long button text wraps, link targets at least 24px high (WCAG 2.5.8) */
.rec-grid > *, .rec-stack > *, .rec-form > * { min-width: 0; }
.rec-btnlist .gov-btn { flex-wrap: wrap; overflow-wrap: anywhere; }
.rec-btnlist .rec-size { white-space: normal; }
.gov-footer li a, .gov-breadcrumb a, .rec-page li > a:only-child { display: inline-block; padding-block: .3rem; }
.gov-footer li { margin: 0; }
.rec-form select, .rec-form input, .rec-form textarea { max-width: 100%; }
h1, h2, h3, h4, p, li, dd, dt, label, .gov-alert { overflow-wrap: anywhere; }
.rec-inline > * { min-width: 0; }
.rec-inline { flex-wrap: wrap; }

/* Documents step: each upload is one card (label + hint, file chooser and Upload button on one row, status below) */
.rec-file { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l l" "h h" "i a" "s s" "e e" "v v"; gap: .25rem .75rem; align-items: center;
  border: 1px solid var(--gov-grey-2, #c6c6c6); border-radius: 6px; padding: 1rem 1.25rem; margin: 0 0 1rem; background: #fff; }
.rec-file > .gov-label { grid-area: l; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; }
.rec-file > .gov-hint { grid-area: h; margin: 0 0 .4rem; }
.rec-file > input[type="file"] { grid-area: i; min-width: 0; margin: 0; }
.rec-file > .rec-selname { grid-area: s; margin: .35rem 0 0; font-weight: 600; }
.rec-file > .gov-error { grid-area: e; margin: .35rem 0 0; }
.rec-file > .rec-actions-row { grid-area: a; margin: 0; padding: 0; border: 0; }
.rec-file > .rec-file-view { grid-area: v; margin-top: .5rem; }
.rec-file > .rec-file-view:empty { display: none; }
.rec-file .rec-file-view > div { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.rec-file .rec-file-view .gov-btn { min-height: 0; padding: .25rem .9rem; }
.rec-status { display: inline-block; font-size: .8125rem; font-weight: 600; line-height: 1.4; padding: .05rem .6rem; border-radius: 999px; border: 1px solid transparent; }
.rec-status--done { color: #0b4a1e; background: #e3f4e8; border-color: #9fd0ad; }
.rec-status--todo { color: #6b3f00; background: #fff3d1; border-color: #e5c36a; }
.rec-status--opt { color: #3d3d3d; background: #efefef; border-color: #c6c6c6; }
.rec-file.rec-file--done { border-left: 4px solid #1f7a3a; }
.rec-file.rec-file--todo { border-left: 4px solid #c68a00; }
@media (max-width: 40rem) {
  .rec-file { grid-template-columns: 1fr; grid-template-areas: "l" "h" "i" "a" "s" "e" "v"; }
  .rec-file > .rec-actions-row { justify-content: flex-start; }
}
:root[data-contrast="high"] .rec-file { background: #000; border-color: #fff; color: #fff; }
:root[data-contrast="high"] .rec-status { background: #000 !important; color: #fff !important; border-color: #fff !important; }
.rec-form .rec-group { border: 1px solid var(--gov-grey-2, #c6c6c6); border-radius: 6px; padding: 1rem 1.25rem; margin: 1.25rem 0; }
.rec-form .rec-group > legend { font-weight: 700; color: var(--gov-key, #162f6a); padding: 0 .5rem; }
:root[data-contrast="high"] .rec-form .rec-group { border-color: #fff; }
/* Preview: other educational qualification table */
.rec-edu-preview { margin: 1rem 0 1.5rem; }
.rec-edu-preview th, .rec-edu-preview td { padding: .5rem .75rem; }
.rec-edu-preview tbody td:first-child { font-weight: 600; white-space: nowrap; }
.rec-edu-preview tbody td:nth-child(n+3) { text-align: center; }
.rec-edu-preview thead th { vertical-align: middle; }

/* Driving experience rows (LVD / HVD posts) */
.rec-exp-block { margin-top: 1rem; }
.rec-exp-row { border: 1px solid #5b6b7a; border-radius: .5rem; padding: .75rem; margin: 0 0 .75rem; display: grid; gap: .5rem; }
.rec-exp-row .gov-input { max-width: 32rem; }
.rec-exp-period, .rec-exp-total { margin: 0; font-weight: 600; min-height: 1.2em; }
.rec-exp-remove { justify-self: start; }
.rec-exp-add { margin: .25rem 0 .5rem; }