/*
 * EstateLens application stylesheet (Propshaft manifest).
 *
 * Bootstrap 5 + Bootstrap Icons are vendored under stylesheets/vendor and linked
 * separately in the layout <head> (so Propshaft fingerprints each and rewrites
 * the icon-font url()s). This file holds the EstateLens theme — ported from the
 * legacy Flask base.html inline <style> (sidebar, aurora background, glass cards).
 */

:root {
  --primary-accent: #3B82F6;
  --secondary-accent: #22D3EE;
  --sidebar-bg: #2A4585;
  --sidebar-text: #FFFFFF;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
  --sidebar-active-bg: rgba(255, 255, 255, 0.2);
  --sidebar-width: 260px;
  --background-start: #F0F9FF;
  --background-end: #E0F2FE;
  --card-bg: rgba(255, 255, 255, 0.6);
  --card-hover-bg: rgba(255, 255, 255, 0.8);
  --card-border: rgba(0, 0, 0, 0.05);
  --text-primary: #0F172A;
  --text-secondary: #53515a;
  --shadow-color: rgba(17, 122, 222, 0.08);
  --danger: #dc3545;
  --warning: #ffc107;
  --info: #0dcaf0;
}

body {
  font-family: 'Poppins', system-ui, sans-serif;
  background-color: var(--background-start);
  color: var(--text-primary);
  overflow-x: hidden;
}

/* --- Sidebar --- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 1.5rem 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: transform 0.3s ease-in-out;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem 1.5rem 0.5rem;
  /* Tight gap so the GeoGnosis wordmark sits just below the divider (#96). */
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar-header .logo { height: 112px; width: auto; max-width: 100%; }
.sidebar-logo-link { display: block; line-height: 0; }

.sidebar-nav { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  margin-bottom: 0.35rem;
  border-radius: 8px;
  color: var(--sidebar-text);
  text-decoration: none;
  /* Larger & bolder for readability (#65 feedback). */
  font-size: 1.02rem;
  font-weight: 600;
  transition: background-color 0.2s ease;
}
.sidebar-nav li a .bi { font-size: 1.25rem; }
.sidebar-nav li a:hover { background-color: var(--sidebar-hover-bg); }
/* The active page: background plus a white bar, so it reads as "you are here" rather than
   a permanently lit item (#208). */
.sidebar-nav li a.active {
  background-color: var(--sidebar-active-bg);
  font-weight: 700;
  box-shadow: inset 3px 0 0 #fff;
}
/* Hierarchy (#208): section headings are the strongest text in the menu; the pages inside
   a section are indented and lighter, so they read as its children. */
.sidebar-nav .sidebar-heading {
  padding: 1rem 1rem 0.35rem;
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.92);
}
/* Top-level items without a section (Επισκόπηση) match the section headings (#208). */
.sidebar-nav li.sidebar-top-item a {
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  gap: 0.6rem;
}
.sidebar-nav li.sidebar-top-item a .bi { font-size: 1rem; }
.sidebar-group-body li a {
  padding: 0.5rem 1rem 0.5rem 1.9rem;
  margin-bottom: 0.15rem;
  font-size: 0.93rem;
  font-weight: 500;
  gap: 0.75rem;
}
.sidebar-group-body li a .bi { font-size: 1.05rem; }

/* --- Accordion-collapsible sections (#93) --- */
.sidebar-group { display: block; }
.sidebar-group-toggle {
  /* The heading is a full-width button: [icon] Title …… [chevron]. */
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}
.sidebar-group-toggle:hover { color: #fff; }
.sidebar-group-toggle .sidebar-section-icon { font-size: 1rem; opacity: 0.85; }
.sidebar-group-toggle .sidebar-chevron {
  margin-left: auto;
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}
.sidebar-group.is-collapsed .sidebar-chevron { transform: rotate(-90deg); }

.sidebar-group-body {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  max-height: 40rem;
  transition: max-height 0.25s ease;
}
.sidebar-group.is-collapsed .sidebar-group-body { max-height: 0; }

.sidebar-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.85rem; }
.sidebar-footer .btn { width: 100%; }

/* --- Main content --- */
.main-content {
  margin-left: var(--sidebar-width);
  padding: 2rem;
  min-height: 100vh;
  background-image: linear-gradient(to bottom, var(--background-start) 0%, var(--background-end) 100%);
  position: relative;
  /* Column flex so the footer can stick to the bottom on short pages. */
  display: flex;
  flex-direction: column;
  /* Reflow smoothly when the sidebar is collapsed/expanded (#65). */
  transition: margin-left 0.3s ease-in-out;
}
/* Main body grows to push the footer down when content is short. */
.main-content > main { flex: 1 0 auto; }

