/* SnowDesk auth pages — shared styles (login + forgot password) */
:root {
  --sd-ink: #0E1A26;
  --sd-ink-2: #16293B;
  --sd-frost: #F4F8FA;
  --sd-line: #D3DFE7;
  --sd-muted: #5B6F7E;
  --sd-accent: #1B6A94;
  --sd-accent-hover: #14557A;
  --sd-ice: #BFE3F0;
}

.sd-root { font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--sd-ink); }
.sd-display { font-family: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif; letter-spacing: -0.02em; }

/* Left brand panel: deep ink with a faint snow-dot grid */
.sd-panel {
  background-color: var(--sd-ink);
  background-image: radial-gradient(circle at 1px 1px, rgba(191, 227, 240, 0.14) 1px, transparent 0);
  background-size: 24px 24px;
}

/* Right side */
.sd-surface { background: var(--sd-frost); }

.sd-label { display: block; font-size: .8125rem; font-weight: 600; color: var(--sd-ink); margin-bottom: .5rem; }

.sd-input {
  width: 100%; padding: .75rem 1rem; font-size: .9375rem; color: var(--sd-ink);
  background: #fff; border: 1px solid var(--sd-line); border-radius: .625rem;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.sd-input::placeholder { color: #9AABB8; }
.sd-input:hover { border-color: #B7C8D4; }
.sd-input:focus { border-color: var(--sd-accent); box-shadow: 0 0 0 3px rgba(27, 106, 148, .18); }
.sd-input--icon { padding-left: 2.5rem; }
.sd-input--icon-r { padding-right: 2.75rem; }

.sd-btn {
  display: flex; align-items: center; justify-content: center; width: 100%;
  padding: .8rem 1rem; font-size: .9375rem; font-weight: 600; color: #fff;
  background: var(--sd-accent); border-radius: .625rem; border: 0; cursor: pointer;
  transition: background-color .15s;
}
.sd-btn:hover { background: var(--sd-accent-hover); }
.sd-btn:focus-visible, .sd-link:focus-visible, .sd-store:focus-visible {
  outline: 2px solid var(--sd-accent); outline-offset: 2px;
}
.sd-link { color: var(--sd-accent); font-weight: 600; }
.sd-link:hover { color: var(--sd-accent-hover); text-decoration: underline; }

.sd-alert { display: flex; gap: .625rem; align-items: flex-start; padding: .75rem .875rem;
  border-radius: .625rem; font-size: .875rem; margin-bottom: 1.25rem; }
.sd-alert--error { background: #FDF0EF; border: 1px solid #F3C9C5; color: #9B2C23; }
.sd-alert--info  { background: #EAF4F9; border: 1px solid #C5DEEA; color: #14557A; }

/* Staff notice (replaces the blinking red text) */
.sd-note { display: flex; gap: .75rem; align-items: center; padding: .75rem .875rem;
  background: #fff; border: 1px solid var(--sd-line); border-radius: .625rem;
  font-size: .8125rem; color: var(--sd-muted); line-height: 1.4; }
.sd-note strong { color: var(--sd-ink); }

/* Store buttons on dark panel */
.sd-store { display: inline-flex; align-items: center; gap: .625rem; padding: .5rem .9rem;
  border: 1px solid rgba(191, 227, 240, .28); border-radius: .625rem; color: #fff;
  font-size: .875rem; font-weight: 500; transition: background-color .15s, border-color .15s; }
.sd-store:hover { background: rgba(191, 227, 240, .12); border-color: rgba(191, 227, 240, .5); }

/* Today card shown on the login panel */
.sd-card { background: var(--sd-ink-2); border: 1px solid rgba(191, 227, 240, .16); border-radius: .875rem; }
.sd-avatar { width: 2rem; height: 2rem; border-radius: 9999px; background: rgba(191, 227, 240, .16);
  color: var(--sd-ice); font-size: .75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.sd-pill { font-size: .6875rem; font-weight: 600; padding: .15rem .5rem; border-radius: 9999px;
  background: rgba(110, 231, 183, .14); color: #8FE9C4; }

/* Steps (forgot password) */
.sd-step { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; color: #8A9CA9; }
.sd-step-dot { width: 1.5rem; height: 1.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  font-size: .75rem; background: #E4ECF1; color: #7B8F9D; }
.sd-step.is-active { color: var(--sd-ink); }
.sd-step.is-active .sd-step-dot { background: var(--sd-accent); color: #fff; }
.sd-step.is-done { color: var(--sd-accent); }
.sd-step.is-done .sd-step-dot { background: var(--sd-ice); color: var(--sd-accent-hover); }
.sd-step-line { flex: 1; height: 1px; background: var(--sd-line); min-width: .75rem; }
.sd-step-line.is-done { background: var(--sd-accent); }

/* OTP boxes (8 digits, grouped 4 + 4) */
.otp-box { width: 100%; height: 3rem; text-align: center; font-size: 1.125rem; font-weight: 700; color: var(--sd-ink);
  background: #fff; border: 1px solid var(--sd-line); border-radius: .5rem; outline: none;
  transition: border-color .15s, box-shadow .15s; }
.otp-box:focus { border-color: var(--sd-accent); box-shadow: 0 0 0 3px rgba(27, 106, 148, .18); }
.otp-gap { margin-right: .5rem; }

.sd-done-badge { width: 4rem; height: 4rem; border-radius: 9999px; background: #E3F5EC; color: #1E8A5B;
  display: flex; align-items: center; justify-content: center; margin: 0 auto; }