/* WENCO truck display: visual rules only. All controls retain their Angular handlers. */
:root {
  --wenco-blue:#06b7dc;
  --wenco-ink:#101c25;
  --wenco-soft:#edfaff;
}
body { background:#fff; }
app-login,app-record-voice,app-question1,app-question2,app-summary { display:block; color:var(--wenco-ink); }
app-login ion-content,app-record-voice ion-content,app-question1 ion-content,
app-question2 ion-content,app-summary ion-content { --background:#fff; }
app-login ion-button,app-record-voice ion-button,app-question1 ion-button,
app-question2 ion-button,app-summary ion-button,
app-back-next ion-button { --border-radius:8px; --box-shadow:0 3px 6px rgba(0,35,50,.16); font-weight:700; }
/* Login: preserve the original eight-digit keypad and automatic validation. */
app-login ion-content { --padding-start:20px;--padding-end:20px;--padding-top:22px; }
app-login ion-content > ion-row:first-of-type h3 { line-height:1.22; margin:15px 0 18px!important; }
app-login ion-item { --background:var(--wenco-soft);--border-radius:8px;--padding-start:14px; margin:6px 0 13px; }
app-login ion-input { letter-spacing:.12em; }
app-keyboard ion-grid { padding:0; }
app-keyboard ion-col { padding:4px!important; }
app-keyboard ion-button { margin:0; }
/* Recording: read text clearly, keep Start/Play/Stop ordering and timings. */
app-record-voice ion-content { --padding-start:20px;--padding-end:20px;--padding-top:10px; }
app-record-voice ion-content > ion-row:nth-of-type(2) { background:var(--wenco-soft);border-left:6px solid var(--wenco-blue);border-radius:8px;padding:13px 19px!important;margin:10px 0 16px; }
app-record-voice ion-content > ion-row:nth-of-type(2) h3 { line-height:1.27; }
app-record-voice ion-content > ion-row:nth-of-type(3) {
  display:flex;
  flex-wrap:nowrap;
  gap:0;
  width:100%;
}
app-record-voice ion-content > ion-row:nth-of-type(3) > ion-col {
  flex:0 0 33.333%;
  width:33.333%;
  max-width:33.333%;
  min-width:0;
  padding:0 4px!important;
}
app-record-voice ion-content > ion-row:nth-of-type(3) ion-button {
  display:block;
  width:100%;
  margin:0;
  font-size:clamp(20px,2.5vw,30px);
}
app-record-voice ion-content > ion-row:nth-of-type(3) ion-button h2 {
  font-size:inherit!important;
  white-space:nowrap;
}
app-record-voice ion-content > ion-row:nth-of-type(4) { min-height:56px;align-items:center;justify-content:center; }
app-record-voice ion-button[disabled] { --box-shadow:none; }
/* Question blocks share one visual language; untouched range controls remain interactive. */
app-question1 ion-content { --padding-start:22px;--padding-end:22px;--padding-top:20px; }
app-question1 ion-content > div:not([hidden]) { margin-bottom:18px; }
app-question1 ion-content > div:not([hidden]) > ion-label { display:block; font-weight:700; }
app-question1 app-range-time { display:block; padding:10px 12px; background:var(--wenco-soft); border-radius:8px; }
app-question1 ion-range,app-question2 ion-range { --bar-background:#bfdcf5;--bar-background-active:var(--wenco-blue);--knob-background:var(--wenco-blue); }
app-question2 ion-content { --padding-start:20px;--padding-end:20px; }
/* Confirmation retains answer wording, audio playback, Restart and Finalize. */
app-summary ion-content { --padding-start:18px;--padding-end:18px; }
app-summary ion-card { border-radius:8px;box-shadow:0 2px 6px rgba(0,35,50,.15);margin:8px 0; }
app-summary ion-card ion-label { line-height:1.2; }
app-summary ion-footer { background:#fff; }
app-summary ion-footer ion-grid { padding:7px 12px 10px; }
app-summary ion-footer ion-button { margin:2px; }
@media(max-width:700px) {
  app-login ion-content,app-record-voice ion-content,app-question1 ion-content,
  app-question2 ion-content,app-summary ion-content { --padding-start:12px;--padding-end:12px; }
  app-record-voice ion-content > ion-row:nth-of-type(2) { padding:10px 13px!important; }
}

/* Previous questionnaire summary: modal opened before choosing a new process. */
app-modal-summary { display:block;color:var(--wenco-ink); }
app-modal-summary ion-content {
  --background:#fff;
  --padding-start:20px;
  --padding-end:20px;
  --padding-top:12px;
  --padding-bottom:10px;
}
app-modal-summary ion-content > ion-row.ion-align-items-center {
  background:var(--wenco-soft);
  border-radius:8px;
  margin:6px 0;
  padding:7px 9px!important;
}
app-modal-summary ion-content > ion-row.ion-align-items-center h6,
app-modal-summary ion-content > ion-row.ion-align-items-center h5 {
  line-height:1.15;
  margin:2px 0!important;
}
app-modal-summary ion-content > ion-row.ion-align-items-center ion-col:nth-child(2) h6,
app-modal-summary ion-content > ion-row.ion-align-items-center ion-col:nth-child(4) h6 {
  color:#008db1;
}
app-modal-summary ion-footer { background:#fff; padding:8px 17px 12px; }
app-modal-summary ion-footer > ion-row:first-child h3 {
  line-height:1.17;
  text-align:center;
  margin:6px 0 12px!important;
}
app-modal-summary ion-footer > ion-row:last-child {
  display:flex;
  flex-wrap:nowrap;
  width:100%;
}
app-modal-summary ion-footer > ion-row:last-child > ion-col {
  flex:0 0 33.333%;
  width:33.333%;
  max-width:33.333%;
  min-width:0;
  padding:0 5px!important;
}
app-modal-summary ion-footer ion-button {
  display:block;
  width:100%;
  margin:0;
  --border-radius:8px;
  --box-shadow:0 3px 6px rgba(0,35,50,.16);
}
app-modal-summary ion-footer ion-button h3 {
  font-size:clamp(18px,2.5vw,26px)!important;
  white-space:nowrap;
}
@media(max-width:700px) {
  app-modal-summary ion-content { --padding-start:10px;--padding-end:10px; }
  app-modal-summary ion-footer { padding-left:8px;padding-right:8px; }
  app-modal-summary ion-footer ion-button h3 { font-size:17px!important; }
}