.aurora-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden; }
.aurora-blob { position: absolute; border-radius: 50%; filter: blur(140px); opacity: 0.6; }
.blob-1 { width: 600px; height: 600px; background: rgba(59, 130, 246, 0.2); top: -20%; left: -10%; animation: moveBlob1 25s infinite alternate ease-in-out; }
.blob-2 { width: 700px; height: 700px; background: rgba(34, 211, 238, 0.15); bottom: -25%; right: -20%; animation: moveBlob2 30s infinite alternate ease-in-out; }
@keyframes moveBlob1 { from { transform: translate(-20%, 20%) scale(1.0); } to { transform: translate(20%, -20%) scale(1.2); } }
@keyframes moveBlob2 { from { transform: translate(15%, -10%) rotate(60deg); } to { transform: translate(-15%, 10%) rotate(-20deg); } }

.page-header { padding: 0 0 2rem 0; margin-bottom: 1.5rem; }
.page-header h1 { font-weight: 700; background: -webkit-linear-gradient(45deg, var(--primary-accent), var(--secondary-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.page-header p { color: var(--text-secondary); font-weight: 400; font-size: 1.2rem; }

/* Footer copyright line is bold + dark navy in the design deck (#146), not muted. */
.app-footer { text-align: center; padding-top: 2rem; color: var(--text-primary); font-weight: 600; font-size: 0.9rem; border-top: 1px solid #ddd; }

/* --- Sign-in hero (#146 redesign) ----------------------------------------- */
/* Geognosis co-branding logo, top-left (#207): 64px tall keeps «ΓΡΑΦΕΙΟΥ ΨΑΡΙΑΝΟΥ» legible;
   on narrow screens it shrinks to the width instead. */
.auth-mark { margin-bottom: 0.5rem; }
.auth-mark-logo { height: 64px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 767.98px) { .auth-mark-logo { height: auto; } }

/* Two columns: styled form on the left, large PropertIQ brand panel on the
   right. Collapses to a single column (form first) on narrow viewports. */
.auth-hero {
  display: grid;
  grid-template-columns: minmax(280px, 400px) 1fr;
  align-items: center;
  gap: 3rem;
  min-height: 60vh;
  padding: 1rem 0 2rem;
}
.auth-title {
  font-weight: 700;
  background: -webkit-linear-gradient(45deg, var(--primary-accent), var(--secondary-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-form { max-width: 400px; }
/* Soft drop shadow on the inputs, matching the deck's floating fields. */
.auth-form .form-control { box-shadow: 0 10px 24px -10px rgba(42, 69, 133, 0.28); }
.auth-links { margin-top: 0.5rem; font-size: 0.95rem; }
.auth-links p { margin-bottom: 0.35rem; }
.auth-brand { display: flex; justify-content: center; align-items: center; }
/* Large brand panel — the deck shows it filling most of the right column. */
.auth-brand-logo { width: 100%; max-width: 760px; height: auto; }
@media (max-width: 991.98px) {
  .auth-hero { grid-template-columns: 1fr; gap: 1.5rem; min-height: 0; }
  .auth-brand { order: -1; }
  .auth-brand-logo { max-width: 380px; }
}

/* --- Cards --- */
.dashboard-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 1rem; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 32px var(--shadow-color); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); height: 100%; position: relative; overflow: hidden; }
.dashboard-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 16px 40px rgba(20, 110, 190, 0.18); background: var(--card-hover-bg); }
.card-body-content { position: relative; z-index: 2; padding: 1rem; }
.card-icon { font-size: 3rem; color: var(--text-secondary); transition: all 0.4s ease; }
.dashboard-card:hover .card-icon { color: var(--primary-accent); transform: scale(1.15) rotate(-8deg); }
.card-title { font-weight: 600; color: var(--text-primary); }
.card-text { font-size: 0.9rem; color: var(--text-secondary); }

.insight-card { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.75rem; padding: 1.25rem; display: flex; align-items: center; gap: 1rem; transition: all 0.3s ease; text-decoration: none; color: inherit; }
.insight-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px var(--shadow-color); }
.insight-icon { font-size: 2.5rem; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.insight-icon.danger { background-color: var(--danger); color: white; }
.insight-icon.warning { background-color: var(--warning); color: #333; }
.insight-icon.info { background-color: var(--info); color: #073b4c; }
.insight-icon.success { background-color: #198754; color: white; }
.insight-value { font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--text-primary); }
/* KPI figures stay on one line and fit their card (#323): fit_values_controller.js shrinks one
   that overflows. min-width: 0 lets the text column of a flex card narrow below its content. */
.insight-value.is-fitted { white-space: nowrap; overflow: hidden; }
.insight-card > div:not(.insight-icon) { min-width: 0; flex: 1 1 auto; }
.insight-label { color: var(--text-secondary); font-size: 0.9rem; }

/* Glass panel for tables/charts/forms. Pronounced "floating card" shadow to
   match the design deck (#146) — a soft, spread, brand-tinted drop shadow. */
.panel-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  box-shadow: 0 18px 40px -12px rgba(42, 69, 133, 0.28), 0 6px 16px -8px rgba(42, 69, 133, 0.12);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
/* Card titles carry the same cyan→blue gradient as the page title (#146).
   Descendant (not child) selector so titles nested in a flex header row —
   e.g. a title beside a "New…" button — get it too. All panel-card <h2> in
   the app are plain-text headings, so text-clipping is safe. */
.panel-card h2 {
  font-weight: 700;
  background: -webkit-linear-gradient(45deg, var(--primary-accent), var(--secondary-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Flash messages --- */
.flash { margin-bottom: 1rem; }

/* --- Clickable table rows (#74) --- */
/* Rows wired to the `clickable-rows` Stimulus controller navigate on click; the
   pointer cursor signals it (table-hover already provides the row highlight).
   The in-row action link stays the keyboard-accessible path. */
tr.clickable-row { cursor: pointer; }

/* --- Responsive / sidebar collapse (#65) --- */
/* Toggle is available at ALL widths. Its background matches the sidebar, so it
   blends into the rail when open and stands out over the content when collapsed. */
.sidebar-toggle { display: flex; align-items: center; justify-content: center; position: fixed; top: 1rem; left: 1rem; z-index: 1001; background: var(--sidebar-bg); color: white; border: none; border-radius: 8px; width: 45px; height: 45px; font-size: 1.5rem; cursor: pointer; }

/* Tablet & up: sidebar is pinned and visible by DEFAULT (pushes the content);
   collapsing it is opt-in via the toggle, which slides it off and lets the content
   reclaim the width. Breakpoint is the Bootstrap `md` edge (768px) so the menu
   stays open on laptops/tablets rather than starting hidden. */
@media (min-width: 768px) {
  body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
  body.sidebar-collapsed .main-content { margin-left: 0; }
  /* When collapsed the toggle floats over the content top-left — keep the H1 clear. */
  body.sidebar-collapsed .page-header { padding-left: 3.5rem; }
}

/* Phones only: sidebar is an off-canvas overlay (hidden until toggled) that never
   pushes the narrow content. */
@media (max-width: 767.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.is-open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.2); }
  .main-content { margin-left: 0; }
  .page-header { padding-left: 3.5rem; }
}

/* --- Geognosis co-branding logo (#96, #207, #209) ------------------------------ */
/* Two permanent placements, both built by script/cobrand_logos.rb from the supplied
   lockups: the white stacked variant centred under the PropertIQ logo on the dark
   sidebar (just below the divider), and the blue one-row variant above the copyright
   line in the light footer. Sizes are set here, not on the tag: the PNGs are 3×. */
.geognosis-logo { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; }
/* Sidebar: centred, sits close under the header divider. */
.geognosis-slot--sidebar-top {
  display: block;
  text-align: center;
  margin-top: 0;
  margin-bottom: 1rem;
}
.geognosis-slot--sidebar-top .geognosis-logo { width: 220px; }
/* Footer: its own centred row; the group text stays legible at 40px tall. */
.geognosis-slot--footer { display: block; margin-bottom: 0.75rem; }
.geognosis-slot--footer .geognosis-logo { width: 427px; }

/* --- Label | value lists (#150) ----------------------------------------------------------
   Detail cards used Bootstrap `dl.row` with col-6 cells and right-aligned values, which in a
   full-width card put the label at one edge and its value ~1000px away. `kv-list` keeps each
   value right next to its label: a fixed-width label column (longer labels wrap) and the value
   following it, left-aligned. The width is shared, so several lists in one card line up.
   Use it for every label/value card. */
.kv-list {
  --kv-label-width: 13rem;
  display: grid;
  grid-template-columns: minmax(0, var(--kv-label-width)) minmax(0, 1fr);
  column-gap: 1.25rem;
  row-gap: 0.4rem;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.kv-list > dt {
  font-weight: 400;
  color: var(--bs-secondary-color);
  margin: 0;
}
.kv-list > dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.kv-list + .kv-list { margin-top: 0.4rem; }
@media (max-width: 575.98px) { .kv-list { --kv-label-width: 45%; } }
/* Long free text: label above its value, one pair per row. */
.kv-list.kv-stacked { grid-template-columns: minmax(0, 1fr); row-gap: 0.15rem; }
.kv-list.kv-stacked > dd { margin-bottom: 0.75rem; }
.kv-list.kv-stacked > dd:last-child { margin-bottom: 0; }
/* Short values in a wide card: two label | value pairs per row on large screens. */
@media (min-width: 992px) {
  .kv-list.kv-two-up {
    grid-template-columns: minmax(0, var(--kv-label-width)) minmax(0, 1fr) minmax(0, var(--kv-label-width)) minmax(0, 1fr);
  }
}

/* --- Map pins per property category (#157) ------------------------------------------------
   A round coloured pin with the category glyph (school, church, parking…) instead of a plain
   dot. Vacant properties keep a red ring. The legend lists the categories as toggle buttons. */
.map-pin-icon { background: none; border: 0; }
.map-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 15px;
  line-height: 1;
}
.map-pin.is-vacant { border: 3px solid #ef4444; }
.map-pin-sm { width: 20px; height: 20px; font-size: 11px; border-width: 1px; flex: none; }
.map-pin-sm svg { width: 11px; height: 11px; }
.map-pin-sm.is-vacant { border-width: 2px; vertical-align: middle; }
.map-legend-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; max-height: 260px; overflow-y: auto; }
.map-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 2px 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  font: inherit;
  color: inherit;
}
.map-legend-item:hover { background: rgba(0, 0, 0, 0.05); }
.map-legend-item.is-off { opacity: 0.4; text-decoration: line-through; }
/* Legend header: title + chevron, collapses the legend with one click (#238). */
.map-legend-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer;
}
.map-legend-body { margin-top: 2px; }
/* Zone-price size classes (#235): circles centred in a fixed-width slot so the ranges align. */
.map-legend-size { display: inline-flex; justify-content: center; align-items: center; }

/* Required form fields (#248): an asterisk after the label. */
.form-label.required::after { content: " *"; color: var(--bs-danger, #dc3545); }

/* Chart PNG download (#254): a small button in the chart's top-right corner. */
.chart-download { position: absolute; top: 0; right: 0; z-index: 2; opacity: 0.6; padding: 0.1rem 0.4rem; }
.chart-download:hover, .chart-download:focus { opacity: 1; }

/* --- Shared filter bar: compact + sticky (#151) ------------------------------------------
   Pinned to the top of the viewport while the page scrolls, so criteria can be changed
   without scrolling back. An opaque, blurred background keeps content readable beneath it.
   z-index 999: above page content, below the fixed sidebar (1000) that slides over the
   content on phones. */
.panel-card.filter-bar {
  position: sticky;
  top: 0.5rem;
  z-index: 999;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.filter-bar .form-label,
.extra-filters .form-label { color: var(--bs-secondary-color); }
.panel-card.extra-filters { padding: 0.75rem 1rem; }
/* Bar + a page's own filters pinned as one block (#291); the bar inside is no longer sticky
   on its own, and the second panel gets the same opaque background. */
.filter-stack { position: sticky; top: 0.5rem; z-index: 999; }
.filter-stack > .panel-card.filter-bar { position: static; }
.filter-stack > .panel-card.extra-filters {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Keep anchor targets and focused fields from landing under the pinned bar. */
@media (min-width: 768px) {
  html { scroll-padding-top: 10rem; }
}
/* Phones: an open bar would cover the screen, so it scrolls away normally and is pinned
   only while collapsed (just the funnel row). */
@media (max-width: 767.98px) {
  .panel-card.filter-bar:not(.is-collapsed),
  .filter-stack:has(> .filter-bar:not(.is-collapsed)) { position: static; }
}
/* Leaflet controls use z-index up to 1000 globally; isolate the map so its internals can't
   paint over the sticky filter bar when it scrolls past (#151). */
.leaflet-container { isolation: isolate; }

/* A left-aligned column right after a right-aligned (money/number) one ran into it,
   e.g. «Μίσθωμα» + «Λήξη Μισθώσεως» read as one header (#275). */
.table > :is(thead, tbody) > tr > .text-end + :is(th, td):not(.text-end, .text-center) { padding-left: 1.25rem; }

/* Two-handle range slider (#241): two native range inputs overlaid on one track. Only the
   thumbs take pointer events, so each handle drags on its own; the fill shows the range. */
.dual-range { position: relative; height: 1.5rem; }
.dual-range-track {
  position: absolute; left: 0; right: 0; top: 50%; height: 0.35rem; transform: translateY(-50%);
  background: var(--bs-secondary-bg, #e9ecef); border-radius: 1rem;
}
.dual-range-fill { position: absolute; top: 0; bottom: 0; background: var(--bs-primary, #0d6efd); border-radius: 1rem; }
.dual-range-input {
  position: absolute; inset: 0; width: 100%; height: 1.5rem; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.dual-range-input::-webkit-slider-runnable-track { background: transparent; }
.dual-range-input::-moz-range-track { background: transparent; }
.dual-range-input::-webkit-slider-thumb {
  pointer-events: auto; -webkit-appearance: none; appearance: none; width: 1rem; height: 1rem;
  border-radius: 50%; background: #fff; border: 2px solid var(--bs-primary, #0d6efd); cursor: pointer;
}
.dual-range-input::-moz-range-thumb {
  pointer-events: auto; width: 1rem; height: 1rem; border-radius: 50%; background: #fff;
  border: 2px solid var(--bs-primary, #0d6efd); cursor: pointer;
}
.dual-range-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.35); }
.dual-range-input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.35); }

/* «Show on map» pop-up on the property list (#214). */
.map-popup-canvas { height: 420px; border-radius: 0.75rem; }

/* --- Sticky column headers on long lists (#292) -------------------------------------------
   sticky_headers_controller puts a copy of each `.table-sticky` header in a zero-height holder
   just above the list. The holder sticks at `--sticky-top` (the bottom of the pinned filters),
   so the copy shows there once the real header has scrolled away. The list itself scrolls with
   the page; only sideways overflow scrolls inside `.table-responsive`. */
.sticky-clone { position: sticky; top: var(--sticky-top, 0px); z-index: 3; height: 0; display: none; }
.sticky-clone.is-active { display: block; }
.sticky-clone-inner {
  overflow: hidden;
  background: var(--bs-body-bg, #fff);
  box-shadow: 0 6px 12px -8px rgba(42, 69, 133, 0.35);
}
.sticky-clone table { margin-bottom: 0; table-layout: fixed; }
.sticky-clone th { box-sizing: border-box; box-shadow: inset 0 -1px 0 var(--bs-border-color, #dee2e6); }

/* --- Alerts tabs (#161): one row; on narrow screens they scroll sideways instead of wrapping. */
.alerts-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.alerts-tabs .nav-link { white-space: nowrap; }

/* --- Scenario what-if sliders (#160): slider takes the width, the exact-value box stays narrow. */
.scenario-adjustment .scenario-number { max-width: 5.5rem; }
/* «Πριν» at body size, not small muted text (#251). */
.scenario-before { font-size: 0.95rem; color: var(--bs-body-color); }

/* --- Print (#155): lists print as plain, full-width tables on white paper. Screen-only
   chrome is marked `d-print-none` in the views (sidebar, filter bars, buttons, pagination). */
/* «Εξαγωγή όλων» (#254): printing with body.print-charts keeps only the chart panels, each
   full width and never split across pages, so «Save as PDF» gives one file of charts. */
@media print {
  body.print-charts main .panel-card:not(:has(canvas, [data-controller~="graph3d"])),
  body.print-charts main details,
  body.print-charts main table,
  body.print-charts main form,
  body.print-charts .chart-download { display: none !important; }
  body.print-charts main .row > [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; }
  body.print-charts main .panel-card:has(canvas, [data-controller~="graph3d"]) {
    break-inside: avoid; page-break-inside: avoid; margin-bottom: 1.5rem !important;
  }
  body.print-charts main canvas { max-width: 100% !important; }
}

@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body, .main-content { background: #fff !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .main-content { margin-left: 0 !important; padding: 0 !important; min-height: 0 !important; }
  /* A page with its own print heading (e.g. the property list) doesn't repeat the app header. */
  body:has(.print-heading) .page-header { display: none !important; }
  .print-heading h2 { -webkit-text-fill-color: #000; color: #000; background: none; }
  .page-header { margin-bottom: 0.5rem !important; }
  .page-header h1 { -webkit-text-fill-color: #000; color: #000; background: none; font-size: 18pt; }
  .page-header p { font-size: 10pt; }
  .panel-card { box-shadow: none !important; border: 0 !important; padding: 0 !important; background: none !important; backdrop-filter: none !important; }
  .table-responsive { overflow: visible !important; }
  .table { font-size: 9pt; }
  .table a { color: inherit !important; text-decoration: none !important; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  .badge { border: 1px solid #999; color: #000 !important; background: none !important; }
}