/*
 * MAS Marine Academy — tokens for the standalone Bootstrap 5 admission pages (apply/index.php, apply/rating/index.php).
 * Phase 4. Visual only: no layout, field or behaviour changes. Colours match mas-theme.css (all AA on white).
 */
:root {
	--mas-navy-900: #0b1f44;
	--mas-navy-800: #112958;
	--mas-blue-600: #1f4fa3;
	--mas-blue-050: #eef3fb;
	--mas-red-600: #c8102e;
	--mas-text: #3e4a5e;
	--mas-border: #e3e8f0;
	--mas-surface: #f6f8fb;
	--bs-body-font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Bengali', 'Nirmala UI', Vrinda, sans-serif;
	--bs-body-color: var(--mas-text);
	--bs-link-color: var(--mas-blue-600);
	--bs-link-color-rgb: 31, 79, 163;
	--bs-link-hover-color: var(--mas-navy-800);
	--bs-link-hover-color-rgb: 17, 41, 88;
	--bs-primary: var(--mas-blue-600);
	--bs-primary-rgb: 31, 79, 163;
	--bs-border-color: #ced4da; /* Bootstrap 5.2 field border (5.3 lightened it to #dee2e6) */
}

body { border-top: 4px solid var(--mas-navy-800); background: var(--mas-surface); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-header, .card-title { color: var(--mas-navy-800); }

.card { border-color: var(--mas-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10); }
.card-header { background: var(--mas-blue-050); border-bottom-color: var(--mas-border); font-weight: 600; }

.btn-primary {
	--bs-btn-bg: var(--mas-blue-600);
	--bs-btn-border-color: var(--mas-blue-600);
	--bs-btn-hover-bg: var(--mas-navy-800);
	--bs-btn-hover-border-color: var(--mas-navy-800);
	--bs-btn-active-bg: var(--mas-navy-900);
	--bs-btn-active-border-color: var(--mas-navy-900);
	--bs-btn-disabled-bg: var(--mas-blue-600);
	--bs-btn-disabled-border-color: var(--mas-blue-600);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
	border-color: var(--mas-blue-600);
	box-shadow: 0 0 0 .25rem rgba(31, 79, 163, .25);
}
/* Bootstrap 5.3 no longer greys out read-only fields (5.2 did); keep the old look so calculated and date-picker
   fields don't look like free-text inputs. */
.form-control[readonly] { background-color: var(--bs-secondary-bg, #e9ecef); }

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

a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 3px solid var(--mas-blue-600); outline-offset: 2px; }

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

/* Phase 6: error summary and per-field messages written by assets/js/mas-forms.js */
.mas-error-summary { margin: 0 0 1.25rem; padding: 1rem 1.25rem; border: 2px solid #c8102e; border-left-width: 6px; border-radius: 8px; background: #fff5f6; color: #1a2233; }
.mas-error-summary:focus { outline: 3px solid #1f4fa3; outline-offset: 2px; }
.mas-error-summary__title { margin: 0 0 .5rem; font-weight: 700; color: #a50d26; }
.mas-error-summary ul { margin: 0; padding-left: 1.25rem; list-style: disc; }
.mas-error-summary a { color: #a50d26; text-decoration: underline; }
.mas-field-error:not(:empty) { margin-top: .25rem; font-size: .875rem; font-weight: 600; color: #b00020; }

/* Phase 6: wide row tables (courses, education, sea services) scroll inside their own box on phones,
   so the page itself never scrolls sideways (WCAG 1.4.10). mas-forms.js makes an overflowing box focusable. */
.mas-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mas-table-scroll:focus-visible { outline: 3px solid #0d6efd; outline-offset: 2px; }

/* Phase 7: phones and tablets (touch, same breakpoint as mas-theme.css) — 44 px tall fields, buttons and stand-alone links */
@media (max-width: 991.98px) {
	.form-control, .form-select, .input-group-text, .btn { min-height: 44px; }
	.appendoButtons .btn { min-width: 44px; }
	.form-check-input { width: 1.25em; height: 1.25em; }
	/* logo link and "Back to …" links on the standalone pages */
	.text-center > a[href], .text-center > .mb-4 > a[href] { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Phones and tablets: row-table fields get a usable width (the table scrolls in its own box) */
@media (max-width: 991.98px) {
	.mas-table-scroll td .form-control, .mas-table-scroll td .form-select { min-width: 6.5rem; }
	.mas-table-scroll td .select2-container { min-width: 10rem; }
}

/* ---------------------------------------------------------------------------
 * Re-review 2026-11-04: header bar shared by the admission pages; apply page layout (intro, section list, numbered
 * white sections). docs/website-redesign-rereview.md, section 11. Flat: 8 px corners, no shadows.
 * ------------------------------------------------------------------------- */
.mas-applyhead { background: #fff; border-bottom: 1px solid var(--mas-border); }
body:has(.mas-applyhead) { border-top-width: 0; }
.mas-applyhead__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-top: .75rem; padding-bottom: .75rem; }
.mas-applyhead__brand img { display: block; width: auto; height: 56px; }
.mas-applyhead__links { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; }
.mas-applyhead__links a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--mas-navy-800); font-size: .9375rem; font-weight: 600; text-decoration: none; }
.mas-applyhead__links a:hover { color: var(--mas-red-600); text-decoration: underline; }
.mas-applyhead__links .fa { color: var(--mas-blue-600); }
.mas-applyhead__back { padding: 0 1rem; border: 1px solid var(--mas-navy-800); border-radius: 8px; }
@media (max-width: 575.98px) {
	.mas-applyhead__brand img { height: 44px; }
	.mas-applyhead__links { width: 100%; justify-content: space-between; gap: 0 .75rem; }
	.mas-applyhead__links a:nth-child(2) { display: none; }
	.mas-applyhead__links a { font-size: .875rem; }
}

.mas-applyintro { max-width: 760px; margin-bottom: 1.5rem; }
.mas-applyintro__eyebrow { margin: 0 0 .25rem; color: var(--mas-red-600); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mas-applyintro__title { margin: 0 0 .5rem; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); font-weight: 700; }
.mas-applyintro__text { margin: 0; font-size: 1.0625rem; line-height: 1.6; }

.mas-applygrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 992px) { .mas-applygrid { grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; } .mas-applynav { position: sticky; top: 1rem; } }
.mas-applynav ol { counter-reset: step; margin: 0; padding: 0; list-style: none; }
.mas-applynav li { counter-increment: step; }
.mas-applynav ol a { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: .25rem .5rem; border-radius: 6px; color: var(--mas-navy-800); font-weight: 600; text-decoration: none; }
.mas-applynav ol a::before { content: counter(step); flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mas-blue-050); color: var(--mas-blue-600); font-size: .875rem; }
.mas-applynav ol a:hover { background: #fff; color: var(--mas-red-600); }
.mas-applynav__help { display: flex; flex-direction: column; gap: .125rem; margin-top: 1rem; padding: 1rem; border-radius: 8px; background: var(--mas-navy-800); color: rgba(255, 255, 255, .85); font-size: .9375rem; }
.mas-applynav__help strong { color: #fff; }
.mas-applynav__help a { color: #fff; font-weight: 600; text-decoration: none; }
.mas-applynav__help a:hover { text-decoration: underline; }
.mas-applynav__help a:focus-visible { outline-color: #ffd166; }
/* Phones and tablets: the section list becomes a row of numbered chips under the intro; help moves below the form */
@media (max-width: 991.98px) {
	.mas-applynav ol { display: flex; flex-wrap: wrap; gap: .375rem; }
	.mas-applynav ol a { min-height: 40px; padding: .25rem .75rem .25rem .375rem; border: 1px solid var(--mas-border); border-radius: 999px; background: #fff; font-size: .875rem; }
	.mas-applynav ol a::before { width: 26px; height: 26px; }
	.mas-applynav__help { display: none; }
}

.mas-applyform { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; counter-reset: applysec; }
.mas-applysection, .mas-applysubmit { min-width: 0; }
.mas-applysection { counter-increment: applysec; }
.mas-applysection > div:first-child::before { content: counter(applysec); flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mas-navy-800); color: #fff; font-weight: 700; }
.mas-applysection { padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: 8px; background: #fff; scroll-margin-top: 1rem; }
.mas-applysection > div:first-child { margin-top: 0 !important; }
.mas-applysection > div:first-child h2 { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: 1.375rem; font-weight: 700; }
.mas-applysection > div:first-child h2 > i { display: none; }
.mas-applysection > div:first-child { display: flex; align-items: center; gap: .75rem; padding-bottom: .875rem; margin-bottom: 1.25rem !important; border-bottom: 1px solid var(--mas-border); }
.mas-applysection .table > :not(caption) > * > * { background: transparent; }
.mas-applysection .table thead th { border-bottom-color: var(--mas-border); color: var(--mas-navy-800); font-size: .875rem; }
.appendoButtons .btn { display: inline-flex; align-items: center; gap: .375rem; min-height: 36px; font-weight: 600; }
/* Fee summary (filled in by the page script) */
.mas-applysection .text-end { margin-left: auto; max-width: 280px; padding: .75rem 1rem; border-radius: 8px; background: var(--mas-surface); }
.mas-applysection .text-end p { display: flex; justify-content: space-between; margin: 0; padding: .125rem 0; }
.mas-applysection .text-end p.clearfix::after { content: none; }
.mas-applysubmit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: 8px; background: var(--mas-navy-800); color: rgba(255, 255, 255, .85); }
.mas-applysubmit p { flex: 1 1 280px; margin: 0; }
.mas-applysubmit .btn { --bs-btn-bg: var(--mas-red-600); --bs-btn-border-color: var(--mas-red-600); --bs-btn-hover-bg: #a00d25; --bs-btn-hover-border-color: #a00d25; --bs-btn-active-bg: #8a0b20; --bs-btn-active-border-color: #8a0b20; display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.mas-applysubmit .btn:focus-visible { outline-color: #ffd166; }
@media (max-width: 767.98px) { .mas-applysection .mas-table-scroll td:first-child .form-select { min-width: 15rem; } }
/* Font Awesome loads without blocking the first paint on the admission forms: reserve each icon's box (FA 7 icons are
   1.25em wide, fixed width) so nothing moves when the icon font arrives. */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands { display: inline-block; width: 1.25em; line-height: 1; text-align: center; }

/* ---------------------------------------------------------------------------
 * Certificate verification page (re-review 2026-11-04, section 15). Uses the shared admission header; this page loads
 * no icon font, so the header icons are hidden here.
 * ------------------------------------------------------------------------- */
.mas-verifypage .mas-applyhead .fa { display: none; }
.mas-verifywrap { max-width: 760px; margin: 0 auto; padding: 2rem 0 4rem; }
.mas-verifyform { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: 8px; background: #fff; }
.mas-verifyform .form-label { font-weight: 600; color: var(--mas-navy-800); }
.mas-verifyform__row { display: flex; flex-wrap: wrap; gap: .75rem; }
.mas-verifyform__row .form-control { flex: 1 1 260px; min-width: 0; }
.mas-verifyform__row .btn { flex: none; min-width: 8rem; }
.mas-verifyform__row .invalid-feedback { flex-basis: 100%; margin-top: -.25rem; }
.mas-verifyresult, .mas-verifynone { margin-top: 1.5rem; border-radius: 8px; background: #fff; }
.mas-verifyresult { border-top: 4px solid #1e7a46; }
.mas-verifyresult__head { padding: 1.25rem clamp(1.25rem, 1rem + 1vw, 1.75rem) 1rem; border-bottom: 1px solid var(--mas-border); }
.mas-verifyresult__badge { display: inline-block; margin-bottom: .5rem; padding: .125rem .75rem; border-radius: 999px; background: #e3f3e8; color: #155c34; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mas-verifyresult__title { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.mas-verifyresult__title strong { display: block; font-size: 1.375rem; }
.mas-verifyresult__note { margin: .375rem 0 0; color: #5a6578; }
.mas-verifyresult__list { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: .5rem clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.mas-verifyresult__list > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .125rem; padding: .625rem 0; border-bottom: 1px solid var(--mas-border); }
.mas-verifyresult__list > div:last-child { border-bottom: 0; }
.mas-verifyresult__list dt { font-size: .8125rem; font-weight: 600; color: #5a6578; }
.mas-verifyresult__list dd { margin: 0; font-weight: 600; color: var(--mas-navy-800); overflow-wrap: anywhere; }
@media (min-width: 576px) { .mas-verifyresult__list > div { grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem; align-items: baseline; } .mas-verifyresult__list dt { font-size: .9375rem; } }
.mas-verifyresult__actions { padding: 0 clamp(1.25rem, 1rem + 1vw, 1.75rem) 1.5rem; }
.mas-verifynone { padding: 1.25rem clamp(1.25rem, 1rem + 1vw, 1.75rem); border-left: 6px solid var(--mas-red-600); }
.mas-verifynone__title { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 700; color: #a50d26; }
.mas-verifynone p { margin: 0 0 .5rem; overflow-wrap: anywhere; }
.mas-verifynone p:last-child { margin-bottom: 0; }
.mas-verifyfoot { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--mas-border); }
.mas-verifyfoot__title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; }
.mas-verifyfoot ul { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.mas-verifyfoot a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* =====================================================================================================================
   DARK MODE — tokens and hand-made rules (2026-11-06). html[data-theme="dark"] and data-bs-theme="dark" are set by
   base/theme-init.php. Bootstrap 5.3 switches its own colours with data-bs-theme; the --bs-* values this file sets on
   :root (they win over Bootstrap's) are set again here for dark. Rule-by-rule colours: generated block at the end.
   ===================================================================================================================== */
html { color-scheme: light; } /* the <meta name="color-scheme" content="light dark"> only covers the moment before this file loads */
html[data-theme="dark"] {
	color-scheme: dark;
	--mas-text: #c9d2e0;
	--mas-border: #2b3954;
	--mas-surface: #121b2c;
	--mas-blue-050: #1a2742;
	--bs-body-color: #c9d2e0;
	--bs-body-bg: #0b1220;
	--bs-emphasis-color: #e8edf6;
	--bs-secondary-color: #a3afc2;
	--bs-link-color: #93bbff;
	--bs-link-color-rgb: 147, 187, 255;
	--bs-link-hover-color: #c4d8ff;
	--bs-link-hover-color-rgb: 196, 216, 255;
	--bs-border-color: #3a4a68;
	--mas-d-heading: #e6edf8;
	--mas-d-link: #93bbff;
	--mas-d-red: #ff8f9f;
	--mas-d-green: #74d6a0;
	--mas-d-text: #c9d2e0;
	--mas-d-card: #121b2c;
	/* coloured notices keep their meaning: text, tinted background, border */
	--mas-d-amber: #f5c76a;
	--mas-d-red-bg: #3a1620;
	--mas-d-amber-bg: #33270f;
	--mas-d-green-bg: #10301e;
	--mas-d-blue-bg: #16233d;
	--mas-d-red-border: #7a2a36;
	--mas-d-amber-border: #6b5220;
	--mas-d-green-border: #23573a;
	--mas-d-blue-border: #2e4a7a;
}
html[data-theme="dark"] body { background-color: #0b1220; color: var(--mas-text); }
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: #0f1828; color: #e8edf6; border-color: #3a4a68; }
html[data-theme="dark"] .form-control::placeholder { color: #8d99ad; }
/* header logo: the light version on dark (both are in apply/_header.php) */
.mas-applyhead__logo--dark { display: none !important; }
html[data-theme="dark"] .mas-applyhead__logo--light { display: none !important; }
html[data-theme="dark"] .mas-applyhead__logo--dark { display: block !important; }
.mas-theme-toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0; font: inherit; font-size: .9375rem; font-weight: 600; color: var(--mas-navy-800); background: none; border: 0; cursor: pointer; }
.mas-theme-toggle svg { width: 1em; height: 1em; color: var(--mas-blue-600); }
.mas-theme-toggle__sun, .mas-theme-toggle__to-light { display: none; }
html[data-theme="dark"] .mas-theme-toggle__sun, html[data-theme="dark"] .mas-theme-toggle__to-light { display: inline; }
html[data-theme="dark"] .mas-theme-toggle__moon, html[data-theme="dark"] .mas-theme-toggle__to-dark { display: none; }
html[data-theme="dark"] .mas-theme-toggle { color: var(--mas-d-heading); }
html[data-theme="dark"] .mas-theme-toggle svg { color: var(--mas-d-link); }
.mas-theme-toggle:focus-visible { outline: 2px solid var(--mas-blue-600); outline-offset: 3px; border-radius: 2px; }
/* Bootstrap colour utilities used in the forms keep their light-mode shades; lighter ones for dark (4.5:1 or more) */
html[data-theme="dark"] .text-danger { color: #ff8f9f !important; }
html[data-theme="dark"] .text-success { color: #74d6a0 !important; }
html[data-theme="dark"] .btn-outline-primary { --bs-btn-color: #93bbff; --bs-btn-border-color: #93bbff; --bs-btn-hover-color: #0b1220; --bs-btn-hover-bg: #93bbff; --bs-btn-hover-border-color: #93bbff; --bs-btn-active-color: #0b1220; --bs-btn-active-bg: #93bbff; }
html[data-theme="dark"] .btn-outline-danger { --bs-btn-color: #ff8f9f; --bs-btn-border-color: #ff8f9f; --bs-btn-hover-color: #0b1220; --bs-btn-hover-bg: #ff8f9f; }

/* === DARK MODE (generated by docs/tools/dark/build-dark.cjs — do not edit below this line) === */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .h1,
html[data-theme="dark"] .h2,
html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4,
html[data-theme="dark"] .h5,
html[data-theme="dark"] .h6,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-title { color: var(--mas-d-heading); }
html[data-theme="dark"] .form-control[readonly] { background-color: var(--mas-d-card); }
html[data-theme="dark"] .mas-error-summary { background-color: var(--mas-d-red-bg); color: var(--mas-d-heading); }
html[data-theme="dark"] .mas-error-summary__title { color: var(--mas-d-red); }
html[data-theme="dark"] .mas-error-summary a { color: var(--mas-d-red); }
html[data-theme="dark"] .mas-field-error:not(:empty) { color: var(--mas-d-red); }
html[data-theme="dark"] .mas-applyhead { background-color: var(--mas-d-card); }
html[data-theme="dark"] .mas-applyhead__links a { color: var(--mas-d-heading); }
html[data-theme="dark"] .mas-applyhead__links a:hover { color: var(--mas-d-red); }
html[data-theme="dark"] .mas-applyhead__links .fa { color: var(--mas-d-link); }
html[data-theme="dark"] .mas-applyintro__eyebrow { color: var(--mas-d-red); }
html[data-theme="dark"] .mas-applynav ol a { color: var(--mas-d-heading); }
html[data-theme="dark"] .mas-applynav ol a::before { color: var(--mas-d-link); }
html[data-theme="dark"] .mas-applynav ol a:hover { background-color: var(--mas-d-card); color: var(--mas-d-red); }
html[data-theme="dark"] .mas-applynav__help a:focus-visible { outline-color: var(--mas-d-amber-border); }
@media (max-width: 991.98px) {
	html[data-theme="dark"] .mas-applynav ol a { background-color: var(--mas-d-card); }
}
html[data-theme="dark"] .mas-applysection { background-color: var(--mas-d-card); }
html[data-theme="dark"] .mas-applysection .table thead th { color: var(--mas-d-heading); }
html[data-theme="dark"] .mas-applysubmit .btn:focus-visible { outline-color: var(--mas-d-amber-border); }
html[data-theme="dark"] .mas-verifyform { background-color: var(--mas-d-card); }
html[data-theme="dark"] .mas-verifyform .form-label { color: var(--mas-d-heading); }
html[data-theme="dark"] .mas-verifyresult,
html[data-theme="dark"] .mas-verifynone { background-color: var(--mas-d-card); }
html[data-theme="dark"] .mas-verifyresult__badge { background-color: var(--mas-d-green-bg); color: var(--mas-d-green); }
html[data-theme="dark"] .mas-verifyresult__note { color: var(--mas-d-text); }
html[data-theme="dark"] .mas-verifyresult__list dt { color: var(--mas-d-text); }
html[data-theme="dark"] .mas-verifyresult__list dd { color: var(--mas-d-heading); }
html[data-theme="dark"] .mas-verifynone__title { color: var(--mas-d-red); }
html[data-theme="dark"] .mas-theme-toggle { color: var(--mas-d-heading); }
html[data-theme="dark"] .mas-theme-toggle svg { color: var(--mas-d-link); }