/*
 * Hytrans – minimal "bootstrap-like" layout helpers + app frame
 * ------------------------------------------------------------
 * The Twig templates use a small subset of Bootstrap classes (row/col, g-*, px-*, d-flex...)
 * but the real Bootstrap CSS is not loaded in this app.
 *
 * This file provides only the utilities actually used by the Hytrans templates,
 * scoped to the mobile-app pages to avoid affecting other parts of the site.
 */

/* ===== App frame ===== */
body.ht-page.ht-page--mobile {
  background: #f2f2f2;
}

.ht-outer {
  min-height: 100vh;
  padding: 18px;
}

.ht-frame {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 15px rgba(0,0,0,0.25);
  /* Desktop/tablet landscape: allow a wider app frame (calculator needs 2 columns).
     The frame stays responsive and never exceeds 1500px.
  */
  max-width: 1500px;
  margin: 0 auto;
  position: relative;

  /* Make bottom-nav stick to the bottom on short pages */
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 36px);
}

/* On small screens: remove the grey gutter and frame shadow so it feels native */
@media (max-width: 560px) {
  body.ht-page.ht-page--mobile {
    background: #fff;
  }
  .ht-outer {
    padding: 0;
  }
  .ht-frame {
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
  }
}

/* Keep content away from the sticky bottom-nav */
.ht-page-content {
  padding-bottom: 110px;
}

/* ===== Minimal utilities (scoped) ===== */
.ht-page .container-fluid {
  width: 100%;
  padding-left: 18px;
  padding-right: 18px;
}

.ht-page .container-md {
  width: 100%;
  /* Keep in sync with .ht-frame max-width. */
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.ht-page .px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.ht-page .mb-4 { margin-bottom: 1.5rem !important; }
.ht-page .mb-3 { margin-bottom: 1rem !important; }

.ht-page .d-flex { display: flex !important; }
.ht-page .justify-content-between { justify-content: space-between !important; }
.ht-page .align-items-center { align-items: center !important; }
.ht-page .align-items-start { align-items: flex-start !important; }

/* ===== Minimal grid ===== */
.ht-page .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-right: -12px;
}

.ht-page .row > * {
  padding-left: 12px;
  padding-right: 12px;
}

/* gutters */
.ht-page .g-0 { margin-left: 0 !important; margin-right: 0 !important; }
.ht-page .g-0 > * { padding-left: 0 !important; padding-right: 0 !important; }

.ht-page .g-2 { margin-left: -10px !important; margin-right: -10px !important; }
.ht-page .g-2 > * { padding-left: 10px !important; padding-right: 10px !important; }

/* columns */
.ht-page .col-12 { flex: 0 0 auto; width: 100%; }
.ht-page .col-6  { flex: 0 0 auto; width: 50%; }

/* Responsive columns (Bootstrap-like) */
.ht-page .col-lg-6 { flex: 0 0 auto; width: 100%; }
@media (min-width: 992px) {
  .ht-page .col-lg-6 { width: 50%; }
}

/* optional (used by some templates/partials) */
.ht-page .col-3  { flex: 0 0 auto; width: 25%; }

/* ===== Bottom navigation tweaks ===== */
/* Ensure it spans the full frame width and labels wrap nicely */
.ht-bottom-nav {
  margin-top: auto;
}

.ht-bottom-nav__label {
  white-space: normal;
  text-align: center;
  line-height: 1.05;
  font-size: 11px;
}

/* Narrower devices: slightly smaller labels to prevent overlap */
@media (max-width: 420px) {
  .ht-bottom-nav__label { font-size: 10px; }
}