/* Lokatel Press 10.5.1 — professionele mobiele beheeromgeving.
 * Alleen interne portalen; openbare website blijft onaangeraakt.
 */

@media (max-width: 820px) {
  html, body.lp-portal-body {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    background: #070a0e !important;
  }

  body.lp-portal-body * { box-sizing: border-box !important; }

  .lp-portal,
  .lp-workspace,
  .lp-workspace-main,
  .lp-screen,
  .lp-portal-embedded-admin,
  .lp-command-dashboard {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .lp-workspace-main {
    padding: 12px 12px calc(88px + env(safe-area-inset-bottom)) !important;
  }

  /* Bovenbalk */
  .lp-topbar {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    min-height: 62px !important;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px !important;
  }
  .lp-topbar-brand:before { font-size: 12px !important; }
  .lp-topbar-brand strong { max-width: 100% !important; }

  /* Zijmenu */
  .lp-sidebar { width: min(88vw, 320px) !important; }
  .lp-sidebar-logo .lp-logo { width: 190px !important; }
  .lp-sidebar nav button,
  .lp-sidebar nav a {
    min-height: 48px !important;
    font-size: 13px !important;
  }

  /* Typografie */
  h1 { font-size: clamp(24px, 7vw, 32px) !important; line-height: 1.12 !important; }
  h2 { font-size: 19px !important; line-height: 1.25 !important; }
  h3 { font-size: 16px !important; line-height: 1.3 !important; }
  p, li, label, input, select, textarea, button, a { font-size: 14px !important; }

  /* Algemene kaarten */
  .lp-portal-card,
  .lp-v850-panel,
  .lp-command-card,
  .lp-story-form,
  .lp-system-card,
  .lp-admin-card,
  .lp-staff-pro-card,
  .lp-portal-embedded-admin > section,
  .lp-portal-embedded-admin > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* Alle grids naar één kolom */
  .lp-command-layout,
  .lp-command-main,
  .lp-command-rail,
  .lp-command-metrics,
  .lp-v850-main-grid,
  .lp-v850-side-stack,
  .lp-v850-metrics,
  .lp-system-grid,
  .lp-admin-columns,
  .lp-staff-layout,
  .lp-form-grid,
  .lp-field-grid,
  .lp-settings-form,
  .lp-media-grid,
  .lp10-permission-groups,
  .lp-pager-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  /* Compacte dashboardcijfers: twee per rij */
  .lp-command-metrics,
  .lp-v850-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .lp-command-metrics button,
  .lp-v850-metrics button {
    min-height: 92px !important;
    padding: 12px !important;
  }
  .lp-command-metrics strong,
  .lp-v850-metrics strong { font-size: 24px !important; }

  /* Formulieren */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 12px 13px !important;
    border-radius: 10px !important;
  }
  textarea { min-height: 160px !important; resize: vertical !important; }
  input[type="file"] { min-height: 44px !important; overflow: hidden !important; }

  button,
  .button,
  .lp-button,
  input[type="submit"] {
    min-height: 46px !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* Tabellen worden mobiele kaarten */
  .lp-portal-embedded-admin table,
  .lp-portal-embedded-admin thead,
  .lp-portal-embedded-admin tbody,
  .lp-portal-embedded-admin tr,
  .lp-portal-embedded-admin th,
  .lp-portal-embedded-admin td {
    display: block !important;
    width: 100% !important;
  }
  .lp-portal-embedded-admin thead { display: none !important; }
  .lp-portal-embedded-admin tr {
    margin-bottom: 10px !important;
    padding: 12px !important;
    border: 1px solid #25303b !important;
    border-radius: 12px !important;
    background: #0d1319 !important;
  }
  .lp-portal-embedded-admin td {
    padding: 7px 0 !important;
    border: 0 !important;
    overflow-wrap: anywhere !important;
  }

  /* Meldkamer / P2000 */
  .lp-p2000-row,
  .lp-dispatch-row,
  .lp-command-article-list > a,
  .lp-v850-p2000-item {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 13px !important;
  }
  .lp-p2000-row button,
  .lp-dispatch-row button,
  .lp-v850-p2000-item button {
    width: 100% !important;
  }

  /* Medewerkers */
  .lp-staff-pro-card,
  .lp-staff-card,
  .lp-team-card,
  [class*="staff-card"] {
    grid-template-columns: 1fr !important;
  }
  .lp-staff-pro-card img,
  .lp-staff-card img,
  .lp-team-card img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }

  /* Modals en zijpanelen volledig scherm */
  dialog,
  .lp-modal,
  .lp-dialog,
  .lp-drawer,
  .lp-sidepanel,
  [role="dialog"] {
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
  }
  .lp-modal-content,
  .lp-dialog-content,
  .lp-drawer-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
  }

  /* Media */
  img, video, iframe { max-width: 100% !important; height: auto !important; }
  .lp-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Actiebalk onderaan */
  .lp-submit-bar,
  .lp-form-actions,
  .lp-modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 50 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
    background: rgba(7, 10, 14, .97) !important;
    border-top: 1px solid #26303a !important;
    backdrop-filter: blur(12px) !important;
  }
  .lp-submit-bar > *,
  .lp-form-actions > *,
  .lp-modal-actions > * { width: 100% !important; }

  /* Onderste appnavigatie */
  .lp-mobile-mainnav {
    min-height: 70px !important;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
  }
  .lp-mobile-mainnav button,
  .lp-mobile-mainnav a {
    min-width: 0 !important;
    padding: 6px 3px !important;
    font-size: 10px !important;
  }

  /* Verberg niet-essentiële dashboarddetails op klein scherm */
  .lp-command-clock,
  .lp-reference-weather-mini,
  .lp-reference-breaking,
  .lp-desktop-only { display: none !important; }
}

@media (max-width: 390px) {
  .lp-workspace-main { padding-left: 8px !important; padding-right: 8px !important; }
  .lp-command-metrics,
  .lp-v850-metrics { grid-template-columns: 1fr !important; }
  .lp-media-grid { grid-template-columns: 1fr !important; }
  .lp-sidebar { width: 92vw !important; }
}

/* Login mobiel */
@media (max-width: 820px) {
  .lp-login-page {
    min-height: 100dvh !important;
    display: grid !important;
    place-items: center !important;
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important;
  }
  .lp-login-card {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }
  .lp-login-brand .lp-logo { width: min(240px, 80vw) !important; height: auto !important; }
}