/* KnowCore V1.7.13.16.3.7.4.14
   Tablet-Konsistenz: 641–1280 CSS-px.
   Desktop >1280 bleibt unverändert; Handy <=640 bleibt bei mobile-consistency.
   Fix: typische Tablets/DevTools mit 768/788/800 CSS-px lagen zuvor fälschlich im Handy-Layer. */

@media (min-width: 641px) and (max-width: 1280px) {
  html,
  body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  main.main,
  main.main > .card,
  main.main > section.card,
  main.main > .topbar,
  main.main .cardInner {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Kopfaktionen dürfen auf Tablets nicht rechts aus dem Viewport laufen. */
  main.main > .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    overflow: hidden !important;
  }

  main.main > .topbar > .row,
  main.main > .topbar .row.actions {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 7px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  main.main > .topbar > .row > .btn,
  main.main > .topbar .row.actions > .btn {
    flex: 0 1 auto !important;
    min-width: 116px !important;
    max-width: 100% !important;
  }

  /* ================================================================
     Artikelverwaltung
     Desktop-Seitenleiste wird auf Tablets zu einer oberen Navigation.
     ================================================================ */
  #mod-articles .kcUnifiedModuleShellV191,
  #mod-articles.tcTdmShellV802,
  #mod-articles .tcTdmShellV802,
  #mod-articles .tcTdmShellV803 {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #mod-articles .kcUnifiedModuleSideV191,
  #mod-articles .tcTdmSideV802 {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 14px !important;
    -webkit-overflow-scrolling: touch;
  }

  #mod-articles .tcTdmLogoV802,
  #mod-articles .tcTdmMenuTitleV802,
  #mod-articles .kcUnifiedSideFooterV191 {
    display: none !important;
  }

  #mod-articles .kcUnifiedSideMenuV191 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    width: max-content !important;
    min-width: 100% !important;
    margin: 0 !important;
  }

  #mod-articles .kcUnifiedSideMenuV191 .tcTdmSideBtnV802 {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 13px !important;
    white-space: nowrap !important;
  }

  #mod-articles .kcUnifiedModuleWorkV191,
  #mod-articles .kcArticleModulePanelV191,
  #mod-articles .kcArticleWorkspaceV19,
  #mod-articles .kcArticleDetailV19 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #mod-articles .kcArticleToolbarV19 {
    grid-template-columns: minmax(0, 1fr) minmax(180px, .55fr) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #mod-articles .kcArticleToolbarActionsV19 {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  #mod-articles .kcArticleWorkspaceV19,
  #mod-articles .kcArticleFormGridV19 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Der zentrale Neu-anlegen-Dialog bleibt auf Tablet gut nutzbar. */
  .kcUnifiedCreateCardV192 {
    width: min(1040px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
  }

  .kcUnifiedCreateBodyV192,
  .kcUnifiedSectionV192 {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .kcUnifiedGridV192 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* ================================================================
     ToolCore / Werkzeugmodul
     Gleiches Navigationsprinzip wie Artikelverwaltung.
     ================================================================ */
  #mod-toolcore .tcTdmShellV802,
  #mod-toolcore .tcTdmShellV803 {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #mod-toolcore .tcTdmSideV802 {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  #mod-toolcore .tcTdmLogoV802,
  #mod-toolcore .tcTdmMenuTitleV802 {
    display: none !important;
  }

  #mod-toolcore .tcTdmSideBtnV802 {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    margin: 0 !important;
    min-height: 42px !important;
    white-space: nowrap !important;
  }

  #mod-toolcore .tcTdmWorkV802,
  #mod-toolcore .tcTdmBodyV802,
  #mod-toolcore #tcRecordDetailWrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #mod-toolcore .tcTdmSearchGridV802,
  #mod-toolcore .tcTdmHeadGridV802,
  #mod-toolcore .tcSearchTopV808,
  #mod-toolcore .tcLocationFilterV805 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ================================================================
     Fuhrpark / Qualität / Instandhaltung:
     große Desktop-Seitenleisten auf Tablet nach oben.
     ================================================================ */
  #mod-fleet .fleetShellV80340,
  #mod-fleet > .card .tcTdmShellV802,
  #mod-quality .qsShellV80360,
  #mod-maintenance .maintShellV80350 {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #mod-fleet .fleetSideV80340,
  #mod-quality .qsSideV80360,
  #mod-maintenance .maintSideV80350 {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px !important;
    margin-bottom: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  #mod-quality .qsBrandV80360,
  #mod-quality .qsSideStatusV80360,
  #mod-fleet .fleetSideTitleV80340,
  #mod-fleet .fleetSideHintV80340 {
    display: none !important;
  }

  #mod-quality .qsNavV80360,
  #mod-fleet .fleetNavV80340,
  #mod-maintenance .maintSideV80350 {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
  }

  #mod-quality .qsNavV80360,
  #mod-fleet .fleetNavV80340 {
    display: flex !important;
    width: max-content !important;
    min-width: 100% !important;
  }

  #mod-quality .qsNavBtnV80360,
  #mod-fleet .fleetNavBtnV80340,
  #mod-maintenance .maintSideBtnV80350 {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  #mod-quality .qsContentV80360,
  #mod-quality .qsPanelV80360,
  #mod-fleet .fleetContentV80340,
  #mod-fleet .fleetPanelV80340,
  #mod-maintenance .maintMainV80350 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* ================================================================
     Wissen / AI / Stammdaten-Technik:
     keine halb abgeschnittenen Desktopspalten auf Tablets.
     ================================================================ */
  main.main[data-module="ai"] > .card > .grid2,
  .knowledgeReviewGridV82,
  .knowledgeInlineStageV82,
  [data-tabpanel="s-machines"] .machinePageGrid,
  .kcTechShellV20 {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Reiterleisten dürfen horizontal scrollen statt Inhalte abzuschneiden. */
  .tabs,
  .tabRow,
  .tcTdmTabsV802,
  .kcUnifiedTabsV191 {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Tabellen bleiben innerhalb der Karte. */
  .tableWrap,
  .qsTableWrapV80360,
  .fleetTableWrapV80340,
  .tcTableWrap,
  .tcTechResultV802 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  input,
  select,
  textarea,
  button,
  .btn {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Schmaleres Tablet: Formulare ebenfalls einspaltig. */
@media (min-width: 641px) and (max-width: 1020px) {
  #mod-articles .kcArticleToolbarV19,
  .kcUnifiedContextBarV192,
  .kcUnifiedGridV192,
  .machineFormGrid,
  .machineFormGridCols {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .kcUnifiedGridV192 .span2,
  .kcUnifiedGridV192 .span3 {
    grid-column: auto !important;
  }
}


/* Explizite Überschreibung des älteren <=900-Mobile-Layers.
   Wichtig für 768/788/800px Tabletbreiten. */
@media (min-width: 641px) and (max-width: 900px) {
  #mod-articles .kcUnifiedModuleShellV191 {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #mod-articles .kcUnifiedModuleSideV191 {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    margin: 0 0 10px !important;
    padding: 8px !important;
  }

  #mod-articles .kcUnifiedSideMenuV191 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 7px !important;
    width: max-content !important;
    min-width: 100% !important;
  }

  #mod-articles .kcUnifiedSideMenuV191 .tcTdmMenuTitleV802,
  #mod-articles .kcUnifiedSideFooterV191 {
    display: none !important;
  }

  #mod-articles .kcUnifiedSideMenuV191 .tcTdmSideBtnV802 {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 42px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  #mod-articles .kcUnifiedModuleWorkV191,
  #mod-articles .kcArticleModulePanelV191,
  #mod-articles .kcArticleWorkspaceV19,
  #mod-articles .kcArticleDetailV19 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #mod-articles .kcArticleToolbarV19 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #mod-articles .kcArticleToolbarActionsV19 {
    grid-column: auto !important;
    justify-content: flex-start !important;
  }

  #mod-articles .kcArticleToolbarActionsV19 .btn {
    width: auto !important;
    min-width: 120px !important;
  }
}