/* ================================================================
   email-breach.css — Styly specifické pro email-breach-check.php
   Načítat za: common.css, components.css, nav.css,
               cookie-consent.css, protection.css
   ================================================================ */


/* ===== 2. PRÁZDNÝ STAV SEZNAMU =============================== */
/* Zobrazí se když filtr nenajde žádné shody */
.breach-no-results {
    text-align: center;
    padding: 20px 0;
    color: var(--text-muted);
    font-size: var(--size-14);
}


/* ===== 3. STATISTIKY DATABÁZE BREACHŮ ======================== */
/* 4 čísla nad filtrem: Accounts Exposed / Known Breaches / Sensitive / Spam.
   Používá data-grid + data-card z components.css, jen přepisuje počet sloupců. */

.breach-stats-bar { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 520px) {
    .breach-stats-bar { grid-template-columns: repeat(2, 1fr); }
}


/* ===== 2. VÝSLEDEK EMAIL CHECKU ============================== */
/*
   Celý blok vygenerovaný do #check-result-area po kliknutí "Check Now".

   <div class="check-result-card safe|pwned|partial">
     <div class="check-result-header">
       <div class="check-result-icon">✓</div>
       <div>
         <div class="check-result-title">No breaches found</div>
         <div class="check-result-email">user@example.com</div>
       </div>
     </div>
     <div class="sources-row">
       <span class="source-badge clean"><span class="source-dot"></span>LeakCheck: Clean</span>
       <span class="source-badge found"><span class="source-dot"></span>EmailRep: Found</span>
     </div>
     <div class="found-breaches-list">             ← jen pokud nalezeny breache
       <div class="found-breach-card">
         <img class="found-breach-logo">  |  <div class="found-breach-fallback">L</div>
         <div class="found-breach-info">
           <div class="found-breach-name">LinkedIn</div>
           <div class="found-breach-meta">May 2016 · 164.6M accounts</div>
           <div class="found-breach-tags"><span class="breach-tag">Emails</span></div>
         </div>
       </div>
     </div>
     <div class="emailrep-row">                   ← vždy pokud EmailRep odpověděl
       <div class="emailrep-item">
         <strong>Reputation</strong>
         <span class="rep-high|rep-med|rep-low">High</span>
       </div>
     </div>
     <p class="text-small check-result-note">...</p>
   </div>
*/

/* Hlavní karta — tři stavy */
.check-result-card {
    border: 2px solid;
    border-radius: 10px;
    padding: 20px;
    margin-block: 20px;
}

.check-result-card.safe    { border-color: var(--color-green);  background: color-mix(in srgb, var(--color-green)  6%, var(--bg-container)); }
.check-result-card.pwned   { border-color: var(--color-red);    background: color-mix(in srgb, var(--color-red)    6%, var(--bg-container)); }
.check-result-card.partial { border-color: var(--color-orange); background: color-mix(in srgb, var(--color-orange) 6%, var(--bg-container)); }

/* Header: ikona + název + email */
.check-result-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-block-end: 16px;
}

.check-result-icon {
    font-size: var(--size-36);
    flex-shrink: 0;
    line-height: 1;
}

.check-result-card.safe    .check-result-icon  { color: var(--color-green); }
.check-result-card.pwned   .check-result-icon  { color: var(--color-red); }
.check-result-card.partial .check-result-icon  { color: var(--color-orange); }

.check-result-title {
    font-size: var(--size-20);
    font-weight: 700;
}

.check-result-card.safe    .check-result-title { color: var(--color-green); }
.check-result-card.pwned   .check-result-title { color: var(--color-red); }
.check-result-card.partial .check-result-title { color: var(--color-orange); }

.check-result-email {
    font-size: var(--size-13);
    color: var(--text-muted);
    margin-block-start: 3px;
}

/* Zdrojové badges: LeakCheck / EmailRep */
.sources-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-end: 14px;
}

.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: var(--size-12);
    font-weight: 600;
    border: 1.5px solid transparent;
}

.source-badge.clean { background: color-mix(in srgb, var(--color-green)  10%, transparent); color: var(--color-green);  border-color: color-mix(in srgb, var(--color-green)  30%, transparent); }
.source-badge.found { background: color-mix(in srgb, var(--color-red)    10%, transparent); color: var(--color-red);    border-color: color-mix(in srgb, var(--color-red)    30%, transparent); }
.source-badge.error { background: var(--bg-data-box); color: var(--text-muted); border-color: var(--border-color); }

