/* The admin panel: bottom tab bar, lists with thumbnails, the rows of the properties, collapsible cards, form pieces, the photo grid and the sticky action bar. Built on tokens.css. */

/* ---- tab bar (the «a filo» variant of the design system: the Mini App has no Safari strips to protect) ---- */
.tabbar { flex: none; position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); --i: 0; background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: inset 0 1px 0 var(--line); padding: var(--s1) calc(var(--sar) + 8px) calc(var(--sab) + 4px) calc(var(--sal) + 8px); z-index: 20; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .tabbar { -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8); } }
html[data-kb] .tabbar { display: none; }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; border-radius: 14px; color: var(--muted); font: 650 12px/1.1 var(--font); }
.tab[aria-current="page"] { color: var(--accent); }
.tab svg { width: 26px; height: 26px; transition: transform var(--d2) var(--ease); }
.tab[aria-current="page"] svg { transform: translateY(-1px) scale(1.07); }
.tab:active svg { transform: scale(.88); }
.tab[data-count]::after { content: attr(data-count); position: absolute; top: 3px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--danger); color: var(--danger-contrast); font: 800 12px/20px var(--font); text-align: center; }
/* The light over the selected tab: a short bar just inside the top edge of the bar, a few pixels above the icon, shining down on it. Its glow is cut at the edge of the bar (clip-path: the top
   inset is the 3 px it sits below that edge), so that nothing of it spills over the page above. */
.tab-indicator { position: absolute; top: 3px; left: calc(var(--sal) + 8px); width: calc((100% - var(--sal) - var(--sar) - 16px) / var(--n, 4)); height: 3px; display: flex; justify-content: center; pointer-events: none;
  clip-path: inset(-3px -16px -34px -16px); transform: translateX(calc(var(--i) * 100%)); transition: transform var(--d3) var(--ease); }
.tab-indicator::before { content: ""; width: 44%; border-radius: 3px; background: var(--accent); box-shadow: 0 2px 12px 1px color-mix(in srgb, var(--accent) 62%, transparent); }
.page { padding-bottom: calc(var(--s7) + var(--sab)); }
.page.with-bar { padding-bottom: calc(96px + var(--sab)); }

/* ---- small parts ---- */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.accent { background: var(--accent-soft); color: var(--accent); }
.pill.danger { background: var(--danger-soft); color: var(--danger); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--s4); border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip small { font-weight: 700; opacity: .75; }
.chip-row { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4); padding-block: 2px; }
.chip-row::-webkit-scrollbar { display: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.stack { display: grid; gap: var(--s3); }
.input.select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); }
.input-suffix { position: relative; } .input-suffix .input { padding-right: 56px; } .input-suffix span { position: absolute; right: 14px; top: 50%; translate: 0 -50%; color: var(--muted); font-weight: 600; pointer-events: none; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 52px; padding: var(--s2) 0; cursor: pointer; }
.switch-row span { display: grid; gap: 2px; min-width: 0; } .switch-row small { font-size: var(--t-meta); }
.switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 52px; height: 32px; margin: 0; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); transition: background var(--d2); cursor: pointer; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--text); transition: transform var(--d2) var(--ease); }
.switch:checked { background: var(--accent); border-color: var(--accent); } .switch:checked::after { transform: translateX(20px); background: var(--accent-contrast); }
.seg button { white-space: nowrap; }

/* ---- collapsible cards (the sections of the property editor) ---- */
.card { border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); overflow: clip; }
.card > summary { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: 0 var(--s4); cursor: pointer; list-style: none; font-weight: 700; }
.card > summary::-webkit-details-marker { display: none; }
.card > summary > svg:last-child { margin-left: auto; color: var(--muted); transition: transform var(--d2) var(--ease); }
.card[open] > summary > svg:last-child { transform: rotate(180deg); }
.card-title { flex: 0 1 auto; min-width: 0; }
.card-body { display: grid; gap: var(--s4); padding: var(--s2) var(--s4) var(--s5); }
.card-body > .hint { color: var(--muted); font-size: var(--t-sm); }

