/* ============================================================
   Custom WordPress Login Page — sysadmin.ecommerce
   Terminal-style, matches the dark theme design tokens.
   ============================================================ */

/* ── Background & body ─────────────────────────── */
body.login {
  background: oklch(0.13 0.005 160); /* --background */
  color: oklch(0.9 0.01 150);        /* --foreground */
  font-family: 'Geist Mono', 'Geist', monospace, sans-serif;
}

body.login a {
  color: oklch(0.78 0.17 150); /* --primary */
  text-decoration: none;
  transition: opacity 0.2s;
}

body.login a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ── Login container — card ────────────────────── */
#login {
  width: 380px;
  max-width: 90vw;
  padding: 2.5rem 2rem;
  margin: 6rem auto 2rem;
  background: oklch(0.19 0.006 160);    /* --card */
  border: 1px solid oklch(0.3 0.008 160); /* --border */
  border-radius: 0.25rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ── ARDNET logo replacement ──────────────────── */
.login h1 {
  margin-bottom: 1.5rem;
}

.login h1 a {
  background-image: none !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  text-indent: 0 !important;
  font-size: 1.25rem;
  font-weight: 700;
  color: oklch(0.78 0.17 150); /* --primary */
  font-family: 'Geist Mono', monospace;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 0.5rem 0;
  line-height: 1.5;
}

.login h1 a::before {
  content: "$ ";
  color: oklch(0.82 0.14 78); /* --amber */
  font-weight: 400;
}

.login h1 a::after {
  content: "";
  display: block;
  font-size: 0.65rem;
  color: oklch(0.73 0.01 150); /* --muted-foreground */
  font-weight: 400;
  margin-top: 0.25rem;
}

/* ⚠ WordPress hides the ::after via text-indent, so use the title attribute */
.login h1 a {
  font-size: 0;
}

.login h1 a::before {
  content: "$ sysadmin.ecommerce";
  font-size: 1.25rem;
  font-weight: 700;
  color: oklch(0.78 0.17 150);
  display: block;
  text-align: center;
}

.login h1 a::after {
  content: "// Portal Klienta";
  font-size: 0.65rem;
  color: oklch(0.73 0.01 150);
  font-weight: 400;
  display: block;
  text-align: center;
  margin-top: 0.25rem;
}

/* ── Form elements ─────────────────────────────── */
.login form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 1.5rem;
}

.login label {
  color: oklch(0.73 0.01 150); /* --muted-foreground */
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
  font-family: 'Geist Mono', monospace;
}

.login input[type="text"],
.login input[type="password"] {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid oklch(0.3 0.008 160); /* --border */
  color: oklch(0.9 0.01 150);             /* --foreground */
  border-radius: 0.25rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  font-family: 'Geist Mono', monospace;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 40px;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
  border-color: oklch(0.78 0.17 150); /* --primary */
  box-shadow: 0 0 0 1px oklch(0.78 0.17 150 / 0.3);
  outline: none;
}

/* ── Submit button — terminal style ───────────── */
.login .button-primary,
.login .wp-core-ui .button-primary {
  background: oklch(0.78 0.17 150) !important; /* --primary */
  color: #000 !important;
  border: none !important;
  border-radius: 0.25rem;
  padding: 0.625rem 1.5rem;
  font-family: 'Geist Mono', monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  float: none !important;
  width: 100%;
  min-height: 42px;
  margin-top: 0.5rem;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background 0.2s, opacity 0.2s;
}

.login .button-primary:hover,
.login .button-primary:focus {
  background: oklch(0.72 0.16 150) !important;
  opacity: 0.95;
}

.login .button-primary:active {
  background: oklch(0.68 0.15 150) !important;
}

/* ── Checkbox "Remember me" ────────────────────── */
.login .forgetmenot {
  float: none;
  margin-bottom: 0.75rem;
}

.login .forgetmenot label {
  font-size: 0.75rem;
  color: oklch(0.73 0.01 150); /* --muted-foreground */
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.login input[type="checkbox"] {
  accent-color: oklch(0.78 0.17 150); /* --primary */
  border: 1px solid oklch(0.3 0.008 160);
  width: 16px;
  height: 16px;
  margin: 0;
}

/* ── Messages (errors, info) ───────────────────── */
.login #login_error,
.login .message {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-left: 3px solid oklch(0.62 0.2 25) !important; /* --destructive */
  padding: 0.75rem 1rem !important;
  margin-bottom: 1.5rem;
  font-size: 0.8125rem;
  font-family: 'Geist Mono', monospace;
  border-radius: 0 0.25rem 0.25rem 0;
  color: oklch(0.62 0.2 25) !important; /* --destructive */
}

.login .message {
  border-left-color: oklch(0.78 0.17 150) !important; /* --primary */
  background: rgba(120, 220, 120, 0.05) !important;
}

.login #login_error::before {
  content: "// BŁĄD: ";
  font-weight: 700;
}

/* ── Lost password / Back links ────────────────── */
.login #nav,
.login #backtoblog {
  text-align: center;
  padding: 0;
  margin: 0.75rem 0 0;
}

.login #nav a,
.login #backtoblog a {
  font-size: 0.75rem;
  font-family: 'Geist Mono', monospace;
  color: oklch(0.73 0.01 150); /* --muted-foreground */
}

.login #nav a:hover,
.login #backtoblog a:hover {
  color: oklch(0.78 0.17 150); /* --primary */
}

/* ── Language switcher ─────────────────────────── */
.login .language-switcher {
  text-align: center;
}

.login .language-switcher form {
  display: inline-block;
}

.login .language-switcher select {
  background: oklch(0.19 0.006 160);
  border: 1px solid oklch(0.3 0.008 160);
  color: oklch(0.73 0.01 150);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-family: 'Geist Mono', monospace;
}

/* ── Responsive ────────────────────────────────── */
@media (max-width: 480px) {
  #login {
    padding: 1.5rem 1.25rem;
    margin: 3rem auto 1rem;
  }
}