/* ============================================================
   Seafare SBM — login + reset pages
   Self-contained: tokens duplicated locally because login pages
   may render before dashboard.main.css. Keep minimal.
   ============================================================ */

:root {
  --c-bg: #ffffff;
  --c-surface: #fafafa;
  --c-border: #e5e7eb;
  --c-border-strong: #d1d5db;
  --c-text: #111827;
  --c-text-soft: #374151;
  --c-muted: #6b7280;
  --c-accent: #1f7ab8;
  --c-accent-strong: #0f3a5b;
  --c-accent-soft: #e7f1f9;
  --c-accent-hover: #1a6ba1;
  --c-danger: #b91c1c;
  --c-danger-soft: #fef2f2;
  --ff-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px;
  --r-md: 6px; --r-lg: 8px;
  --shadow-pop: 0 4px 12px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
  background: linear-gradient(180deg, #f5f8fb 0%, #e7eef5 100%);
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Center the logo + card vertically in the viewport so the login screen
   reads as a focused composition rather than a card stranded in a sea of
   empty grey. min-height keeps the page scrollable on tiny viewports. */
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 24px 0;
  box-sizing: border-box;
}

#logo {
  width: 380px;
  margin: 0 auto 24px;
  text-align: center;
  position: relative;
}
#logo img {
  max-width: 220px;
  height: auto;
  margin: 0 auto;
  margin-top: 0;
  display: block;
}

#loginbox,
#resetbox {
  width: 380px;
  height: auto;
  margin: 0 auto;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden !important;
  position: relative;
  text-align: left;
}

#loginbox form,
#resetbox form {
  position: static;
  padding: 0;
  margin: 0;
  width: auto;
  height: auto;
}

#loginbox p,
#resetbox p {
  margin: 0;
  padding: 16px 24px 0;
  text-align: left;
  color: var(--c-text-soft);
}
#loginbox p:first-of-type,
#resetbox p:first-of-type {
  padding-top: 24px;
  font-weight: 500;
}

/* Clean break between intro and fields — kill the explicit <br> */
#loginbox form br,
#resetbox form br { display: none; }

/* Control-group / controls wrapping in Bootstrap 2 form */
#loginbox .control-group,
#resetbox .control-group {
  padding: 0 24px;
  margin: 12px 0 0;
}
#loginbox .controls,
#resetbox .controls {
  margin: 0;
  padding: 0;
}

/* Input-prepend was Bootstrap 2's icon-attachment widget. Strip its
   chrome and let the bare input fill the row. The icon span stays in
   the DOM (server-rendered) but is hidden — no information is lost. */
#loginbox .input-prepend,
#resetbox .input-prepend {
  display: block;
  margin: 0;
  position: static;
  font-size: 0;        /* collapse whitespace between span and input */
}
#loginbox .input-prepend .add-on,
#resetbox .input-prepend .add-on {
  display: none;
}
#loginbox .input-prepend > input,
#resetbox .input-prepend > input {
  border-radius: var(--r-md);
  margin: 0;
  font-size: var(--fs-md);
}

#loginbox label,
#resetbox label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-soft);
  margin: 12px 0 4px;
}

#loginbox input[type="text"],
#loginbox input[type="password"],
#loginbox input[type="email"],
#resetbox input[type="text"],
#resetbox input[type="email"],
#loginbox input,
#resetbox input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  font: var(--fs-md) / 1 var(--ff-sans);
  color: var(--c-text);
  background: var(--c-bg);
  transition: border-color 80ms ease, box-shadow 80ms ease;
}
#loginbox input:focus,
#resetbox input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
#loginbox input::placeholder,
#resetbox input::placeholder { color: var(--c-muted); }

#loginbox .form-actions,
#resetbox .form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px 20px;
  margin: 16px 0 0;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
}
#loginbox .form-actions .pull-left,
#resetbox .form-actions .pull-left {
  margin-right: auto;
  margin-top: 0;
}
#loginbox .form-actions a:not(.btn),
#resetbox .form-actions a:not(.btn) {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  text-decoration: none;
}
#loginbox .form-actions a:not(.btn):hover,
#resetbox .form-actions a:not(.btn):hover {
  color: var(--c-accent);
}

/* Secondary button (default .btn without .btn-primary) — white/grey */
#loginbox .btn,
#resetbox .btn,
#loginbox button,
#resetbox button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border-strong);
  background: var(--c-bg);
  color: var(--c-text-soft);
  font: 600 var(--fs-base) / 1 var(--ff-sans);
  cursor: pointer;
  text-shadow: none;
  background-image: none;
  box-shadow: none;
  transition: background 80ms ease, border-color 80ms ease, color 80ms ease;
  width: auto;
  text-decoration: none;
}
#loginbox .btn:hover,
#resetbox .btn:hover,
#loginbox button:hover,
#resetbox button:hover {
  background: var(--c-surface-2);
  border-color: var(--c-border-strong);
  color: var(--c-text);
  text-decoration: none;
}

/* Primary button (.btn-primary or submit) — ocean */
#loginbox .btn.btn-primary,
#resetbox .btn.btn-primary,
#loginbox input[type="submit"],
#resetbox input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-accent);
  background: var(--c-accent);
  color: #fff;
  font: 600 var(--fs-base) / 1 var(--ff-sans);
  cursor: pointer;
  text-shadow: none;
  background-image: none;
  box-shadow: none;
  transition: background 80ms ease, border-color 80ms ease;
  width: auto;
}
#loginbox .btn.btn-primary:hover,
#resetbox .btn.btn-primary:hover,
#loginbox input[type="submit"]:hover,
#resetbox input[type="submit"]:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  color: #fff;
}

/* Error / status messages — page-level (sibling to #loginbox / #resetbox) */
body > .alert,
body > .errormessage,
.alert.alert-error,
.alert.alert-success,
.alert.alert-warning,
.alert.alert-info {
  width: 380px;
  max-width: 92%;
  box-sizing: border-box;
  margin: 8px auto 16px;
  padding: 10px 14px;
  background: var(--c-danger-soft);
  border: 1px solid color-mix(in srgb, var(--c-danger) 25%, transparent);
  border-radius: var(--r-md);
  color: var(--c-danger);
  font-size: var(--fs-sm);
  text-align: center;
}
.alert.alert-success {
  background: #ecfdf5;
  border-color: color-mix(in srgb, #047857 25%, transparent);
  color: #047857;
}
.alert.alert-warning {
  background: #fffbeb;
  border-color: color-mix(in srgb, #b45309 25%, transparent);
  color: #b45309;
}
.alert.alert-info {
  background: var(--c-accent-soft);
  border-color: color-mix(in srgb, var(--c-accent) 25%, transparent);
  color: var(--c-accent-strong);
}
.alert center, .alert > center { text-align: inherit; }

@media (max-width: 480px) {
  #logo,
  #loginbox,
  #resetbox { width: 92%; }
  #logo img { max-width: 70%; }
}