/* ---- lists ---- */
.item { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); text-align: left; min-height: 76px; transition: transform var(--d1) var(--ease); }
.item:active { transform: scale(.99); }
.thumb { width: 64px; height: 64px; flex: none; border-radius: 12px; background: var(--surface-2) center / cover no-repeat; display: grid; place-items: center; color: var(--muted); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.item-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.item-title { font-weight: 650; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: 1.25; }
.meta-count { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.item-sub { font-size: var(--t-meta); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.item-side { display: grid; justify-items: end; gap: 4px; flex: none; }
/* The row of a property: the photo on the left fills the height of the row, and the text beside it uses the whole width, in four lines that fill that height:
   the title, where and what (city, kind of deal, kind of property: a thin rule between them, which disappears when they wrap), the price with the state of the listing on the same line,
   and last the code with the number of photos. Two columns run down the row: what comes first on the left, the state and the photos on the right. */
.prop { --photo: clamp(72px, 22vw, 86px); display: grid; grid-template-columns: var(--photo) minmax(0, 1fr); gap: var(--s3); align-items: stretch; width: 100%; padding: 10px; border-radius: var(--r-l);
  background: var(--surface); border: 1px solid var(--line); text-align: left; transition: transform var(--d1) var(--ease); }
.prop:active { transform: scale(.99); }
.prop:focus-visible, .item:focus-visible { border-radius: var(--r-l); }              /* (the general rule for a focused control squares the corners to 8 px) */
.prop .thumb { width: auto; height: auto; min-height: var(--photo); border-radius: 10px; }
.prop-body { min-width: 0; display: grid; grid-template-rows: auto auto 1fr auto; row-gap: 3px; }
.prop-title { font-weight: 650; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.prop-title i { color: var(--muted); }
.prop-meta { display: flex; flex-wrap: wrap; margin-left: calc(var(--s2) * -1); overflow: hidden; font-size: var(--t-meta); line-height: 1.35; color: var(--muted); }
.prop-meta > span { position: relative; min-width: 0; padding: 0 var(--s2); overflow-wrap: anywhere; }
.prop-meta > span::before { content: ""; position: absolute; left: -1px; top: 50%; height: 11px; translate: 0 -50%; border-left: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.prop-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px var(--s2); min-width: 0; align-self: end; }
.prop-price { font-size: 17px; line-height: 1.3; font-weight: 750; letter-spacing: -.01em; color: var(--accent); }
.prop-sub { align-self: end; font-size: var(--t-cap); line-height: 1.3; color: var(--muted); }
.prop-code { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.search { position: relative; } .search svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--muted); pointer-events: none; } .search .input { padding-left: 44px; }
.group-title { font-size: var(--t-meta); font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin: var(--s3) 0 calc(var(--s1) * -1); }
.link-row { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 60px; padding: 0 var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); text-align: left; font-weight: 600; }
.link-row small { display: block; font-weight: 500; color: var(--muted); font-size: var(--t-meta); } .link-row > svg:last-child { margin-left: auto; color: var(--muted); }
.link-row .mark { --size: 36px; border-radius: 11px; }

/* ---- editor: header summary, sticky action bar, gate list ---- */
.actionbar { position: fixed; z-index: 15; left: 0; right: 0; bottom: calc(var(--kb, 0px) + var(--sab) + var(--s3)); display: flex; gap: var(--s2); justify-content: center; padding: var(--s2) var(--s4); pointer-events: none; }
.actionbar .inner { pointer-events: auto; display: flex; gap: var(--s2); width: min(100%, var(--column)); }
.actionbar .btn { flex: 1; box-shadow: var(--shadow); }
.gate-list { display: grid; gap: var(--s2); list-style: none; margin: 0; padding: 0; } .gate-item { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--t-sm); } .gate-item svg { margin-top: 2px; flex: none; }
.gate-item.error svg { color: var(--danger); } .gate-item.warning svg { color: var(--warn); } .gate-item.ok svg { color: var(--ok); }
.timeline { display: grid; gap: var(--s3); } .timeline li { display: grid; gap: 2px; padding-left: var(--s4); border-left: 2px solid var(--line); } .timeline small { color: var(--muted); }
.timeline { list-style: none; margin: 0; padding: 0; }

/* ---- photos ---- */
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
@media (min-width: 560px) { .photos { grid-template-columns: repeat(4, 1fr); } }
.photo { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface-2) center / cover no-repeat; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-touch-callout: none; }
.photo .handle { position: absolute; left: 4px; bottom: 4px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; touch-action: none; cursor: grab; }
.photo .more { position: absolute; right: 4px; bottom: 4px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; }
.photo .cover { position: absolute; left: 6px; top: 6px; }
.photo.dragging { opacity: .35; } .photo.lifted { position: fixed; z-index: 100; pointer-events: none; width: var(--w); height: var(--w); aspect-ratio: auto; box-shadow: var(--shadow); transform: scale(1.06) rotate(2deg); }
.photo.busy::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); } .photo.busy .bar { position: absolute; left: 8px; right: 8px; bottom: 10px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); z-index: 2; } .photo.busy .bar i { display: block; height: 100%; width: var(--p, 0%); background: #fff; border-radius: 2px; }
.add-photo { aspect-ratio: 1; border-radius: 12px; border: 2px dashed var(--border); display: grid; place-items: center; align-content: center; gap: 4px; color: var(--accent); font-weight: 700; font-size: var(--t-meta); }
.theme-card { display: grid; gap: var(--s2); padding: var(--s3); border-radius: var(--r-l); border: 2px solid var(--line); background: var(--surface); text-align: left; }
.theme-card[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.swatches { display: flex; gap: 4px; } .swatches i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .5); }

/* Settings → Traduzioni and the state of a translation in the property editor */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-width: 0; }
.row-between > span:first-child { min-width: 0; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: var(--s4); font-size: var(--t-sm); }
.steps li { counter-increment: step; position: relative; padding-left: 2.2em; display: grid; gap: var(--s2); justify-items: start; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.steps li .row-between { width: 100%; }
.code { font: 800 1.5rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; white-space: nowrap; user-select: all; -webkit-user-select: all; }
.tr-state { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); }
.pill.muted { background: var(--surface-2); color: var(--muted); }