/* login-style.css - okrojona wersja tylko dla logowania */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

/* Zmienne kolorystyczne - identyczne jak w głównej aplikacji */
:root{
  --bg:#f6f7f8; --card:#fff; --text:#111; --muted:#666;
  --border:#d7d7d9; --accent:#0078d7; --accent-alpha: rgba(0,120,215,0.12);
  --neutral:#efefef; --danger:#ff6b6b;
}
body.dark{
  --bg:#0f0f10; --card:#18181a; --text:#f2f2f2; --muted:#bdbdbd;
  --border:#2f2f30; --accent:#339cff; --accent-alpha: rgba(51,156,255,0.12);
  --neutral:#272729;
}

body {
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0; padding: 20px;
  background: var(--bg); color: var(--text);
  display: flex; 
  flex-direction: column; 
  align-items: center;
  transition: background .20s, color .20s;
}

/* Style formularzy i przycisków */
input[type="text"], input[type="password"] {
  width:100%; padding:10px 12px;
  border-radius:10px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:14px;
  transition: border-color .15s;
}
input:focus { outline:none; border-color:var(--accent); }

.button { 
  border:none; border-radius:8px; padding:8px 16px; font-weight:600; cursor:pointer; 
  font-size: 0.9rem; transition: filter .15s; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.button:hover { filter: brightness(0.95); }
.primary { background:var(--accent); color:#fff; }
.secondary { background:var(--neutral); color:var(--text); }

/* Style specyficzne dla strony logowania */
body.login-page {
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  background: var(--card);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--border);
  text-align: center;
  position: relative;
}

.login-icon { font-size: 3rem; margin-bottom: 20px; }
.login-card h1 { margin: 0 0 10px 0; font-size: 1.6rem; }
.login-card .subtitle { margin-bottom: 30px; display: block; color: var(--muted); font-size: 0.9rem; }
.login-card input { margin-bottom: 15px; }
.login-card button { margin-top: 10px; }

.login-error {
  color: var(--danger);
  background: rgba(255, 107, 107, 0.1);
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 25px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid var(--danger);
}