/* ============================================================
   Hello Kitty téma – "Norbi 😺" mód
   Finom minta, olvasható mezők, rózsaszín árnyalatok
   ============================================================ */

html.hellokitty body.hellokitty {
  --bg: #ffeef6;
  --panel: rgba(255,255,255,0.92);
  --text: #2b1e26;
  --muted: #a77895;
  --accent: #ff6fa5;
  --ok: #ff8fbf;
  --warn: #ffb6c1;
  --err: #ff3366;
  --border: #f3aac8;
  background: var(--bg)
              url("/assets/kitty_pattern_orig.png")
              repeat center center;
  background-size: 400px auto;
  color: var(--text);
  font-family: "Comic Sans MS", "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------
   Kártyák, dobozok
   ------------------------------------------------------------ */
html.hellokitty body.hellokitty .card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  box-shadow: 0 2px 6px rgba(255,105,180,0.25);
}

/* ------------------------------------------------------------
   Gombok
   ------------------------------------------------------------ */
html.hellokitty body.hellokitty .btn {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
html.hellokitty body.hellokitty .btn.secondary {
  background: rgba(255,255,255,0.85);
  color: var(--text);
  border-color: var(--border);
}

/* ------------------------------------------------------------
   Input / textarea / select – olvasható és kontrasztos
   ------------------------------------------------------------ */
html.hellokitty body.hellokitty input[type="text"],
html.hellokitty body.hellokitty input[type="password"],
html.hellokitty body.hellokitty input[type="email"],
html.hellokitty body.hellokitty input[type="tel"],
html.hellokitty body.hellokitty textarea,
html.hellokitty body.hellokitty select {
  color: var(--text);
  caret-color: var(--accent);
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

/* placeholder szöveg */
html.hellokitty body.hellokitty input::placeholder,
html.hellokitty body.hellokitty textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* fókusz – rózsaszín keret + enyhe fény */
html.hellokitty body.hellokitty input:focus,
html.hellokitty body.hellokitty textarea:focus,
html.hellokitty body.hellokitty select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,111,165,0.25);
}

/* ------------------------------------------------------------
   LED és linkek – Kitty módhoz illő árnyalatok
   ------------------------------------------------------------ */
html.hellokitty body.hellokitty .led {
  border-color: var(--border);
  color: var(--text);
}
html.hellokitty body.hellokitty .led i {
  background: var(--accent);
}
html.hellokitty body.hellokitty .led.ok i {
  background: #ff91bc;
}
html.hellokitty body.hellokitty .led.err i {
  background: #ff3366;
}

/* linkek */
html.hellokitty body.hellokitty a {
  color: var(--accent);
}
html.hellokitty body.hellokitty a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------
   Fejléc / lenyíló menük – olvasható háttérrel
   ------------------------------------------------------------ */
html.hellokitty body.hellokitty header {
  background: rgba(255,255,255,0.9);
  border-bottom: 1px solid var(--border);
}
html.hellokitty body.hellokitty .dropbtn,
html.hellokitty body.hellokitty .dropdown-content a,
html.hellokitty body.hellokitty .dropdown-content button {
  color: var(--text) !important;
}
html.hellokitty body.hellokitty .dropdown-content {
  background: rgba(255,255,255,0.97);
  border-color: var(--border);
}
html.hellokitty body.hellokitty .dropdown-content a:hover,
html.hellokitty body.hellokitty .dropdown-content button:hover {
  background: rgba(255,182,193,0.25);
}

/* ------------------------------------------------------------
   Táblázatok, flash üzenetek
   ------------------------------------------------------------ */
html.hellokitty body.hellokitty table {
  color: var(--text);
}
html.hellokitty body.hellokitty th {
  background: rgba(255,255,255,0.7);
  color: var(--text);
}
html.hellokitty body.hellokitty .flash.ok {
  background: rgba(255,111,165,0.15);
  border-color: rgba(255,111,165,0.5);
}
html.hellokitty body.hellokitty .flash.err {
  background: rgba(255,51,102,0.15);
  border-color: rgba(255,51,102,0.5);
}