/* =====================================================================
   inmeetapp.css — de app van de inmeter (IM3).

   Twee kolommen: links wat op zijn naam staat, rechts het meetblad in een
   telefoonvorm. Groot genoeg om met een handschoen te bedienen — dit
   scherm wordt buiten gebruikt, op een tablet, met koude vingers.
===================================================================== */
.ia-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px;
  display: flex; flex-direction: column; gap: 18px; }

.ia-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.ia-kicker { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-ink-3); margin: 0 0 4px; }
.ia-kop h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.ia-lead { color: var(--c-ink-2); font-size: 13.5px; line-height: 1.6; max-width: 74ch; margin: 0; }
.ia-wie { font-family: var(--font-mono); font-size: .68rem; color: var(--c-ink-2); white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 4px 11px; }

.ia-schil { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .ia-schil { grid-template-columns: 1fr; } }

/* ---- links: mijn klussen ---- */
.ia-lijst { display: flex; flex-direction: column; gap: 8px; }
.ia-klus { text-align: left; display: flex; flex-direction: column; gap: 3px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 11px 13px; cursor: pointer;
  transition: border-color var(--overgang), box-shadow var(--overgang); }
.ia-klus:hover { box-shadow: var(--schaduw-tegel); }
.ia-klus.is-nu { border-left-color: var(--c-groen); box-shadow: var(--schaduw-tegel); }
.ia-klus__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ia-klus__kop b { font-size: .84rem; }
.ia-klus__kop em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.ia-klus__adres { font-size: .7rem; color: var(--c-ink-2); }
.ia-klus__stand { font-size: .64rem; color: var(--c-ink-3); }

/* ---- rechts: het meetblad ---- */
.ia-telefoon { background: var(--c-ink); border-radius: 28px; padding: 12px; }
.ia-scherm { background: var(--c-paneel-2); border-radius: 20px; overflow: hidden; }
.ia-schermkop { background: #fff; padding: 13px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn);
  display: flex; flex-direction: column; gap: 2px; }
.ia-schermkop b { font-size: .88rem; }
.ia-schermkop span { font-size: .7rem; color: var(--c-ink-2); }

.ia-posrij { display: flex; gap: 6px; flex-wrap: wrap; padding: 11px 16px 0; }
.ia-pos { border: var(--lijndikte) solid var(--c-lijn); background: #fff; border-radius: var(--radius-pill);
  padding: 5px 12px; font-size: .7rem; font-weight: 700; color: var(--c-ink-2); cursor: pointer; }
.ia-pos.is-klaar { border-color: var(--c-groen); color: var(--c-groen-d); }
.ia-pos.is-nu { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

.ia-blad { padding: 13px 16px 18px; display: flex; flex-direction: column; gap: 13px; }
.ia-offerte { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 10px 13px; display: flex; flex-direction: column; gap: 2px; }
.ia-offerte span { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); }
.ia-offerte b { font-size: 1.05rem; }
.ia-offerte em { font-style: normal; font-size: .68rem; color: var(--c-ink-2); }
.ia-uitleg { font-size: .72rem; line-height: 1.6; color: var(--c-ink-2); margin: 0; }

.ia-groep { display: flex; flex-direction: column; gap: 6px; }
.ia-groep h4 { margin: 0; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-ink-3); font-weight: 700; }
.ia-drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ia-drie--twee { grid-template-columns: repeat(2, 1fr); }

/* min-width:0 hoort hier: zonder die regel weigert een grid-cel te
   krimpen onder zijn inhoud, en dan valt «2216» weg achter de rand —
   precies de maat waar het om gaat. */
.ia-veld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ia-veld span { font-size: .62rem; color: var(--c-ink-3); }
/* Ruim en hoog: dit wordt buiten ingevuld, op een tablet. */
.ia-veld input, .ia-veld textarea { font-family: var(--font-mono); font-size: .92rem; padding: 9px 8px;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-klein); background: #fff; width: 100%; }
.ia-veld textarea { font-family: var(--font-ui); font-size: .78rem; resize: vertical; }
.ia-veld--breed { width: 100%; }

/* De uitkomst komt van de server — hier staat wat er besteld gaat worden. */
.ia-uitkomst { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 11px 13px; display: flex; flex-direction: column; gap: 5px; }
.ia-uitkomst.is-let { border-color: var(--c-amber); background: var(--c-amber-t); }
.ia-uitkomst > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ia-uitkomst span { font-size: .66rem; color: var(--c-ink-2); }
.ia-uitkomst b { font-size: .86rem; }
.ia-scheef { margin: 3px 0 0; font-size: .7rem; line-height: 1.5; color: var(--c-amber); font-weight: 700; }

.ia-knop { background: var(--gradient-primair); color: #fff; border: 0; border-radius: var(--radius);
  padding: 13px; font-size: .82rem; font-weight: 700; cursor: pointer; }
.ia-knop:hover { background: var(--gradient-primair-hover); }
.ia-knop:disabled { opacity: .55; cursor: progress; }

.ia-leeg { background: #fff; border: var(--lijndikte) dashed var(--c-lijn); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column; gap: 5px; text-align: center; }
.ia-leeg b { font-size: .86rem; }
.ia-leeg span { font-size: .74rem; color: var(--c-ink-2); line-height: 1.6; }

/* ---- IM4 · inbouwsituatie en bereikbaarheid ---- */
.ia-veld select { font-family: var(--font-ui); font-size: .8rem; padding: 9px 8px;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-klein);
  background: #fff; width: 100%; }
/* Amber: een signaal dat de maat raakt, geen blokkade. */
.ia-let { margin: 2px 0 0; font-size: .72rem; line-height: 1.55; color: var(--c-amber);
  background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber);
  border-radius: var(--radius-klein); padding: 8px 10px; }
/* De bijzaak is geld: hij hoort op te vallen zonder alarm te slaan. */
.ia-bijzaak { display: flex; flex-direction: column; gap: 3px; margin-top: 2px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn-2);
  border-left: 3px solid var(--c-groen); border-radius: var(--radius); padding: 10px 12px; }
.ia-bijzaak b { font-size: .78rem; }
.ia-bijzaak span { font-size: .72rem; line-height: 1.55; color: var(--c-ink-2); }
.ia-bijzaak em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }