/* lazyflat — site styling.
   Imported via <link> from base.html. Tailwind utilities (via CDN) handle
   layout/spacing; this file owns our design tokens and component classes. */

:root {
    --bg-from: #e4f0fb; --bg-to: #f7fbfe;
    --surface: #ffffff; --border: #d8e6f3;
    --text: #10253f; --muted: #667d98;
    --primary: #2f8ae0; --primary-hover: #1f74c8;
    --danger: #e05a6a; --danger-hover: #c44a59;
    --ghost: #eaf2fb; --ghost-hover: #d5e5f4;
    --accent: #fbd76b;
}

html { color-scheme: light; }
body {
    background: linear-gradient(180deg, var(--bg-from) 0%, var(--bg-to) 100%);
    background-attachment: fixed;
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
}

/* Card + separator hooks */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
        box-shadow: 0 1px 2px rgba(16, 37, 63, 0.04); }
.border-soft { border-color: var(--border) !important; }
.divide-soft > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }

/* Buttons */
.btn { border-radius: 9px; padding: 0.45rem 0.95rem; font-weight: 500;
       transition: background 0.15s, box-shadow 0.15s, transform 0.05s; display: inline-block; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--primary); color: white; box-shadow: 0 1px 2px rgba(47,138,224,.25); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: var(--danger-hover); }
.btn-ghost { background: var(--ghost); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--ghost-hover); }

/* Auto-apply hot button (unused in current UI, kept for future) */
.btn-hot { background: linear-gradient(135deg, #ff7a85 0%, #e14a56 100%); color: white;
           box-shadow: 0 2px 6px rgba(225, 74, 86, 0.35); font-weight: 600; }
.btn-hot:hover { filter: brightness(1.05); }
.btn-hot.off { background: linear-gradient(135deg, #cfd9e6 0%, #99abc2 100%);
               box-shadow: 0 1px 2px rgba(16, 37, 63, 0.15); }

/* Partner-Aktionsbadge — kleiner Kreis oben rechts am Button */
.btn-with-badge { position: relative; display: inline-block; }
.partner-badge {
    position: absolute; top: -6px; right: -6px;
    width: 18px; height: 18px; border-radius: 9999px;
    background: var(--primary); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 1px 2px rgba(16,37,63,.25);
    pointer-events: auto;
}

/* Inputs */
.input { background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
         padding: 0.55rem 0.8rem; width: 100%; color: var(--text);
         transition: border-color .15s, box-shadow .15s; }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,138,224,.18); }

