/* global styles placeholder; inline styles are in layout */

.login-screen { min-height: calc(100vh - 60px); display:flex; align-items:flex-start; justify-content:center; padding:10px 24px 24px; background: linear-gradient(180deg, var(--bg-muted) 0%, var(--bg) 100%); }
.auth-card { width:100%; max-width:422px; background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:32px; box-shadow: 0 6px 24px rgba(0,0,0,0.06); }
.brand { text-align:center; margin-bottom:16px; }
.brand img { width:72px; height:72px; margin-bottom:12px; border-radius:9999px; object-fit:cover; box-shadow: 0 0 0 3px var(--bg); outline: 2px solid var(--primary); }
.brand h2 { margin:0 0 8px; font-size:24px; }
.brand .sub { margin:0; color:var(--subtext); font-size:14px; }
.auth-form { max-width:520px; margin: 0 auto; }
.auth-form .field { margin-bottom:12px; }
.auth-form label { display:block; margin-bottom:6px; font-weight:600; font-size:14px; color:var(--subtext); }
.auth-form input { width:90%; padding:12px 16px; border:1px solid var(--border); border-radius:10px; font-size:15px; outline:none; background: var(--input-bg); color: var(--text); }
.auth-form input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(34,197,94,0.20); }
.btn-block { width:100%; }
.btn-primary { background:var(--primary); color:#fff; border:none; padding:10px 14px; border-radius:8px; font-weight:600; cursor:pointer; }
.btn-primary:hover { background:var(--primary-hover); }
.btn:disabled, .btn[disabled] { cursor:not-allowed; opacity:0.7; }
.btn-primary:disabled, .btn-primary[disabled] { background:#9ca3af; color:#ffffff; }
.alert-error { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; padding:10px 12px; border-radius:8px; margin-bottom:12px; }
.auth-form .actions { display:flex; justify-content:center; }
.auth-form .actions .btn { width:60%; min-width: 0; }
/* date input tweaks */
input[type="date"] {
  min-width: 120px;
  max-width: 280px;
  padding: 8px 10px;
}
/* Try to invert or lighten the calendar icon in dark mode */
.dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.8);
}