/* ==========================================================================
   First Watch — shared login appearance
   ==========================================================================
   One login look across every First Watch product: the platform, this admin
   dashboard, and the provisioning console. Self-contained on purpose — it
   carries the design tokens it needs rather than importing the platform's
   stylesheet tree, so each product can drop in this single file.

   Keep visually in step with the platform's login (login.html in
   First-Watch-Platform-Cloud). Structural class names match that page:
   .login-container, .login-header, .login-logo, .login-title,
   .login-subtitle, .form-group, .form-label, .form-input, .login-btn.
   ========================================================================== */

/* Fonts served locally — no CDN dependency, works offline and on-prem.
   Orbitron is the display face used for the FIRST WATCH wordmark; Inter is
   the body face. Both mirror the platform's /assets/fonts tree. */
@font-face {
  font-family: 'Orbitron';
  src: url('../fonts/orbitron/orbitron-bold.woff2') format('woff2');
  font-weight: 700 900;
  font-display: swap;
}

@font-face {
  font-family: 'Orbitron';
  src: url('../fonts/orbitron/orbitron-semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Orbitron';
  src: url('../fonts/orbitron/orbitron-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/inter-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/inter-medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/inter-semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/inter-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --fw-bg-primary: #0f1419;
  --fw-bg-secondary: #16191e;
  --fw-text-primary: #e4e6eb;
  --fw-text-secondary: #9ca3af;
  --fw-text-tertiary: #64748b;
  --fw-border: #2d3139;
  --fw-border-strong: #484f58;
  --fw-brand: #3b82f6;
  --fw-brand-hover: #2563eb;
  --fw-danger: #ef4444;
  --fw-danger-bg: rgba(239, 68, 68, 0.15);
  --fw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fw-radius: 8px;
  --fw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

:root[data-theme='light'] {
  --fw-bg-primary: #f8fafc;
  --fw-bg-secondary: #ffffff;
  --fw-text-primary: #1e293b;
  --fw-text-secondary: #64748b;
  --fw-text-tertiary: #94a3b8;
  --fw-border: #e2e8f0;
  --fw-border-strong: #cbd5e1;
  --fw-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.1);
}

/* Explicit dark — the platform writes data-theme="dark" rather than removing
   the attribute, so these must be restated to win over any light state. */
:root[data-theme='dark'] {
  --fw-bg-primary: #0f1419;
  --fw-bg-secondary: #16191e;
  --fw-text-primary: #e4e6eb;
  --fw-text-secondary: #9ca3af;
  --fw-text-tertiary: #64748b;
  --fw-border: #2d3139;
  --fw-border-strong: #484f58;
  --fw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

body {
  font-family: var(--fw-font);
  background: var(--fw-bg-primary);
  color: var(--fw-text-primary);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.login-container {
  width: 100%;
  max-width: 400px;
  background: var(--fw-bg-secondary);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius);
  padding: 32px;
  box-shadow: var(--fw-shadow);
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto 12px;
}

.login-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Matches the platform's gradient wordmark */
.login-title {
  font-family: 'Orbitron', var(--fw-font);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 40%, #2563eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(30, 58, 138, 0.4));
}

:root[data-theme='light'] .login-title {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.login-subtitle {
  font-size: 13px;
  color: var(--fw-text-secondary);
  margin: 0;
}

.login-org {
  font-size: 13px;
  color: var(--fw-text-tertiary);
  margin-top: 3px;
  letter-spacing: 0.02em;
}

.form-group {
  margin-bottom: 15px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--fw-text-secondary);
  margin-bottom: 6px;
}

.form-input,
.form-select {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--fw-text-primary);
  background: var(--fw-bg-primary);
  border: 1px solid var(--fw-border-strong);
  border-radius: 6px;
  box-sizing: border-box;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--fw-brand);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.form-input::placeholder {
  color: var(--fw-text-tertiary);
}

.password-input-wrap {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--fw-text-tertiary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

.password-toggle:hover {
  color: var(--fw-text-secondary);
}

.login-btn,
.btn-block {
  width: 100%;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--fw-brand);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms ease;
  margin-top: 6px;
}

.login-btn:hover:not(:disabled),
.btn-block:hover:not(:disabled) {
  background: var(--fw-brand-hover);
}

.login-btn:disabled,
.btn-block:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.error-message {
  background: var(--fw-danger-bg);
  border: 1px solid var(--fw-danger);
  color: var(--fw-danger);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 15px;
}

.login-theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  background: var(--fw-bg-secondary);
  border: 1px solid var(--fw-border);
  border-radius: 6px;
  color: var(--fw-text-secondary);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-theme-toggle:hover {
  color: var(--fw-text-primary);
  border-color: var(--fw-border-strong);
}

.login-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 11px;
  color: var(--fw-text-tertiary);
}

/* Password-change modal (first login) */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 20, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 12px;
}

.modal-content {
  width: 100%;
  max-width: 400px;
  background: var(--fw-bg-secondary);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius);
  padding: 24px;
  box-shadow: var(--fw-shadow);
}

.modal-content h2 {
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--fw-text-primary);
}

.modal-content p {
  font-size: 13px;
  color: var(--fw-text-secondary);
  margin: 0 0 15px;
}