/* Phone layout overrides; desktop sizes, permissions and data remain unchanged. */
.mobile-menu-close { display:none; }
.mhb-table-scroll { min-width:0; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
.mhb-table-scroll:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.mhb-table-hint { display:none; }
.mobile-installation-list { display:none; }
@media (max-width:900px) {
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body { overflow-wrap:anywhere; }
  .app.authenticated { grid-template-columns:minmax(0,1fr); }
  main { width:100%; min-width:0; padding:10px max(10px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
  :is(.page,.modal-card) :is(div,form,label,fieldset,section,article) { min-width:0!important; }
  :is(.page,.modal-card) :is(input,select,textarea,.search) { min-width:0!important; max-width:100%; }
  :is(.page,.modal-card) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { font-size:16px!important; }
  :is(.page,.modal-card) :is(img,video,iframe,canvas,svg) { max-width:100%; }
  :is(.page,.modal-card) :is(pre,code) { min-width:0!important; max-width:100%; white-space:pre-wrap!important; overflow-wrap:anywhere; }
  :is(.page,.modal-card) .btn { max-width:100%; min-height:40px; white-space:normal!important; line-height:1.35; }
  .topbar > div:first-child { flex-wrap:wrap; gap:8px!important; }
  .title { min-width:0; flex:1 1 170px; }
  .title h1 { font-size:24px; line-height:1.2; }
  .title p { font-size:13px; line-height:1.45; }
  .top-actions { min-width:0; flex-wrap:wrap; }
  .user-menu-card { flex:1 1 140px; min-width:0; max-width:100%; }
  .user-menu-text { flex:1; }
  .user-menu-text strong { max-width:100%; }
  .logout-button { min-height:42px; }
  :is(.section-head,.table-toolbar,.jkbms-progress-head,.bms-chart-title,.mhb-mobile-flex) { flex-wrap:wrap!important; gap:8px; }
  .table-toolbar { padding:12px; }
  .table-toolbar .search { width:100%; flex:1 1 190px; }
  .card.section { padding:14px; }
  .card,.system-box,.install-item,.customer-card { min-width:0; }
  .system-row { flex-wrap:wrap; gap:5px 10px; }
  .system-row > :is(strong,span,div) { min-width:0; max-width:100%; }
  .system-row > strong { text-align:right; margin-left:auto; }
  .system-row :is(input[type="checkbox"],input[type="radio"]) { flex-shrink:0; }
  .sidebar,.sidebar.menu-popup-open { height:100vh; height:100dvh; overflow-y:auto; overflow-x:hidden; padding-top:max(10px,env(safe-area-inset-top)); padding-bottom:max(16px,env(safe-area-inset-bottom)); }
  .mobile-menu-close { display:block; position:sticky; top:0; z-index:2; margin:0 0 8px auto; min-height:38px; border:1px solid rgba(255,255,255,.3); border-radius:9px; padding:7px 11px; background:#17365d; color:#fff; font:inherit; font-size:13px; }
  /* Keep the menu trigger in the normal document flow. A sticky trigger covered
     the dashboard title and controls while scrolling in the Android WebView. */
  .mobile-menu-button { position:relative!important; top:auto!important; z-index:35; }
  .sidebar .menu-group .menu-sub { min-width:0; overflow-wrap:anywhere; }
  .modal-backdrop { padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); }
  .modal-backdrop .modal-card { width:100%!important; max-width:100%!important; max-height:calc(100vh - 16px)!important; max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important; min-height:0; padding:14px; border-radius:14px; overflow-y:auto; }
  .modal-head { gap:9px; position:sticky; top:0; z-index:3; background:#fff; }
  .modal-head > div { flex:1; min-width:0; }
  .modal-head h2 { font-size:20px!important; line-height:1.25; overflow-wrap:anywhere; }
  .modal-close { flex:0 0 40px; width:40px; height:40px; }
  #jkbmsGatewayModal .modal-card { padding:0; overflow:hidden; }
  #jkbmsGatewayModal .modal-head { padding:14px 12px 10px!important; }
  #jkbmsGatewayModal #jkbmsModalContent { padding:4px 12px 14px!important; }
  #jkbmsGatewayModal.jkbms-pi-compact {
    padding:0!important;
    place-items:stretch;
    background:var(--panel,#fff);
  }
  #jkbmsGatewayModal.jkbms-pi-compact .modal-card {
    width:100vw!important;
    max-width:none!important;
    height:100vh;
    height:100dvh;
    max-height:none!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  #jkbmsGatewayModal.jkbms-pi-compact .modal-head {
    padding:max(14px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left))!important;
    border-bottom:1px solid var(--border);
  }
  #jkbmsGatewayModal.jkbms-pi-compact #jkbmsModalContent {
    padding:10px max(12px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
  }
  #customerDossierModal .modal-head { top:-14px; margin:-14px -14px 12px; padding:14px; }
  .quick-tile { min-height:90px; padding:12px; }
  .kpis,.page#dashboard>.kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .kpi { padding:12px; }
  .kpi .label { font-size:12px; }
  .kpi .value { font-size:25px; white-space:normal; }
  .mhb-table-scroll table { min-width:640px; }
  .mhb-table-hint { display:block; margin:6px 0; color:var(--muted); font-size:11px; }
  .mhb-table-scroll th,.mhb-table-scroll td { overflow-wrap:normal; }
  #installations .desktop-installation-table { display:none; }
  #installations .mobile-installation-list { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding:12px; }
  #installations .mobile-installation-card { min-width:0; padding:14px; border:1px solid var(--border); border-left:5px solid #8b98aa; border-radius:14px; background:var(--panel); box-shadow:0 5px 15px rgba(23,54,93,.07); }
  #installations .mobile-installation-card.mobile-installation-green { border-left-color:var(--green); }
  #installations .mobile-installation-card.mobile-installation-orange { border-left-color:var(--orange); }
  #installations .mobile-installation-card.mobile-installation-red { border-left-color:var(--red); }
  #installations .mobile-installation-card.mobile-installation-blue { border-left-color:var(--blue); }
  #installations .mobile-installation-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  #installations .mobile-installation-soc { flex:0 0 auto; text-align:right; }
  #installations .mobile-installation-soc small { display:block; color:var(--muted); font-size:10px; }
  #installations .mobile-installation-soc strong { display:block; margin-top:2px; color:var(--text); font-size:20px; line-height:1; }
  #installations .mobile-installation-customer { margin-top:13px; }
  #installations .mobile-installation-customer strong { display:block; color:var(--text); font-size:17px; line-height:1.25; }
  #installations .mobile-installation-customer span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
  #installations .mobile-installation-name { margin-top:10px; color:var(--text); font-size:14px; font-weight:750; }
  #installations .mobile-installation-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0 0; }
  #installations .mobile-installation-details>div { min-width:0; padding:9px 10px; border-radius:10px; background:var(--soft); }
  #installations .mobile-installation-details .mobile-installation-last { grid-column:1/-1; }
  #installations .mobile-installation-details dt { color:var(--muted); font-size:10px; }
  #installations .mobile-installation-details dd { margin:3px 0 0; color:var(--text); font-size:12px; font-weight:700; overflow-wrap:anywhere; }
  #installations .mobile-installation-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
  #installations .mobile-installation-actions .btn:only-child { grid-column:1/-1; }
  #installations .mobile-installation-empty { padding:24px 14px; border:1px dashed var(--border); border-radius:12px; color:var(--muted); text-align:center; }
  .mhb-table-scroll.mhb-mobile-card-region { max-width:none; overflow:visible; outline:0; }
  .mhb-mobile-card-table { display:block; width:100%; min-width:0!important; border-collapse:separate; }
  .mhb-mobile-card-table thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .mhb-mobile-card-table tbody { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; width:100%; padding:10px; }
  .mhb-mobile-card-table tbody tr { display:block; min-width:0; overflow:hidden; border:1px solid var(--border); border-left:5px solid var(--blue); border-radius:14px; background:var(--panel); box-shadow:0 5px 15px rgba(23,54,93,.07); }
  .mhb-mobile-card-table tbody td { display:grid; grid-template-columns:minmax(92px,36%) minmax(0,1fr); align-items:start; gap:10px; width:100%; padding:9px 12px; border:0; border-bottom:1px solid var(--border); background:transparent!important; text-align:right; overflow-wrap:anywhere; }
  .mhb-mobile-card-table tbody td::before { content:attr(data-label); min-width:0; color:var(--muted); font-size:10px; font-weight:600; line-height:1.35; text-align:left; }
  .mhb-mobile-card-table tbody td:last-child { border-bottom:0; }
  .mhb-mobile-card-table tbody td[colspan] { display:block; padding:18px 12px; color:var(--muted); text-align:center; }
  .mhb-mobile-card-table tbody td[colspan]::before { display:none; }
  .mhb-mobile-card-table tbody td>* { min-width:0; max-width:100%; justify-self:end; }
  .mhb-mobile-card-table tbody td .sub,.mhb-mobile-card-table tbody td small { text-align:right; }
  .mhb-mobile-card-table tbody td .btn { width:auto; min-width:118px; }
  .mhb-mobile-card-table tbody tr.mhb-mobile-state-green { border-left-color:var(--green); }
  .mhb-mobile-card-table tbody tr.mhb-mobile-state-orange { border-left-color:var(--orange); }
  .mhb-mobile-card-table tbody tr.mhb-mobile-state-red { border-left-color:var(--red); }
  .mhb-mobile-card-table tbody tr.mhb-mobile-state-blue { border-left-color:var(--blue); }
  .mhb-mobile-card-table tbody tr.dvcc-warning { border-left-color:var(--orange); }
  .mhb-mobile-card-table tbody tr.dvcc-critical { border-left-color:var(--red); }
  .auth-screen { min-height:100vh; min-height:100dvh; padding:16px max(12px,env(safe-area-inset-right)) 16px max(12px,env(safe-area-inset-left)); }
  .auth-card { padding:22px 18px; border-radius:17px; min-width:0; }
  .auth-card h1 { font-size:23px; }
  .auth-card input { min-width:0; font-size:16px; }
  .whatsapp-reply { grid-template-columns:minmax(0,1fr) auto; }
  .whatsapp-reply textarea { width:100%; }
  .whatsapp-thread { min-height:320px; height:65vh; height:65dvh; }
  .whatsapp-bubbles { padding:12px; }
  .whatsapp-conversation-head { flex-wrap:wrap; }
  .whatsapp-thread-head { overflow-wrap:anywhere; }
  #projectsContent.project-detail .project-section-nav { position:static; flex-wrap:wrap; overflow-x:visible; }
  .project-mobile-choices > .card { margin:0; }
  .project-mobile-choices .project-choice-grid { margin-bottom:0; }
  .project-mobile-choices .quick-tile { width:100%; min-height:96px; }
}
@media (max-width:620px) {
  /* Includes inline grids in installation/settings dialogs, not just projects. */
  :is(.page,.modal-card) [style*="grid-template-columns"],
  :is(.page,.modal-card) :is(.project-form-grid,.project-grid,.project-choice-grid,.agreement-form-grid,.project-customer-dialog form,.wage-totals,.api-gauges,.health-device-list) { grid-template-columns:minmax(0,1fr)!important; }
  :is(.page,.modal-card) [style*="grid-template-columns"] > *,
  :is(.page,.modal-card) :is(.project-form-grid,.agreement-form-grid) > * { grid-column:auto!important; }
  .jkbms-parameter-grid { grid-template-columns:minmax(0,1fr)!important; }
  #projectsContent.project-detail :is(.project-form-grid,.project-time-entry>.project-form-grid,.project-metadata>.project-form-grid) { grid-template-columns:minmax(0,1fr)!important; }
  #projectsContent.project-detail :is(.project-field-wide,.project-field-full,.project-members-field,.project-description-field) { grid-column:auto; }
  .jkbms-parameter-actions { flex-wrap:wrap; }
  .alert,#liveFaults .alert { grid-template-columns:5px minmax(0,1fr); }
  .alert > :last-child:not(:nth-child(2)) { grid-column:2; justify-self:start; }
  .dossier-actions .btn { flex:1 1 130px; }
}
@media (max-width:360px) {
  .kpis,.page#dashboard>.kpis,.victron-live-kpis,.financial-grid,.dossier-stats { grid-template-columns:minmax(0,1fr); }
  #projectsContent.project-detail .project-installation-grid { grid-template-columns:minmax(0,1fr); }
  .whatsapp-reply { grid-template-columns:minmax(0,1fr); }
  .whatsapp-reply .btn { width:100%; }
  .sidebar .menu-group.open .menu-subitems { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) { .sidebar { transition:none; } }