/* ==========================================================================
   Sign-in screen — starting point, adapt per project

   Split layout: dark brand panel holding the logo + white form card. A light
   logo variant rarely exists, so the panel stays dark at every breakpoint —
   on narrow screens it becomes a slim bar above the form rather than being
   hidden, which would drop the branding entirely.

   Pair with markup that keeps the app's existing form field names, action URL
   and CSRF token, and that does NOT echo the password back into `value`.
   ========================================================================== */
:root {
  --brand-500: #0f9d76;
  --brand-600: #0b7f5f;
  --brand-700: #08624a;
  --text:   #1e2432;
  --text-2: #5a6274;
  --text-3: #8a91a4;
  --border: #e6e8ef;
  --danger: #ef4444;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: #07150f;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

@media (min-width: 900px) {
  body { grid-template-columns: 1fr 480px; grid-template-rows: 1fr; }
}

/* --- Brand panel -------------------------------------------------------
   Holds the logo and nothing else. The logo artwork is white-on-transparent,
   so it only ever sits on this dark surface — on narrow screens the panel
   becomes a slim bar above the form rather than disappearing. */
.brand-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 15% 10%,  rgba(16, 185, 129, .42), transparent 60%),
    radial-gradient(800px 700px at 85% 85%,  rgba(20, 184, 166, .30), transparent 60%),
    radial-gradient(700px 500px at 60% 40%,  rgba(251, 191, 36, .18), transparent 60%),
    linear-gradient(160deg, #07150f 0%, #102420 100%);
}
@media (min-width: 900px) { .brand-panel { padding: 56px; } }

/* Subtle grid overlay */
.brand-panel::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 40% 40%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 40% 40%, #000 35%, transparent 78%);
  pointer-events: none;
}

.brand-panel > * { position: relative; z-index: 1; }

.bp-logo {
  display: block;
  width: auto; max-width: 78%;
  height: 54px;
  object-fit: contain;
}
@media (min-width: 900px) { .bp-logo { height: 104px; max-width: 62%; } }

/* --- Right: form ------------------------------------------------------- */
.form-panel {
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 28px;
}
.form-card { width: 100%; max-width: 360px; }

.form-card h2 { font-size: 24px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 6px; }
.form-card .sub { color: var(--text-3); font-size: 13.5px; margin: 0 0 26px; }

.field { margin-bottom: 15px; }
.field label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--text-2); margin-bottom: 6px;
}
.field .wrap { position: relative; }
.field .wrap svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-3); pointer-events: none;
}
.field input {
  width: 100%; height: 44px;
  padding: 0 13px 0 39px;
  font-size: 14px; font-family: inherit; color: var(--text);
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: 11px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.field input::placeholder { color: #b3b9c7; }
.field input:focus {
  outline: none; background: #fff;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(15, 157, 118, .16);
}

.toggle-pw {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; background: transparent;
  border-radius: 8px; cursor: pointer; color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.toggle-pw:hover { background: #f1f3f7; color: var(--text-2); }
.toggle-pw svg { position: static; transform: none; }

.btn-submit {
  width: 100%; height: 44px; margin-top: 8px;
  border: 0; border-radius: 11px;
  background: var(--brand-600); color: #fff;
  font-family: inherit; font-size: 14.5px; font-weight: 650;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 8px 20px -8px rgba(79, 70, 229, .7);
  transition: background .15s var(--ease), transform .06s var(--ease), box-shadow .15s var(--ease);
}
.btn-submit:hover { background: var(--brand-700); }
.btn-submit:active { transform: translateY(1px); }
.btn-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15, 157, 118, .32); }

.alert {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px; margin-bottom: 18px;
  border-radius: 10px;
  font-size: 13px; line-height: 1.45;
}
.alert svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }
.alert-error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.alert-success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }

.form-foot {
  margin-top: 28px; padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-3); text-align: center; line-height: 1.6;
}
.form-foot a { color: var(--text-2); font-weight: 600; text-decoration: none; }
.form-foot a:hover { color: var(--brand-600); }

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

/* ==========================================================================
   App-specific: GreenNub Solar CRM
   ========================================================================== */

/* Brand panel wordmark. The only brand asset in the repo is a 64x64 mark
   (assets/img/favicon.png), so the product name is set in type beside it
   rather than relying on a wordmark image that doesn't exist. */
.bp-title {
  color: #fff;
  font-size: 30px; font-weight: 700; letter-spacing: -.025em;
  margin: 18px 0 10px;
}
.bp-sub {
  color: rgba(255, 255, 255, .62);
  font-size: 14.5px; line-height: 1.6;
  margin: 0; max-width: 42ch;
}
@media (max-width: 899px) {
  /* Slim bar above the form rather than hiding the panel, which would drop
     the branding entirely on phones. */
  .brand-panel { padding: 20px 24px; }
  .bp-title { font-size: 21px; margin: 10px 0 4px; }
  .bp-sub { display: none; }
  .bp-logo { height: 40px; }
}

/* The password toggle is a text label ("Show"/"Hide"), not the icon button the
   base sheet assumes -- a 32px square would clip it. */
.toggle-pw {
  width: auto; height: 30px;
  padding: 0 10px;
  font: 600 12px/1 inherit;
  letter-spacing: .01em;
  color: var(--text-3);
}
.field input[type="password"],
.field input[type="text"]#login_password { padding-right: 68px; }

/* The mark is now a sun (assets/img/logo-sun.svg) drawn to sit directly on the
   dark panel -- no white tile behind it, which the previous multi-coloured
   favicon needed. Amber on deep green is the intended contrast, so it is left
   to stand on its own. */
.bp-logo {
  height: auto; width: 84px; max-width: none;
  padding: 0; background: none; border-radius: 0;
  filter: drop-shadow(0 8px 22px rgba(251, 191, 36, .35));
}
@media (max-width: 899px) {
  .bp-logo { width: 46px; }
}