/* mobile.css — responsive laag voor vof-contract.nl */

:root { --g:14px; }

/* Tablet & kleiner */
@media (max-width: 900px){
  .container{ padding:0 12px; }

  /* Appbar: logo boven, knoppen eronder in grid */
  .appbar .container.row{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .appbar .brand{
    display:flex; align-items:center; gap:8px;
    justify-content:center;                   /* logo + naam centreren */
  }
  .appbar .bar-actions{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap:8px;
  }

  /* Werkruimte stapelen */
  .workspace .grid2{ display:block; }
  .panel{ margin:0 0 14px; }
  .panel__body{ padding:12px; }

  /* Stappenbalk: horizontaal scrollbaar, compact */
  .steptop .steps{
    display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
  }

  .paper{ padding:16px; }
}

/* Telefoon */
@media (max-width: 720px){
  /* Typo & inputs (iOS zoom voorkomen) */
  body{ font-size:16px; line-height:1.45; }
  .field label{ font-size:.95rem; }
  input, select, textarea{ font-size:16px; min-height:44px; }
  textarea[data-autogrow]{ min-height:110px; }
  .btn{ min-height:44px; padding:10px 14px; }
  .btn-sm{ padding:6px 10px; }

  /* Forms in 1 kolom */
  .s1 .grid-2, .s2 .grid-2, .s3 .grid-2{ grid-template-columns:1fr !important; }
  .grid-address{ grid-template-columns: 1fr 110px !important; }
  .w-pc{ max-width:160px; }

  /* Stepchips: alleen nummers tonen */
  .steptop .stepchip{
    display:flex; align-items:center; justify-content:center;
    padding:6px 8px; min-width:44px;
    border:1px solid #e5e7eb; border-radius:999px; background:#fff;
  }
  .steptop .stepchip .label{ display:none !important; }
  .steptop .stepchip .idx{
    width:28px; height:28px; border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    font-weight:700;
  }

  /* Eén paneel tegelijk via bestaande toggles */
  body.collapse-preview #previewPanel{ display:none; }
  body.collapse-editor  #editorPanel{ display:none; }

  /* Preview vrij laten scrollen */
  #previewPanel .panel__body{ max-height:none; overflow:visible; }
}

/* ===== Kleuren stappen ===== */
/* default (niet-actief): blauw */
.steptop .stepchip .idx{ background:#002e5d; color:#fff; }
.steptop .stepchip .label{ color:#002e5d; }
/* actief: groen */
.steptop .stepchip.is-active .idx{ background:#3aae2b !important; }
.steptop .stepchip.is-active{ border-color:#3aae2b; }
.steptop .stepchip.is-active .label{ color:#3aae2b; }

/* Voortgangsbalk in groen (ongewijzigd) */
.progress #progressBar{ background:#3aae2b !important; }

/* ===== Mobiel menu inklappen ===== */
.appbar__menu{ display:none; } /* desktop: geen menu-knop */

@media (max-width:900px){
  /* Toon hamburgerknop, verberg knoppenbalk standaard */
  .appbar__menu{
    display:inline-flex;
    align-items:center; gap:6px;
    padding:8px 10px;
    border:1px solid #e5e7eb; border-radius:8px;
    background:#fff; color:#002e5d; font-weight:600;
    align-self:flex-end; /* staat mooi rechts onder het logo */
  }
  .appbar__menu .burger{
    position:relative; width:18px; height:2px; background:currentColor; border-radius:1px;
  }
  .appbar__menu .burger::before,
  .appbar__menu .burger::after{
    content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:1px;
  }
  .appbar__menu .burger::before{ top:-6px; }
  .appbar__menu .burger::after { top: 6px; }

  /* Menubalk is dicht op mobiel… */
  .appbar .bar-actions{ display:none; }

  /* …behalve als body.menu-open actief is */
  body.menu-open .appbar .bar-actions{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap:8px;
  }

  /* Actieve knopkleur als menu open is */
  body.menu-open .appbar__menu{
    background:#3aae2b; color:#fff; border-color:#3aae2b;
  }
}