/* Shelvara — its own rules on top of app-core (public/core/core.css): page colours (items teal, containers indigo),
   members list, card contents, the two-part details panel (container on top, item below). */
/* page colour: items = teal, containers = indigo */
.app, nav.bottom { --pa: var(--tq); --pabg: var(--tqbg); --pat: var(--tqt); }
.page-containers { --pa: var(--ind); --pabg: var(--indbg); --pat: var(--indt); }
.members { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; }
.members li { display: grid; grid-template-columns: minmax(0, 1fr) 84px 220px 104px; align-items: center; gap: 4px 12px; padding: 10px 12px; }
.members li + li { border-top: 1px solid var(--line); }
.mwho { display: flex; flex-direction: column; min-width: 0; }
.mwho .note { overflow: hidden; text-overflow: ellipsis; }
.members .role { justify-self: start; }
.members li > :last-child { justify-self: end; }
.addmember { border-top: 1px solid var(--line); padding-top: 16px; }
.lvn { display: inline-block; min-width: 1.6em; text-align: right; font-variant-numeric: tabular-nums; }
.tog { display: flex; flex-wrap: wrap; gap: 4px; }
.tog button { display: inline-flex; align-items: center; min-height: 30px; border: 1px solid var(--line2); border-radius: 4px; padding: 0 8px; font-size: 13px; background: var(--surf); }
.tog .ico { margin-right: 5px; width: 14px; height: 14px; }
.tog .n { color: var(--mute); font-size: 12px; margin-left: 6px; }
.tog button.on { border-color: var(--pa); box-shadow: inset 0 0 0 1px var(--pa); background: var(--pabg); color: var(--pat); font-weight: 600; }
.tog button.on .n, .tog button.on .ico { color: var(--pat); }
.tog button:disabled { opacity: .4; }
.dates { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; color: var(--mute); }
.dates input { width: 124px; height: 30px; padding: 0 4px; border: 1px solid var(--line2); border-radius: 6px; background: var(--surf); color: var(--ink); font: inherit; font-size: 12px; }
.card.it.sel { border-color: var(--tq); box-shadow: 0 0 0 1px var(--tq); }
.card.bx.sel, .card.ps.sel { border-color: var(--ind); box-shadow: 0 0 0 1px var(--ind); }
.card.ig { border-style: dashed; border-color: var(--ambline); }
.card.arch { opacity: .6; }
.trow { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.tn { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mod { color: var(--mute); }
.qty { color: var(--mute); font-size: 12px; }
.ico.pb { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.pill { font-size: 11px; border: 1px solid var(--line2); border-radius: 4px; padding: 1px 6px; color: var(--soft); white-space: nowrap; margin-top: 1px; }
.hb { padding: 8px 12px; background: var(--surf); display: flex; flex-direction: column; gap: 2px; }
.card.bx .hb, .card.ps .hb { background: var(--surf); }
.l1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.boxc { min-width: 0; }
.boxc .ico { color: var(--ind); }
.tname { font-weight: 600; }
.ttype { color: var(--soft); }
.bdg { display: inline-block; font-size: 12px; font-weight: 500; border-radius: 4px; padding: 1px 6px; white-space: nowrap; color: var(--soft); background: var(--band); border: 1px solid var(--line); }
.bdg.ikea { color: var(--indt); background: var(--indbg); border-color: transparent; }
.bdg.ig { color: var(--amb); background: var(--ambbg); border: 1px dashed var(--ambline); }
.wch, .gch { display: inline-block; font-size: 11px; border-radius: 4px; padding: 0 6px; white-space: nowrap; border: 1px solid; }
.wch { color: var(--amb); border-color: var(--ambline); }
.gch { color: var(--mute); border-color: var(--line2); }
.hr { color: var(--mute); font-size: 13px; }
.sub { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--mute); font-size: 13px; }
.sub .dt { margin-left: auto; }
.dt { white-space: nowrap; font-size: 12px; color: var(--mute); }
.dt .ico { width: 13px; height: 13px; margin-right: 4px; }
.none { color: var(--mute); font-style: italic; }
/* The item part is as tall as its fields (at most 60% of the panel, then it scrolls); the container gets the rest. */
.psec.box { flex: 1 1 auto; }
.psec.item { flex: 0 0 auto; max-height: 60%; border-top: 1px solid var(--line); }
.sscope { margin-top: 6px; }
/* One heading style for the list and the panel: 20 px, item teal / container indigo, with the menu's icon. */
.ttl1 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 20px; font-weight: 700; }
.ttl1 .ico { width: 20px; height: 20px; margin: 0; color: inherit; }
.ttl1.k-item { color: var(--tq); }
.ttl1.k-box { color: var(--indt); }
/* Search and scan above the list */
.lsearch { display: flex; gap: 6px; margin-top: 10px; }
.lsearch .search { flex: 1 1 auto; min-width: 0; }
/* Selection: the side the arrows move in shows frame + fill, the other side frame only. */
.mainc.zone .card.it.sel, .mainc.zone .card.it.sel .hb { background: var(--tqbg); }
.mainc.zone .card.bx.sel, .mainc.zone .card.bx.sel .hb, .mainc.zone .card.ps.sel, .mainc.zone .card.ps.sel .hb { background: var(--indbg); }
/* section action (Szerkesztés): the section's colour — container indigo, item teal */
.psec.box { --sc: var(--indt); }
.psec.item { --sc: var(--tq); }
.tags .wch, .tags .gch { font-size: 12px; padding: 2px 8px; }
ol.items { margin: 0; padding-left: 28px; }
ol.items li::marker { color: var(--mute); font-family: inherit; font-size: inherit; font-variant-numeric: tabular-nums; }
ol.items li button { display: block; width: 100%; text-align: left; padding: 4px 6px; border-radius: 4px; }
ol.items li button:hover { background: var(--band); }
ol.items li.on button { box-shadow: inset 0 0 0 1px var(--tq); }
.panel.zone ol.items li.on button { background: var(--tqbg); color: var(--tqt); }
ol.items li.arch { opacity: .55; }
.grp { font-size: 11px; font-weight: 600; color: var(--mute); margin: 10px 0 2px; text-transform: uppercase; letter-spacing: .06em; }
.inner { margin-left: 10px; border-left: 2px solid var(--indbg); padding-left: 14px; }
.here { padding: 3px 0; }
@media (max-width: 1099px) {
  .psec, .panel.hasitem .psec.box, .panel.hasitem .psec.item { max-height: none; overflow: visible; }
  .panel.hasitem .psec.box { display: none; }
  .panel.hasitem .back { display: inline-flex; }
}
@media (max-width: 699px) {
  .members li { grid-template-columns: minmax(0, 1fr) auto; }
  .members .mlast { grid-column: 1 / -1; }
}
.tagline.two { white-space: pre-line; }
/* "+ Új tárgy" / "+ Új tároló": the same white button as in the panel (phones keep the floating button) */
@media (min-width: 700px) {
  .titlerow .add { background: var(--surf); color: var(--ink); border: 1px solid var(--line2); font-weight: 400; font-size: 13px; padding: 0 12px; }
}
/* the count sits on the same line as the coloured title (the title is a flex row with an icon) */
.tit { align-items: center; }
.tit .count { line-height: 1; font-size: 14px; position: relative; top: 0.4px; }

/* Shelvara 6: list sub-headers (furniture › position under the room header) */
.gsub { display: flex; align-items: center; gap: 6px; margin: 8px 0 6px 4px; font-size: 12px; font-weight: 600; color: var(--soft); }
.gsub .ico { width: 13px; height: 13px; margin: 0; }
.gsub .gn { font-weight: 400; color: var(--mute); }
.fgtree .tree { margin-top: 2px; }
/* the place hover card */
.phc-t { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.phc-n { margin-top: 6px; white-space: pre-line; color: var(--soft); }
.phc-w { margin-top: 6px; }
.phc-b { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.phc-b .ico { width: 13px; height: 13px; margin-right: 5px; color: var(--ind); }
/* panel: the item list with the brand at the right end, highlighting of the matching items */
ol.items li button { display: flex; align-items: baseline; gap: 10px; }
ol.items .itx { flex: 1; min-width: 0; }
ol.items .ibrand { flex: none; color: var(--soft); font-size: 13px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ol.items li.hit button { background: var(--indbg); box-shadow: inset 3px 0 0 var(--ind); }
.page-items ol.items li.hit button { background: var(--tqbg); box-shadow: inset 3px 0 0 var(--tq); }
ol.items li.dim { opacity: .45; }
.ihead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hitn { font-size: 12px; font-weight: 600; color: var(--pat); }
.pre { white-space: pre-line; }
.psec .kv { margin-top: 8px; }
/* forms in the panel */
.psec.editing, .panel.editing .psec.item { background: var(--surf); }
.panel.editing .psec.item { max-height: none; flex: 1 1 auto; }
.panel.editing .psec.box { flex: 0 1 auto; max-height: 40%; }
.psec.item.solo { border-top: 0; flex: 1 1 auto; max-height: none; }
.fanother { padding-top: 4px; border-top: 1px solid var(--line); }
.delwhy { margin-top: -6px; text-align: left; }
/* "Hol van" picker: a button with the chosen path; under it a search and the tree of places and containers */
.pickbtn { display: flex; align-items: center; gap: 0; width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line2); border-radius: 6px; background: var(--surf); text-align: left; }
.pickbtn > span { flex: 1; min-width: 0; }
.pickbtn.empty > span { color: var(--mute); }
.pickbtn[aria-expanded=true] { border-color: var(--pa); box-shadow: 0 0 0 1px var(--pa); }
.pick { border: 1px solid var(--line2); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: var(--surf); }
.picklist { max-height: 300px; overflow: auto; display: flex; flex-direction: column; }
.pkrow { display: flex; align-items: center; gap: 0; min-height: 32px; padding: 0 6px 0 calc(6px + var(--d, 0) * 14px); border-radius: 4px; text-align: left; }
.pkrow:hover { background: var(--band); }
.pkrow.on { background: var(--pabg); color: var(--pat); font-weight: 600; }
.pkrow .pkl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkrow.ploc { color: var(--soft); }
.pkrow.pbox .ico { color: var(--ind); }
.pkrow .ico { width: 14px; height: 14px; }
.pkpath { font-weight: 400; }
@media (max-width: 699px) { .pkrow { min-height: 42px; } }
.pick .fsearch input { border: 0; box-shadow: none; min-height: 0; padding: 0; background: transparent; }
.tools .linkbtn { white-space: nowrap; }
.igrp { color: var(--soft); font-weight: 600; }
/* item title: brand and model, then the name */
.ittl { flex-direction: column; align-items: flex-start; gap: 2px; }
.ittl .imaker { font-weight: 700; }
.ittl .iname { font-weight: 400; color: var(--soft); font-size: 15px; }
/* group header in a container's list: rename in place */
.grp { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.grppen { margin-left: auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--pat, var(--tq)); opacity: 0; }
.grp:hover .grppen, .grppen:focus-visible { opacity: 1; }
@media (hover: none) { .grppen { opacity: 1; } }
.grppen .ico { margin: 0; width: 14px; height: 14px; color: inherit; }
.grpedit { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 8px 0 4px; }
.grpedit input { flex: 1 1 180px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--pa); box-shadow: 0 0 0 1px var(--pa); border-radius: 6px; background: var(--surf); color: var(--ink); font: inherit; }
.grpedit .grpacts { display: flex; gap: 8px; }
.grpedit .fhint, .grpedit .err { flex-basis: 100%; }
/* Alignment in card rows (measured with app-core dev/check-alignment.py): text next to text on the baseline; a code
   badge trimmed to its capitals with equal padding, raised by half the cap-height difference to the 14 px text. */
.sub { align-items: baseline; }
.bdg { line-height: 1; text-box: trim-both cap alphabetic; padding: 4px 6px; }
.l1 .bdg { position: relative; top: -0.7px; }
.pbm .ico.pb { margin: 0 0 0 5px; }
/* nested group headers (one per level of place, like the tree) */
.gh { padding-left: calc(4px + var(--gl, 0) * 14px); }
.gh.gd1, .gh.gd2 { position: static; background: none; padding-top: 6px; padding-bottom: 4px; }
.gh.gd2 { text-transform: none; letter-spacing: 0; font-size: 12px; }

/* Item state chips (Shelvara 7): amber = to do, grey = archived, blue-ish = other states; notes under the name */
.sch { display: inline-block; font-size: 11px; border-radius: 4px; padding: 0 6px; white-space: nowrap; border: 1px solid var(--indline, var(--line2)); color: var(--ind); }
.trow .wch, .trow .gch, .trow .sch { margin-top: 1px; align-self: flex-start; }
.inote { margin: 2px 0 4px; color: var(--soft); font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
ol.items .itx .inote1 { display: block; color: var(--soft); font-size: 12.5px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcol { flex: 1; min-width: 0; }
.tcol .tn { display: -webkit-box; }
.tcol .inote { margin: 2px 0 0; }