/*
 * hibp-check.css | Pinky Creative Studio | styl ostrzezenia HIBP
 * ---------------------------------------------------------------------------
 * Theme-aware. Ciemna baza #0B0C0E. Ikony jako inline SVG Phosphor (tarcza /
 * ostrzezenie), doklejane przez ::before z data:URI - ZERO emoji, ZERO zaleznosci.
 * Element .hibp-warn ma atrybut data-state: checking | safe | pwned | error.
 */

.hibp-warn {
  --hibp-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 10px 12px;
  font-size: 0.875rem;
  line-height: 1.4;
  border-radius: var(--hibp-radius);
  border: 1px solid transparent;
  animation: hibp-in 160ms ease-out;
}

.hibp-warn[hidden] { display: none; }

.hibp-warn::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* --- Kolory bazowe (jasny motyw) --- */
.hibp-warn[data-state="checking"] {
  color: #5b6470;
  background: #f3f4f6;
  border-color: #e5e7eb;
}
.hibp-warn[data-state="safe"] {
  color: #14733f;
  background: #e9f7ef;
  border-color: #bfe6ce;
}
.hibp-warn[data-state="pwned"] {
  color: #9b1c1c;
  background: #fdecec;
  border-color: #f5c2c2;
}
.hibp-warn[data-state="error"] {
  color: #7a5b12;
  background: #fdf6e3;
  border-color: #efe0b0;
}

/* --- Ciemny motyw (baza #0B0C0E) --- */
:root[data-theme="dark"] .hibp-warn[data-state="checking"],
@media (prefers-color-scheme: dark) {
  .hibp-warn[data-state="checking"] {
    color: #9aa4b2;
    background: #14171c;
    border-color: #262b33;
  }
  .hibp-warn[data-state="safe"] {
    color: #6ee7a8;
    background: #0f1a13;
    border-color: #1f3a29;
  }
  .hibp-warn[data-state="pwned"] {
    color: #ff9d9d;
    background: #1c0f10;
    border-color: #3a1f21;
  }
  .hibp-warn[data-state="error"] {
    color: #f0cf7a;
    background: #1a160c;
    border-color: #3a301a;
  }
  .hibp-warn { background: #0B0C0E; }
}
/* jawne nadpisanie gdy user wymusil ciemny motyw atrybutem */
:root[data-theme="dark"] .hibp-warn[data-state="checking"] { color:#9aa4b2; background:#14171c; border-color:#262b33; }
:root[data-theme="dark"] .hibp-warn[data-state="safe"]     { color:#6ee7a8; background:#0f1a13; border-color:#1f3a29; }
:root[data-theme="dark"] .hibp-warn[data-state="pwned"]    { color:#ff9d9d; background:#1c0f10; border-color:#3a1f21; }
:root[data-theme="dark"] .hibp-warn[data-state="error"]    { color:#f0cf7a; background:#1a160c; border-color:#3a301a; }

/* --- Ikony Phosphor (inline SVG, prad w data:URI) --- */
/* tarcza-checkered / shield (safe) */
.hibp-warn[data-state="safe"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="%2314733f"><path d="M208,40H48A16,16,0,0,0,32,56v58.78c0,89.61,75.82,119.34,91,124.39a15.53,15.53,0,0,0,10,0c15.2-5.05,91-34.78,91-124.39V56A16,16,0,0,0,208,40Zm-34.34,69.66-40,40a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L128,132.69l34.34-34.35a8,8,0,0,1,11.32,11.32Z"/></svg>');
}
/* shield-warning (pwned) */
.hibp-warn[data-state="pwned"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="%239b1c1c"><path d="M208,40H48A16,16,0,0,0,32,56v58.78c0,89.61,75.82,119.34,91,124.39a15.53,15.53,0,0,0,10,0c15.2-5.05,91-34.78,91-124.39V56A16,16,0,0,0,208,40ZM120,104a8,8,0,0,1,16,0v32a8,8,0,0,1-16,0Zm8,80a12,12,0,1,1,12-12A12,12,0,0,1,128,184Z"/></svg>');
}
/* warning-circle (error/fail-open) */
.hibp-warn[data-state="error"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="%237a5b12"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-8,56a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm8,104a12,12,0,1,1,12-12A12,12,0,0,1,128,184Z"/></svg>');
}
/* spinner (checking) */
.hibp-warn[data-state="checking"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="%235b6470"><path d="M232,128a104,104,0,0,1-208,0c0-41,23-78.36,60.13-97.52a8,8,0,0,1,7.32,14.24C60.65,60.86,40,93.19,40,128a88,88,0,0,0,176,0c0-34.81-20.65-67.14-51.45-83.28a8,8,0,0,1,7.32-14.24C209,49.64,232,87,232,128Z"/></svg>');
  animation: hibp-spin 0.9s linear infinite;
}

@keyframes hibp-spin { to { transform: rotate(360deg); } }
@keyframes hibp-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hibp-warn { animation: none; }
  .hibp-warn[data-state="checking"]::before { animation: none; }
}