/*
 * PWD Operations Dashboard — branded login (decision D11)
 *
 * Same design tokens as board.css/driver.css (--tc/--ta/--bg/--card/--font),
 * same never-calls-wp_head() isolation reasoning as board.css itself.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: #1a1a2e;
  line-height: 1.4;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
button, input { font: inherit; color: inherit; }

:root {
  --tc: #6b0f1a;
  --ta: #f5a623;
  --bg: #f0f2f8;
  --card: #fff;
  --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 16px;
  --shadow: 0 4px 24px rgba(0,0,0,.07);
}

.l-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.l-card {
  width: 100%; max-width: 360px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px;
}
.l-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; }
.l-brand-logo { width: 48px; height: 48px; border-radius: 12px; background: var(--tc); color: #fff; display: flex; align-items: center; justify-content: center; }
.l-brand-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.l-brand-logo i, .l-brand-logo svg { width: 26px; height: 26px; }
.l-brand-name { font-size: 15px; font-weight: 700; text-align: center; }

.l-error {
  background: #fbe9e9; color: #a1263a;
  border-radius: 10px; padding: 10px 14px;
  font-size: 13px; font-weight: 600;
  margin-bottom: 16px;
}

.l-form { display: flex; flex-direction: column; gap: 6px; }
.l-form label { font-size: 12px; font-weight: 600; color: #666; margin-top: 10px; }
.l-form input[type="text"],
.l-form input[type="password"] {
  border: 1px solid #ddd; border-radius: 10px;
  padding: 11px 13px; font-size: 14px;
  background: #fafafa;
}
.l-form input[type="text"]:focus,
.l-form input[type="password"]:focus {
  outline: none; border-color: var(--tc); background: #fff;
}
.l-remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: #555;
  margin-top: 14px; cursor: pointer;
}
.l-remember input { width: auto; }
.l-form button {
  margin-top: 22px;
  background: var(--tc); color: #fff; border: none;
  border-radius: 30px; padding: 13px; font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.l-form button:hover { opacity: .92; }

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