/* ================================================================
   MARKO REAL ESTATE - RESPONSIVE
   Loaded LAST, on purpose. These rules override component and layout
   defaults at narrow widths, so they must win on source order.
   .form-row--3/--4 travel with them for the same reason.
   ================================================================ */

/* ─── Responsive ────────────────────────────────────────── */
@media(max-width:1024px){
  .auth__brand{display:none}
  .auth__form-side{padding:24px}
}
@media(max-width:1024px){
  .app__content{padding:13px 18px 20px}
  .app__header{padding:0 18px}
  .app__footer{padding:10px 18px}
}
@media(max-width:768px){
  .app__sidebar{transform:translateX(-100%);box-shadow:var(--shadow-lg)}
  .app__sidebar.open{transform:translateX(0)}
  .app__main{margin-left:0}
  .header__toggle{display:flex}
  /* Two up is held down to the narrowest common phone rather than dropping
     to one: a KPI is a short label and a number, and a full-width card for
     that leaves the row scrolling for no gain. */
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .stat-card{padding:12px 14px;gap:11px;min-height:74px}
  .stat-card__icon{width:40px;height:40px;border-radius:10px;font-size:1.05rem}
  .stat-card__value{font-size:1.5rem}
  .form-row{grid-template-columns:1fr}
  .page-header{flex-direction:column;align-items:flex-start;gap:10px}
  /* The lead carries flex:1 1 320px so it holds a sensible column beside the
     actions on a wide header. Stacked, the main axis is vertical and that
     320px becomes a *height* basis — an empty band the depth of a phone
     screen between the title and the button under it. Reset with the
     direction that caused it. */
  .page-header__lead{flex:0 0 auto;width:100%}
  .page-header__actions{width:100%}
  .app__content{padding:14px 14px 18px}
  .app__header{padding:0 14px;gap:10px}
  .app__footer{padding:10px 14px}
  .dash-feed{padding:4px 14px 8px}
  .card__header,.card__body{padding-left:14px;padding-right:14px}
  .card__footer{padding-left:14px;padding-right:14px}
}
@media(max-width:480px){
  /* Still two up, but the glyph moves above the text: side by side inside a
     ~160px card leaves the label a column too narrow to break sensibly. */
  .app__content{padding:12px 12px 16px}
  .stats{gap:9px}
  .stat-card{flex-direction:column;align-items:flex-start;gap:8px;padding:11px 12px;min-height:0}
  .stat-card__icon{width:36px;height:36px;border-radius:9px;font-size:.95rem}
  .stat-card__value{font-size:1.4rem}
  .stat-card__label{font-size:.71rem}
  .page-header__title{font-size:1.2rem}
  .quick-actions{grid-template-columns:minmax(0,1fr)}
}

/* ─── Sidebar overlay (mobile) ──────────────────────────── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:99;backdrop-filter:blur(2px)}
.sidebar-overlay.show{display:block}


/* Multi-column form rows as classes rather than inline styles, so the
   narrow-screen rules below can actually override them — an inline
   grid-template beats every stylesheet rule and forces the page wide. */
.form-row--3{grid-template-columns:repeat(3,1fr)}
.form-row--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:768px){
  .form-row--3,.form-row--4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .form-row--3,.form-row--4{grid-template-columns:1fr}
}

/* ─── Table column priority ─────────────────────────────────
   The semantics of .col-lo / .col-mid are documented with the table
   component; the widths they trigger at are here, because these rules
   have to beat the component defaults and this file loads last.

   The thresholds are measured, not chosen. The rail stays pinned until
   768, so the content column is 1127px at a 1440 viewport, 967px at
   1280 and 723px from 1024 down — a 244px cliff between 1280 and 1024
   that no amount of tidying inside the table can absorb. Each step
   below drops the next tier of columns just before the tables that
   carry them would start to overflow.

   The bounds are inclusive of the breakpoint itself, matching the rest
   of this file: a 1280px window is one of the commonest laptop widths
   and is exactly where the first tier needs to go, so writing 1279 here
   would leave the most common case unhandled by one pixel.

   Above 1280 nothing is hidden: on a full desktop every column the
   module offers is on screen, which is the point of having them. */
@media (max-width:1280px){
  .table .col-lo{display:none}
}
@media (max-width:1024px){
  .table .col-mid{display:none}
  /* Less room, so the cap on a text column comes down with it — one long
     value should not be spending a fifth of a tablet's width. */
  .table{--cell-max:180px}
}
@media (max-width:768px){
  .table{--cell-max:150px}
}

/* ─── Touch ─────────────────────────────────────────────────
   Everything a finger needs, declared in the sheet that loads last,
   because these are floors rather than preferences and a floor that
   can be overridden is not one.

   That is not hypothetical: this block used to live in tokens-app.css,
   which loads second, and the 16px input rule lost to
   `.toolbar__field .form-control` at (0,2,0) — so every filter select
   shipped at 13px and every tap on one zoomed iOS Safari into the page
   and left it there.

   Pointer-driven, not width-driven: a touchscreen laptop needs this at
   1400px and a mouse-driven small window does not.
   ─────────────────────────────────────────────────────────── */
@media (pointer:coarse){
  /* Anything sized from the control scale comes up together, which is
     most of the application's buttons and inputs. */
  :root{--control-h:44px;--control-h-sm:44px;--control-h-lg:48px}

  /* 16px is the exact threshold below which iOS Safari zooms the page
     on focus — and it does not zoom back out, so the rest of the form
     is filled in sideways. !important because a later, more specific
     rule winning here silently brings the zoom back; there is no
     design reason to ever go under this. */
  input,select,textarea,.form-control{font-size:16px!important;min-height:44px}
  textarea,textarea.form-control{min-height:88px}
  .header__search-input{font-size:16px!important;height:44px}

  /* Controls carrying their own literal sizes, lifted to the minimum. */
  .header__icon-btn,.header__visit,.header__toggle,
  .row-menu__trigger{min-width:44px;min-height:44px}
  .sidebar__link,.sidebar__label--toggle,.th-sort__link,
  .toolbar__filter-trigger,.tabs__item{min-height:44px}
  /* Pills and segments carry fixed heights (32 and 34) that read well under
     a cursor and are a miss under a thumb. Height, not min-height: both are
     inline-flex with a set height, which min-height cannot lift. */
  .segmented__btn,.status-tabs__item{height:44px}
  .settings-nav__item,.geo__map{min-height:44px}
  /* Page numbers are the one control on a long list that a thumb reaches for
     most, and 32 square is the smallest thing on any page. They sit in a row
     with a gap, so growing them costs nothing but the row's own height. */
  .pagination__link{min-width:44px;height:44px;padding:0 var(--space-3)}
  /* A feed row's title is the row's action, not prose, so it gets a real
     target rather than the inline-link exemption. */
  .feed__title a{display:inline-block;min-height:44px;line-height:44px}

  /* Footer and inline links sit in running text, so growing the box would
     open gaps in the line. They get the target underneath instead. */
  .app__footer a,.notice__link{position:relative;display:inline-block}
  .app__footer a::after,.notice__link::after{
    content:'';position:absolute;top:50%;left:0;right:0;
    transform:translateY(-50%);height:44px;
  }

  /* An icon in a bar with no room to grow keeps the size it looks and
     gets the target underneath it instead. The pseudo-element is inside
     the link, so the whole area activates the link it belongs to. */
  .header__crumb-home{position:relative}
  .header__crumb-home::after{
    content:'';position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:44px;height:44px;
  }
}

/* ─── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}