/* Lokatel Press 10.5.2 — layout hotfix voor interne beheeromgeving.
 * Openbare website wordt niet geraakt; dit bestand wordt alleen in het portaal geladen.
 */

/* Desktop: meer bruikbare ruimte en evenwichtige formulieren */
@media (min-width: 821px) {
  .lp-nieuws-redactie-v8210 .lp-workspace-main {
    width: 100% !important;
    max-width: 1680px !important;
    margin: 0 auto !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  .lp-portal-manager .lp-portal-embedded-admin {
    width: 100% !important;
    max-width: 1480px !important;
    margin-inline: auto !important;
  }
  .lp-portal-manager .lp-staff-layout {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }
  .lp-portal-manager .lp10-permission-groups {
    grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
    gap: 12px !important;
  }
  .lp-portal-manager .lp-pager-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    gap: 12px !important;
  }
  .lp-professional-editor-layout,
  .lp-story-form,
  .lp-news-editor {
    width: 100% !important;
    max-width: 100% !important;
  }
  .lp-editor-commandbar,
  .lp-editor-section,
  .lp-editor-overview-strip {
    width: 100% !important;
  }
}

/* Mobiel: één echte telefoonkolom, zonder verborgen overbreedte */
@media (max-width: 820px) {
  html,
  body.lp-portal-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
  }

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

  .lp-portal,
  .lp-workspace,
  .lp-workspace-main,
  .lp-screen,
  .lp-professional-editor-layout,
  .lp-story-form,
  .lp-news-editor,
  .lp-editor-commandbar,
  .lp-editor-overview-strip,
  .lp-editor-section,
  .lp-portal-embedded-admin,
  .lp-portal-embedded-admin > *,
  .lp-staff-layout,
  .lp-system-grid,
  .lp-admin-columns {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .lp-workspace-main,
  .lp-nieuws-redactie-v8210 .lp-workspace-main {
    padding: 8px 8px calc(164px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }

  /* Bovenbalk compact houden */
  .lp-topbar,
  .lp-nieuws-redactie-v8210 .lp-topbar {
    width: 100% !important;
    min-height: 58px !important;
    padding-inline: 8px !important;
    overflow: hidden !important;
  }
  .lp-topbar-brand { min-width: 0 !important; }
  .lp-topbar-brand strong {
    overflow: hidden !important;
    max-width: 48vw !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Artikelwerkruimte */
  .lp-story-form,
  .lp-news-editor {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .lp-editor-commandbar {
    display: block !important;
    padding: 14px 12px !important;
    border-radius: 12px 12px 0 0 !important;
  }
  .lp-editor-command-copy h1 {
    margin: 5px 0 6px !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
  }
  .lp-editor-command-copy p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  /* Desktopacties verdwijnen mobiel; mobiele actiebalk neemt dit over */
  .lp-editor-command-actions { display: none !important; }

  /* Stappen passen altijd binnen het scherm */
  .lp-editor-tabs,
  .lp-nieuws-redactie-v8210 .lp-editor-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    padding: 6px !important;
    overflow: hidden !important;
  }
  .lp-editor-tabs button {
    min-width: 0 !important;
    min-height: 64px !important;
    padding: 7px 4px !important;
  }
  .lp-editor-tabs button span {
    display: block !important;
    overflow: visible !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  /* Geen horizontale carrousel voor voortgang; compacte 2x2 indeling */
  .lp-editor-overview-strip,
  .lp-nieuws-redactie-v8210 .lp-editor-overview-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }
  .lp-editor-overview-strip > div {
    grid-column: 1 / -1 !important;
  }
  .lp-editor-overview-strip > div,
  .lp-editor-overview-strip > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 64px !important;
    padding: 10px !important;
  }
  .lp-editor-overview-strip strong {
    white-space: normal !important;
  }
  .lp-editor-overview-strip > button:last-child {
    grid-column: 1 / -1 !important;
  }

  .lp-editor-section {
    padding: 18px 12px 24px !important;
    overflow: hidden !important;
  }
  .lp-editor-section-heading h2 {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
  .lp-editor-section-heading p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .lp-headline-field input {
    min-height: 58px !important;
    padding: 12px 14px !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .lp-editor-meta-grid,
  .lp-fact-desk-grid,
  .lp-photo-processing-options,
  .lp-photographer-submit-card,
  .lp10-permission-groups,
  .lp-pager-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px !important;
  }

  .lp-editor-meta-grid > *,
  .lp-fact-desk-grid > *,
  .lp-topic-picker,
  .lp-upload-panel,
  .lp-article-video-upload,
  .lp-local-ai-panel {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .lp-topic-choice-grid,
  .lp-nieuws-redactie-v8210 .lp-topic-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .lp-topic-choice-grid span {
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 9px 7px !important;
    overflow-wrap: anywhere !important;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  [contenteditable="true"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }

  img,
  video,
  iframe,
  canvas,
  svg {
    max-width: 100% !important;
  }

  /* Herstelmelding compacter en schermbreed */
  .lp-recovery-banner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 15px !important;
  }
  .lp-recovery-banner > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .lp-recovery-banner button {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  /* Twee vaste balken zonder overlap: acties boven navigatie */
  .lp-mobile-actionbar {
    position: fixed !important;
    z-index: 9600 !important;
    right: 0 !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 92px 112px !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 8px !important;
    background: #080c11 !important;
  }
  .lp-mobile-actionbar > div,
  .lp-mobile-actionbar button {
    min-width: 0 !important;
  }

  .lp-mobile-mainnav {
    position: fixed !important;
    z-index: 9500 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 72px !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    background: #06090d !important;
  }
  .lp-mobile-mainnav button {
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 5px 3px !important;
  }
  .lp-mobile-mainnav button span {
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  /* Embedded beheerformulieren */
  .lp-portal-embedded-admin,
  .lp-portal-embedded-admin :where(.wrap,.lp-admin,.lp-media-engine,.lp-system-panel,.lp-portal-admin-page) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-inline: 0 !important;
  }
  .lp-portal-embedded-admin :where(form,section,.card,.postbox,[class*="panel"],[class*="box"]) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 390px) {
  .lp-workspace-main,
  .lp-nieuws-redactie-v8210 .lp-workspace-main {
    padding-inline: 6px !important;
  }
  .lp-topic-choice-grid,
  .lp-nieuws-redactie-v8210 .lp-topic-choice-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .lp-mobile-actionbar {
    grid-template-columns: minmax(0, 1fr) 82px 100px !important;
  }
  .lp-mobile-actionbar small { display: none !important; }
}