/* Chips */
.chip { padding: .2rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 500; display: inline-block; }
.chip-ok   { background: #e4f6ec; color: #1f8a4a; border: 1px solid #b7e4c7; }
.chip-warn { background: #fff4dd; color: #a36a1f; border: 1px solid #f5d48b; }
.chip-bad  { background: #fde6e9; color: #b8404e; border: 1px solid #f5b5bf; }
.chip-info { background: #e3effc; color: #1f5f99; border: 1px solid #b6d4f0; }

/* Countdown — tabular digits + fixed width so the text doesn't wobble
   while the seconds tick down. */
.countdown { font-variant-numeric: tabular-nums; display: inline-block;
             min-width: 4.2em; text-align: left; }
.sep { color: var(--muted); user-select: none; }

/* iOS-style toggle switch */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch-visual { position: absolute; cursor: pointer; inset: 0;
                 background: #cfd9e6; border-radius: 999px; transition: background .2s; }
.switch-visual::before { content: ""; position: absolute; width: 20px; height: 20px;
                         left: 3px; top: 3px; background: #fff; border-radius: 50%;
                         box-shadow: 0 1px 3px rgba(16,37,63,0.25); transition: transform .2s; }
.switch input:checked + .switch-visual { background: var(--primary); }
.switch input:checked + .switch-visual::before { transform: translateX(20px); }
.switch.warn input:checked + .switch-visual { background: var(--danger); }
.switch input:focus-visible + .switch-visual { box-shadow: 0 0 0 3px rgba(47,138,224,.25); }

/* View toggle (Liste / Karte) — segmented pill, CSS-only via :has() */
.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px;
               overflow: hidden; background: var(--surface); font-size: 0.85rem; font-weight: 500; }
.view-toggle label { padding: 0.35rem 0.95rem; cursor: pointer; user-select: none;
                     color: var(--muted); transition: background .15s, color .15s; }
.view-toggle input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.view-toggle label:hover { color: var(--text); background: var(--ghost); }
.view-toggle label:has(input:checked) { background: var(--primary); color: #fff; }
.view-map { display: none; }
body:has(#v_map:checked) .view-list { display: none; }
body:has(#v_map:checked) .view-map { display: block; }
#flats-map { height: 520px; border-radius: 10px; }

/* Flat detail expand */
.flat-row { border-top: 1px solid var(--border); }
.flat-row:first-child { border-top: 0; }
.flat-expand-btn { width: 1.75rem; height: 1.75rem; border-radius: 999px;
                   display: inline-flex; align-items: center; justify-content: center;
                   border: 1px solid var(--border); background: var(--surface);
                   color: var(--muted); cursor: pointer; transition: transform .2s, background .15s; }
.flat-expand-btn:hover { background: var(--ghost); color: var(--text); }
.flat-expand-btn.open { transform: rotate(180deg); }
.flat-detail { background: #fafcfe; border-top: 1px solid var(--border); }
.flat-detail:empty { display: none; }

/* Temporary row highlight after arriving via a Telegram deep-link (?flat=…). */
.flat-highlight { animation: flat-highlight-pulse 3s ease-out; }
@keyframes flat-highlight-pulse {
    0%   { background-color: #fff4dd; }
    100% { background-color: transparent; }
}

/* Normalised image gallery — every tile has the same aspect ratio */
.flat-gallery { display: grid;
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
                gap: 8px; }
.flat-gallery-tile { aspect-ratio: 4 / 3; overflow: hidden;
                     border-radius: 8px; border: 1px solid var(--border);
                     background: #f0f5fa; display: block;
                     padding: 0; cursor: zoom-in; }
.flat-gallery-tile img { width: 100%; height: 100%; object-fit: cover;
                         display: block; transition: transform .3s; }
.flat-gallery-tile:hover img { transform: scale(1.04); }

/* Image lightbox — full-viewport overlay with a centered, uniformly sized
   image. Prev arrow is hidden on the first image; next arrow on the last. */
.lightbox { position: fixed; inset: 0; z-index: 1000;
            background: rgba(8, 18, 32, .92);
            align-items: center; justify-content: center;
            animation: lightbox-fade .15s ease-out; }
.lightbox-image { max-width: 92vw; max-height: 88vh; object-fit: contain;
                  border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5);
                  background: #0c1726; }
.lightbox button { background: rgba(255,255,255,.08); color: #fff; border: 0;
                   border-radius: 9999px; cursor: pointer;
                   display: inline-flex; align-items: center; justify-content: center;
                   transition: background .15s, transform .05s; padding: 0; }
.lightbox button:hover { background: rgba(255,255,255,.22); }
.lightbox button:active { transform: scale(.96); }
.lightbox-close { position: absolute; top: 1.25rem; right: 1.25rem;
                  width: 2.5rem; height: 2.5rem; }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%;
                                  transform: translateY(-50%);
                                  width: 3rem; height: 3rem; }
.lightbox-prev:active, .lightbox-next:active { transform: translateY(-50%) scale(.96); }
.lightbox-prev { left: 1.25rem; }
.lightbox-next { right: 1.25rem; }
.lightbox-prev[hidden], .lightbox-next[hidden] { display: none; }
.lightbox-counter { position: absolute; bottom: 1.25rem; left: 50%;
                    transform: translateX(-50%); color: rgba(255,255,255,.7);
                    font-size: .85rem; font-variant-numeric: tabular-nums;
                    letter-spacing: .02em; pointer-events: none; }
body.lightbox-open { overflow: hidden; }
@keyframes lightbox-fade { from { opacity: 0 } to { opacity: 1 } }

/* Map pin — divIcon default class has a white box; clear it so the SVG sits clean. */
.lazyflat-pin { background: transparent; border: 0; }
.lazyflat-pin svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }

/* Leaflet popup — match site visual */
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 6px 20px rgba(16,37,63,.15); }
.leaflet-popup-content { margin: 12px 14px; min-width: 220px; color: var(--text); }
.map-popup-title { font-weight: 600; font-size: 13px; display: inline-block; color: var(--primary); }
.map-popup-title:hover { text-decoration: underline; }
.map-popup-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.map-popup-status { margin-top: 8px; }
.map-popup-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.map-popup-actions .btn { padding: 0.35rem 0.7rem; font-size: 12px; }
.map-popup-actions form { margin: 0; }

/* Brand avatar */
.brand-dot {
    width: 2.5rem; height: 2.5rem; border-radius: 10px;
    background: linear-gradient(135deg, #66b7f2 0%, #2f8ae0 60%, #fbd76b 100%);
    box-shadow: 0 1px 4px rgba(47, 138, 224, 0.35);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.brand-dot img { width: 88%; height: 88%; object-fit: contain; display: block; }

/* Anchors */
a { color: var(--primary); }
a:hover { text-decoration: underline; }

/* Tab nav */
.tab { padding: 0.7rem 0.2rem; color: var(--muted); border-bottom: 2px solid transparent;
       margin-right: 1.5rem; font-weight: 500; }
.tab.active { color: var(--text); border-color: var(--primary); }
.tab:hover { color: var(--text); text-decoration: none; }

/* Mono / forensic JSON tree */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; }
details > summary { cursor: pointer; user-select: none; }
details > summary::marker { color: var(--muted); }