/* DHA source-site overrides (copied from the inline styles on www.applicantservices.com/dha) layered on
   theme.css, which is AS-Web's "default" theme bundle (Bootstrap 4). No inline styles anywhere: the
   Content-Security-Policy only allows this file and theme.css. */

:root {
    --dha-navy: #242B64;
    --dha-maroon: #582831;
}

.text-primary { color: var(--dha-navy) !important; }
.bg-primary { background-color: var(--dha-navy) !important; }
.btn-primary { background-color: var(--dha-navy) !important; border-color: var(--dha-navy) !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--dha-maroon) !important; border-color: var(--dha-maroon) !important; }
.btn-primary:disabled { opacity: .5; }
.btn-outline-primary { color: var(--dha-navy); border-color: var(--dha-navy); }
.btn-outline-primary:hover { background-color: var(--dha-navy); color: #fff; }

/* Footer flush with the bottom of the window on short pages: body is a column, main takes the slack.
   theme.css gives .content-wrapper a fixed 768px min-height, which is what left the footer floating. */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; }
body > footer { flex-shrink: 0; }
.content-wrapper { min-height: 0; padding-top: 1.5rem; }

/* The hero banner sits flush under the nav bar, as on the main site. */
.content-wrapper > .banner:first-child { margin-top: -1.5rem; }

.header-link { vertical-align: baseline; border: 0; }

.source-site-logo { height: 70px; }
.powered-by { width: 100%; max-width: 330px; height: auto; }
.site-nav-title { color: #fff; font-weight: 600; font-size: 1.05rem; }

.banner { width: 100%; height: auto; display: block; margin-bottom: 1.5rem; }

.step { max-width: 900px; }
.step h1, .step h2 { color: var(--dha-navy); }

.note {
    border-top: 1px solid #D9DBE3;
    border-bottom: 1px solid #D9DBE3;
    padding: 16px 0;
    margin: 16px 0;
}

/* ---- signature pad: a 4:1 box, the same proportions as the FD-258 applicant signature field ---- */
.sig-pad {
    position: relative;
    width: 100%;
    padding-top: 25%;               /* 4:1 */
    border: 2px solid var(--dha-navy);
    border-radius: 4px;
    background: #fff;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.sig-pad canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    touch-action: none;
    cursor: crosshair;
}
.sig-pad .baseline {
    position: absolute;
    left: 5%; right: 5%; top: 74%;
    border-bottom: 1px solid #aab;
    pointer-events: none;
}
.sig-pad .x-mark {
    position: absolute;
    left: 2%; top: 58%;
    color: #99a;
    font-size: 1.4rem;
    line-height: 1;
    pointer-events: none;
}

.pad-actions { display: flex; gap: 12px; margin-top: 12px; }
.pad-actions .btn { min-width: 120px; min-height: 44px; }

/* ---- preview of the FD-258 applicant signature field: a flat line (13.5:1, CardField) ---- */
.fd258-field {
    max-width: 760px;
    border: 1px solid #333;
    background: #fff;
    padding: 4px 6px 2px;
    margin: 12px 0;
}
.fd258-field img { display: block; width: 100%; height: auto; }
.fd258-field .label {
    border-top: 1px solid #333;
    font-size: .65rem;
    letter-spacing: .03em;
    padding-top: 2px;
    color: #333;
}

.qr { width: 160px; height: 160px; image-rendering: pixelated; display: block; margin-bottom: 8px; }

/* Desktop "how do you want to sign" choices: side by side when there's room, stacked otherwise. */
.device-options { display: flex; flex-wrap: wrap; gap: 16px; }
.device-option {
    flex: 1 1 220px;
    border: 1px solid #D9DBE3;
    border-radius: 6px;
    padding: 16px;
    background: #fff;
}
.device-option-title { font-weight: 600; color: var(--dha-navy); margin-bottom: 10px; }
.device-option .form-control { max-width: 240px; }
.sms-ok { color: #1e7e34; }
.sms-error { color: #b00020; }

.back-link { color: var(--dha-navy); font-size: .95rem; margin-bottom: 6px; }
.back-link:hover { color: var(--dha-maroon); }

.rotate-hint { display: none; }
@media (pointer: coarse) and (orientation: portrait) {
    .rotate-hint { display: inline; }
}

/* ---- admin ---- */
.admin-table { font-size: .85rem; }
.admin-table td, .admin-table th { vertical-align: middle; }
/* One image per row: the signature as it prints in the card's box (CardField.Preview, 1206 x 120). */
.admin-table .thumb-card { display: block; width: 320px; height: auto; aspect-ratio: 1206 / 120; border: 1px solid #ccc; background: #fff; }
.admin-table .tids { max-width: 160px; word-break: break-all; }
.admin-table .err { color: #b00020; max-width: 220px; }
.status-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .75rem; background: #e9ecef; }
.status-Submitted { background: #fff3cd; }
.status-Approved { background: #d4edda; }
.status-Rejected, .status-EmailFailed { background: #f8d7da; }
.admin-table .sort-button { background: none; border: 0; padding: 0; font-weight: 600; color: inherit; white-space: nowrap; }
.admin-table .sort-button:hover, .admin-table .sort-button:focus { color: var(--dha-navy); text-decoration: underline; }
.admin-table .sort-button::after { content: " \2195"; color: #b0b4c3; font-weight: 400; }
.admin-table th[aria-sort="ascending"] .sort-button::after { content: " \25B2"; color: var(--dha-navy); }
.admin-table th[aria-sort="descending"] .sort-button::after { content: " \25BC"; color: var(--dha-navy); }
.admin-table .filter-row th { font-weight: 400; padding-top: 0; }
.admin-table .filter-row .form-control { min-width: 90px; font-size: .8rem; }
.tms-badge { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: .7rem; background: #e9ecef; white-space: nowrap; }
.tms-Attached, .tms-HadSignature { background: #d4edda; }
.tms-Failed, .tms-NotFound { background: #f8d7da; }
.quality-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .75rem; white-space: nowrap; background: #e9ecef; }
.quality-Good { background: #d4edda; }
.quality-Fair { background: #fff3cd; }
.quality-Check { background: #f8d7da; }
.admin-table tr.selectable { cursor: pointer; }
.admin-table tr.row-selected > td { background-color: #dfe6f7; }
.bulk-bar { position: sticky; top: 0; z-index: 2; background: #fff; padding: 6px 0; }
.counts a { margin-right: 12px; }
.inline-form { display: inline; }
.reject-form select, .reject-form input { max-width: 200px; display: inline-block; }