/* Global styles for J4.Verify (verify.cralog.com).
   Theme variables --vfy-* are defined in Components/App.razor on
   :root (dark default) and html.theme-light (overrides). Reading
   them here means a flip of the .theme-light class on <html>
   cascades through every rule below. #3516 */

html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--vfy-surface-0);
    color: var(--vfy-text-1);
    /* Hint to the browser so native form controls / scrollbars adapt
       to whichever theme is active. */
    color-scheme: dark light;
}

a, .btn-link {
    color: var(--vfy-primary);
}

a:visited {
    color: var(--vfy-primary);
}

a:hover, a:focus {
    color: var(--vfy-primary-hover);
}

.btn-primary {
    /* Was a hard-coded #fff, which is 2.35:1 on the orange background and 1.78:1 on the
       hover — the label of the only two buttons in the app, failing for every visitor on
       both themes (unlike the link colour, this was not hidden behind the theme toggle).
       :focus adds only a box-shadow, so keyboard users got the worst state of all.
       --vfy-on-primary is per-theme because the background follows --vfy-primary. */
    color: var(--vfy-on-primary);
    background-color: var(--vfy-primary);
    border-color: var(--vfy-primary);
    /* Bootstrap's .btn:disabled paints via these vars; without the override a
       loading btn-primary flips to stock Bootstrap blue (#0d6efd). #3889 */
    --bs-btn-disabled-color: var(--vfy-on-primary);
    --bs-btn-disabled-bg: var(--vfy-primary);
    --bs-btn-disabled-border-color: var(--vfy-primary);
}

/* btn-secondary only ever renders disabled in this app (the locked
   "Verify IMO" state) — theme it as a muted chip matching the disabled
   input beside it, on both themes. #3889 */
.btn-secondary {
    --bs-btn-disabled-color: var(--vfy-text-2);
    --bs-btn-disabled-bg: var(--vfy-surface-2);
    --bs-btn-disabled-border-color: var(--vfy-border);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: var(--vfy-on-primary);
    background-color: var(--vfy-primary-hover);
    border-color: var(--vfy-primary-hover);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--vfy-surface-0), 0 0 0 0.25rem #258cfb;
}

/* btn-light is near-white by default, which disappears against the
   light-theme white page background. In light mode, give it a visible
   border and a slightly darker surface so the "Start over" button is
   actually readable. Dark mode is left alone — white-on-dark already
   has plenty of contrast. */
html.theme-light .btn-light {
    background-color: var(--vfy-surface-2);
    border-color: rgba(0, 0, 0, .25);
    color: var(--vfy-text-1);
}

html.theme-light .btn-light:hover,
html.theme-light .btn-light:focus,
html.theme-light .btn-light:active {
    background-color: #dee2e6;
    border-color: rgba(0, 0, 0, .4);
    color: var(--vfy-text-1);
}

/* Bootstrap form controls — make them honor the theme surface
   instead of always painting white. */
.form-control,
.form-select {
    background-color: var(--vfy-surface-1);
    color: var(--vfy-text-1);
    border-color: var(--vfy-border);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--vfy-surface-1);
    color: var(--vfy-text-1);
    border-color: var(--vfy-primary);
}

.form-control::placeholder {
    color: var(--vfy-text-2);
    opacity: 0.6;
}

/* Disabled/locked state (post-verify lock until "Start over"). Bootstrap 5.3's
   .form-control:disabled is more specific than the themed .form-control rule
   above and paints its light-theme --bs-secondary-bg (#e9ecef) — a near-white
   box with white --vfy-text-1 text on the dark theme. Re-state the tokens at
   the same specificity; both themes follow the --vfy-* flip. #3889 */
.form-control:disabled,
.form-select:disabled {
    background-color: var(--vfy-surface-2);
    color: var(--vfy-text-2);
    border-color: var(--vfy-border);
    opacity: .6;
    cursor: not-allowed;
}

