/* lino-tiles.css — a LiNo Home EGYSÉGES csempe-formanyelve.
 *
 * Minden „Ház" menübeli oldal (Tulajdonaim, Elérhetőségek, Ház főmérői,
 * Dokumentumok, Eszközkölcsönzés, Közösségi terek, Biztosítások, Szolgáltatók)
 * ezekre az osztályokra épül — így egy helyen módosítható az egész arculat.
 *
 * Alapelemek:
 *   .ln-grid            csempe-rács (auto-fill, a min-szélesség változóból)
 *   .ln-grid.narrow     kisebb csempék (mérő-, mappa-csempék)
 *   .ln-tile            maga a csempe (felül színes sáv)
 *   .c-indigo|green|orange|blue|red|grey   színvariáns (a sáv + ikon + cím színe)
 *   .ln-tile-head       fejléc: kör-ikon + cím (+ jelvény)
 *   .ln-ico             kör-ikon
 *   .ln-title           cím (a <small> alcím a második sorban)
 *   .ln-badge           jobbra igazított jelvény a fejlécben
 *   .ln-row             adatsor (címke + érték), utolsó sor elválasztó nélkül
 *   .ln-row.hours       kiemelt, pirulás érték (idősáv)
 *   .ln-sub             kis szekció-felirat a csempén belül
 *   .ln-big             nagy szám (mérőállás, darabszám) + .u mértékegység
 *   .ln-meta            lábléc-sor apró kiegészítőkkel
 *   .ln-note            szabad szöveg a csempe alján
 *   .ln-act             csempén belüli szöveges gomb (.danger piros)
 *   .ln-empty           üres-állapot doboz
 *   .ln-toolbar         fejléc-sáv kereső+gombok számára
 *   .ln-search          kereső mező
 */

.ln-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--ln-min,300px),1fr));gap:16px;align-items:start;}
.ln-grid.narrow{--ln-min:230px;}
.ln-grid.wide{--ln-min:340px;}

.ln-tile{
  border:1px solid var(--line);border-radius:16px;background:var(--paper);
  padding:16px 18px;border-top:4px solid var(--ln-c,#3D46A0);
  transition:border-color .15s, transform .15s;
}
.ln-tile.clickable{cursor:pointer;}
.ln-tile.clickable:hover{border-color:var(--ln-c,#3D46A0);transform:translateY(-1px);}
.ln-tile.selected{box-shadow:0 0 0 2px var(--ln-c,#3D46A0) inset;}
.ln-tile.dashed{border:1px dashed var(--line);border-top:1px dashed var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;color:var(--grey-soft);min-height:96px;cursor:pointer;font-size:12.5px;}
.ln-tile.dashed:hover{border-color:var(--indigo);color:var(--indigo);}

.ln-tile.c-indigo{--ln-c:#3D46A0;} .ln-tile.c-green{--ln-c:#1C7A5E;}
.ln-tile.c-orange{--ln-c:#C77914;} .ln-tile.c-blue{--ln-c:#1D6FB8;}
.ln-tile.c-red{--ln-c:#C6172E;}    .ln-tile.c-grey{--ln-c:#7A7F8C;}

/* SÖTÉT MÓD: a világos módra hangolt, telített színek sötét alapon nem olvashatók
   (az indigó cím pl. 2,1:1 kontrasztot adott) — itt világosabb árnyalatra váltunk,
   így a cím és a keret is a WCAG 3:1 UI-küszöb fölé kerül. Az ikon-korong háttere
   ilyenkor világos, ezért a benne lévő jel sötét lesz. */
html[data-theme="dark"] .ln-tile.c-indigo{--ln-c:#98A2F0;}
html[data-theme="dark"] .ln-tile.c-green {--ln-c:#5FD3AC;}
html[data-theme="dark"] .ln-tile.c-orange{--ln-c:#EDAB55;}
html[data-theme="dark"] .ln-tile.c-blue  {--ln-c:#76B8F2;}
html[data-theme="dark"] .ln-tile.c-red   {--ln-c:#F58A94;}
html[data-theme="dark"] .ln-tile.c-grey  {--ln-c:#AAB0BF;}
html[data-theme="dark"] .ln-ico{color:#12151F;}
html[data-theme="dark"] .ln-badge{background:rgba(255,255,255,.08);}
html[data-theme="dark"] .ln-row.hours .val{background:rgba(255,255,255,.08);}
html[data-theme="dark"] .ln-meta .right{background:rgba(255,255,255,.08);}
/* Csempén KÍVÜLI .ln-act (pl. a fejléc „Szerkesztés" gombja): ott nincs --ln-c,
   ezért az alapértelmezett indigó maradna — sötét módban világosra váltjuk. */
html[data-theme="dark"] .ln-act{color:#98A2F0;}
html[data-theme="dark"] .ln-act.danger{color:#F58A94;}
html[data-theme="dark"] .ln-tile .ln-act{color:var(--ln-c);}
html[data-theme="dark"] .ln-tile .ln-act.danger{color:#F58A94;}

.ln-tile-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.ln-ico{width:38px;height:38px;border-radius:50%;background:var(--ln-c,#3D46A0);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:17px;flex:none;}
.ln-ico.square{border-radius:10px;width:34px;height:34px;font-size:16px;}
.ln-title{font-weight:700;font-size:14px;color:var(--ln-c,#3D46A0);line-height:1.3;min-width:0;}
.ln-title small{display:block;font-weight:400;font-size:10.5px;color:var(--grey-soft);
  letter-spacing:.04em;text-transform:uppercase;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ln-title.plain{color:var(--ink);font-weight:600;font-size:13.5px;}
.ln-badge{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--mist);color:var(--ln-c,#3D46A0);border-radius:999px;padding:3px 10px;white-space:nowrap;}

.ln-row{display:flex;align-items:baseline;gap:8px;padding:7px 0;
  border-bottom:1px solid var(--line-soft,#EEF0F5);font-size:13.5px;}
.ln-row:last-child{border-bottom:none;}
.ln-row .lab{flex:1;min-width:0;color:var(--grey);}
.ln-row .val{font-weight:600;text-align:right;max-width:62%;overflow-wrap:anywhere;color:var(--ink);}
.ln-row .val a{color:var(--ln-c,#3D46A0);text-decoration:none;}
.ln-row.hours .val{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  background:var(--mist);border-radius:8px;padding:2px 10px;white-space:nowrap;}

.ln-sub{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-soft);margin:12px 0 2px;}
.ln-big{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;font-size:26px;
  letter-spacing:-0.02em;line-height:1.1;color:var(--ink);}
.ln-big .u{font-size:14px;font-weight:600;color:var(--grey);margin-left:4px;}
.ln-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--line-soft,#EEF0F5);font-size:11px;color:var(--grey-soft);}
.ln-meta .sn{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}
.ln-meta .right{margin-left:auto;border-radius:999px;padding:2px 9px;background:var(--mist);}
.ln-note{font-size:12.5px;color:var(--grey);line-height:1.6;white-space:pre-wrap;margin-top:8px;}

/* min-height 24px: a művelet-linkek 11,5px-es szövegből 16px magas céltáblát adtak,
   ami ujjal alig található (WCAG 2.5.8 minimuma 24×24 CSS px). A szöveg mérete és a
   link-kinézet változatlan — csak a kattintható doboz nő a sor magasságán belül. */
.ln-act{border:none;background:none;padding:0;font-family:inherit;font-size:11.5px;
  color:var(--ln-c,#3D46A0);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;min-height:24px;}
.ln-act:hover{text-decoration:underline;}
.ln-act.danger{color:var(--signal);}
.ln-act.muted{color:var(--grey-soft);}

/* A .doc-act-ot 20 lap a saját <style>-jában definiálja (az ott lévő szabály később
   jön, tehát továbbra is az nyer) — a Küldés-központ és a banki tételek viszont
   HASZNÁLTA a nevet definíció nélkül, ott böngésző-alapértelmezett, 22px-es gomb
   látszott. Itt a közös alap, hogy mindenhol egyforma és 26px magas legyen. */
.doc-act{border:1px solid var(--line);background:none;border-radius:8px;padding:6px 10px;
  font-size:12px;min-height:26px;cursor:pointer;color:var(--grey-soft);font-family:inherit;}

.ln-empty{border:1px dashed var(--line);border-radius:14px;padding:22px;
  color:var(--grey-soft);font-size:13px;line-height:1.7;}

.ln-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.ln-search{display:flex;align-items:center;gap:8px;background:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:7px 15px;min-width:240px;flex:1;max-width:420px;}
/* Jelölőnégyzet + saját címkéje EGY céltábla (a címkére koppintás is átvált), de a
   címke egysoros 13px-es szövegként csak ~18px magas volt. A négyzet méretét nem
   írjuk át — az oldalak (pl. dokumentum-lista) néhol maguk állítják. */
/* inline-flex kell: az inline elemen a min-height HATÁSTALAN, a címke 15px maradt. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]){display:inline-flex;align-items:center;gap:5px;min-height:24px;}

/* min-height 24px: a beírósáv maga csak 18px magas volt a 34px-es pirulában, vagyis
   a kereső felső/alsó 8px-e nem fogadott koppintást (WCAG 2.5.8). */
.ln-search input{border:none;background:none;outline:none;font-family:inherit;font-size:13px;
  color:var(--ink);width:100%;min-height:24px;}
.ln-search input::placeholder{color:var(--grey-soft);}

@media(max-width:560px){
  .ln-grid{--ln-min:100%;}
  .ln-search{max-width:none;}
}