/* Barevná tečka uvnitř badge — barvu dědí od rodiče */
.source-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Karty nalezených breachů (v rámci email check výsledku) */
.found-breaches-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-block: 12px;
}

.found-breach-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bg-container);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
}

/* Velikost loga nastavuje JS dynamicky přes inline width/height */
.found-breach-logo    { border-radius: 5px; flex-shrink: 0; object-fit: contain; }
.found-breach-fallback {
    border-radius: 50%;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--size-14);
}

.found-breach-info    { flex: 1; min-width: 0; }
.found-breach-name    { font-size: var(--size-13); font-weight: 700; color: var(--text-main); margin-block-end: 2px; }
.found-breach-meta    { font-size: var(--size-12); color: var(--text-muted); margin-block-end: 6px; }
.found-breach-tags    { display: flex; flex-wrap: wrap; gap: 4px; }

/* EmailRep sekce — mřížka hodnot */
.emailrep-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-block-start: 14px;
    padding-block-start: 14px;
    border-block-start: 1px solid var(--border-color);
}

.emailrep-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.emailrep-item strong {
    font-size: var(--size-11);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}

/* Hodnota Reputation: high = dobrá, low = špatná (opak rizika) */
.rep-high { color: var(--color-green);  font-weight: 700; font-size: var(--size-13); }
.rep-med  { color: var(--color-orange); font-weight: 700; font-size: var(--size-13); }
.rep-low  { color: var(--color-red);    font-weight: 700; font-size: var(--size-13); }

/* Poznámky pod výsledkem */
.check-result-note { margin-block-start: 12px; }

@media (max-width: 520px) {
    .emailrep-row { grid-template-columns: repeat(2, 1fr); }
}


/* ===== 3. FILTR NAD SEZNAMEM BREACHŮ ========================= */
/*
   <div class="breach-filter-row">
     <input class="form-input" ...>        ← search (roste do dostupného místa)
     <select class="form-input" ...>       ← dropdown řazení (pevná šířka)
     <span class="text-small" ...></span>  ← "X breaches"
   </div>
*/

.breach-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block: 16px;
}

.breach-filter-row .form-input:first-child { flex: 1; }
.breach-filter-row .form-input:nth-child(2) { width: 160px; flex-shrink: 0; }

@media (max-width: 520px) {
    .breach-filter-row { flex-wrap: wrap; }
    .breach-filter-row .form-input:nth-child(2) { width: 100%; }
}


/* ===== 2. SEZNAM BREACHŮ — karty ============================= */
/*
   Struktura vygenerovaná JS z HIBP API:

   <div class="breach-list">
     <div class="breach-card">
       <img class="breach-logo" ...>           ← logo z Clearbit CDN
       <div class="breach-logo-fallback">A</div> ← fallback, pokud logo selže
       <div class="breach-info">
         <div class="breach-name">LinkedIn <span class="breach-tag sensitive">Sensitive</span></div>
         <div class="breach-meta">May 2016 · 164.6M accounts</div>
         <div class="breach-tags">
           <span class="breach-tag">Email addresses</span>
           <span class="breach-tag sensitive">Passwords</span>
         </div>
       </div>
     </div>
     ...
     <button class="btn btn-secondary btn-full">Show more</button>
   </div>
*/

.breach-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-block: 20px;
}

.breach-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--bg-data-box);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    border-inline-start: 4px solid var(--color-red);
}

/* Logo z Clearbit CDN — skryje se přes JS onerror, zobrazí fallback */
.breach-logo {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Fallback — kruh s prvním písmenem názvu služby */
.breach-logo-fallback {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    font-size: var(--size-14);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Textový blok vpravo od loga */
.breach-info {
    flex: 1;
    min-width: 0;
}

.breach-name {
    font-size: var(--size-14);
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.4;
    margin-block-end: 3px;
}

/* Datum a počet účtů: "May 2016 · 164.6M accounts" */
.breach-meta {
    font-size: var(--size-12);
    color: var(--text-muted);
    margin-block-end: 8px;
}

/* Řada tagů: Email addresses, Passwords, ... */
.breach-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Tag datového typu — neutrální */
.breach-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--size-11);
    font-weight: 600;
    background: var(--bg-container);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Citlivý breach (zdravotní data, dospělý obsah...) — červený */
.breach-tag.sensitive {
    background: color-mix(in srgb, var(--color-red) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-red) 30%, transparent);
    color: var(--color-red);
}