.content {
    padding-top: 1.1rem;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

h1:focus {
    outline: none;
}

/* The Blazor template's `.valid.modified` green outline is deliberately gone. This app has no
   DataAnnotationsValidator — validation is manual, in InputValidator, after submit — so EditForm
   marked every touched field "valid" and the input turned green the instant you typed, including
   for input the app was about to reject. A validity affordance that is right by accident is worse
   than none.

   The class is driven by _validationError, the same field that produces the visible message, so
   the outline and the message cannot disagree. (aria-invalid cannot be used: InputBase owns that
   attribute and derives it from the EditContext, which has no validator here.) Colours come from
   the theme tokens; the previous hardcoded #e50000 did not follow the light/dark switch. */
.vfy-input-invalid {
    outline: 1px solid var(--vfy-bad);
}

.validation-message {
    color: var(--vfy-bad);
}

/* The Blazor template's .blazor-error-boundary styling is gone with it: this app registers no
   ErrorBoundary component anywhere, so the markup it styles is never rendered. Note the data:
   URI it carried is NOT what justifies `data:` in the CSP img-src — the technician photo does,
   arriving from J4.Api as a base64 data URL. */

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--vfy-text-2);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--vfy-primary);
}

/* Status text. Replaces Bootstrap's .text-success/.text-warning/.text-danger, which set
   fixed colours with !important and so cannot be re-themed through a variable. Bootstrap
   5.3's *-emphasis variants are not an option either: they resolve via data-bs-theme,
   which this app deliberately does not use (it has its own html.theme-light switch). */
.vfy-ok   { color: var(--vfy-ok); }
.vfy-warn { color: var(--vfy-warn); }
.vfy-bad  { color: var(--vfy-bad); }

/* Ensure verify forms fit on small screens */
.verify-form {
    max-width: 518px;
    width: 100%;
}

.verify-form .form-control,
.verify-form button {
    width: 100%;
}

.survey-label {
    width: 80px;
    display: inline-block;
}

.survey-note {
    font-size: 0.8em;
}

/* Vessel details table — Bootstrap's table-dark hardcodes #212529,
   which mismatches --vfy-surface-0 in dark mode and inverts entirely
   in light mode. Override Bootstrap's table CSS vars so the table
   tracks the theme. #3516 */
.vessel-details-table {
    --bs-table-color: var(--vfy-text-1);
    --bs-table-bg: var(--vfy-surface-1);
    --bs-table-border-color: var(--vfy-border);
    --bs-table-striped-color: var(--vfy-text-1);
    --bs-table-striped-bg: var(--vfy-surface-2);
    --bs-table-hover-color: var(--vfy-text-1);
    --bs-table-hover-bg: var(--vfy-surface-2);
    color: var(--vfy-text-1);
    border-color: var(--vfy-border);
}

/* ─── Per-theme logo + icon swap (global, NOT scoped) ─────────
   These rules live here instead of inside MainLayout.razor.css
   because Blazor's scoped-CSS preprocessor on this project doesn't
   transform :global(...) selectors — the literal :global(...)
   ends up in J4.Verify.styles.css and browsers treat that as
   invalid CSS, silently dropping the rule. See #3516. */

/* Logo sizing — both variants are the same artwork at the same
   intrinsic size, so an identical height renders an identical box and
   the theme swap causes no horizontal layout shift (cf. homepage #3580). */
.logo-dark  { height: 72px; }
.logo-light { height: 72px; }

/* Default state = dark theme: show .logo-dark, hide .logo-light.
   Light theme flips them via the html.theme-light override below. */
.logo-dark  { display: inline-block; }
.logo-light { display: none; }
html.theme-light .logo-dark  { display: none; }
html.theme-light .logo-light { display: inline-block; }

/* Toggle button icon: sun in dark mode (means "switch to light"),
   moon in light mode (means "switch to dark"). */
.theme-toggle .icon-sun  { display: inline-block; }
.theme-toggle .icon-moon { display: none; }
html.theme-light .theme-toggle .icon-sun  { display: none; }
html.theme-light .theme-toggle .icon-moon { display: inline-block; }