/* Retter-Portal v1.2.77 – ausschließlich Tablet-Feinschliff.
   Smartphone <=760px und normaler Desktop >1180px mit Maus bleiben unverändert. */

@media (min-width:761px) and (max-width:1180px){
  html,body{max-width:100%!important;overflow-x:hidden!important;}
  html body .app-shell{min-width:0!important;max-width:100%!important;}
  html body .main{min-width:0!important;max-width:100%!important;}

  /* Die Sidebar bleibt lesbar statt Texte und Kürzel zusammenzuquetschen. */
  html body .app-shell{grid-template-columns:244px minmax(0,1fr)!important;}
  html body .sidebar{
    width:244px!important;
    min-width:244px!important;
    max-width:244px!important;
    padding-inline:13px!important;
  }
  html body .sidebar .brand{padding-inline:7px!important;}
  html body .sidebar nav a{
    min-width:0!important;
    min-height:46px!important;
    gap:10px!important;
    padding:10px 10px!important;
    font-size:.88rem!important;
    line-height:1.22!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
  html body .sidebar nav a span{
    flex:0 0 30px!important;
    width:30px!important;
    min-width:30px!important;
    height:30px!important;
  }
  html body .sidebar .nav-section{margin-inline:9px!important;}

  /* Tablet-Header: gleiche Höhen, klare Abstände und kontrolliertes Kürzen. */
  html body .topbar{min-width:0!important;overflow:visible!important;}
  html body .topbar .topbar-desktop-shell{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    align-items:center!important;
    padding:9px 14px!important;
  }
  html body .topbar .topbar-title,
  html body .topbar .topbar-context,
  html body .topbar .topbar-actions{align-self:center!important;min-width:0!important;}
  html body .topbar .topbar-title{padding-right:2px!important;}
  html body .topbar .topbar-eyebrow{
    margin:0!important;
    min-height:42px!important;
    align-items:center!important;
    gap:6px!important;
    font-size:.62rem!important;
    letter-spacing:.07em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }
  html body .topbar .topbar-eyebrow>span:first-child{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  html body .topbar .topbar-version{
    flex:0 0 auto!important;
    min-height:26px!important;
    height:26px!important;
    padding:0 7px!important;
    font-size:.59rem!important;
    line-height:26px!important;
  }

  html body .topbar .department-context-switch,
  html body .topbar .department-context-static{
    display:grid!important;
    grid-template-columns:76px minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    margin:0!important;
    padding:4px 5px 4px 10px!important;
    border-radius:14px!important;
    overflow:hidden!important;
  }
  html body .topbar .department-context-switch>span,
  html body .topbar .department-context-static>span{
    position:static!important;
    inset:auto!important;
    display:block!important;
    align-self:center!important;
    width:76px!important;
    min-width:76px!important;
    max-width:76px!important;
    margin:0!important;
    padding:0!important;
    font-size:.58rem!important;
    line-height:1!important;
    letter-spacing:.08em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html body .topbar .department-context-switch select,
  html body .topbar .department-context-static strong{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    margin:0!important;
    padding:0 31px 0 10px!important;
    font-size:.79rem!important;
    line-height:34px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html body .topbar .department-context-static strong{padding-right:10px!important;}

  html body .topbar .topbar-actions,
  html body .topbar .topbar-user-cluster{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    gap:7px!important;
    overflow:hidden!important;
  }
  html body .topbar .theme-switch{
    flex:0 0 auto!important;
    height:40px!important;
    min-height:40px!important;
    padding:3px!important;
  }
  html body .topbar .theme-switch .theme-dot{
    width:28px!important;
    min-width:28px!important;
    height:32px!important;
    min-height:32px!important;
  }
  html body .topbar .theme-switch .theme-dot.auto{min-width:43px!important;padding-inline:7px!important;}
  html body .topbar .topbar-account-info{
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    max-width:190px!important;
    height:40px!important;
    min-height:40px!important;
    gap:6px!important;
    padding:4px 6px!important;
    overflow:hidden!important;
  }
  html body .topbar .topbar-role-badge{
    flex:0 1 auto!important;
    max-width:76px!important;
    min-height:28px!important;
    padding:5px 7px!important;
    font-size:.53rem!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html body .topbar .user-chip,
  html body .topbar .user-chip.has-role-badge{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:100px!important;
    padding:0 2px!important;
    font-size:.73rem!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html body .topbar .topbar-logout{flex:0 0 auto!important;}
  html body .topbar .topbar-logout .btn{
    height:40px!important;
    min-height:40px!important;
    min-width:70px!important;
    padding:0 10px!important;
    font-size:.72rem!important;
    white-space:nowrap!important;
  }

  /* Tabellen bleiben wie am PC, werden aber nicht in unlesbare Spalten gepresst. */
  html body .app-shell .main .content :is(.table-wrap,.data-table-card,.checks-table-wrap){
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html body .app-shell .main .content :is(.table-wrap,.data-table-card,.checks-table-wrap) table{
    width:max(100%,840px)!important;
    min-width:840px!important;
    table-layout:auto!important;
  }
  html body .app-shell .main .content .incident-list-table{width:max(100%,900px)!important;min-width:900px!important;}
  html body .app-shell .main .content :is(.table-wrap,.data-table-card,.checks-table-wrap) :is(th,td){
    min-width:82px!important;
    padding:12px 11px!important;
    vertical-align:middle!important;
    line-height:1.25!important;
    writing-mode:horizontal-tb!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
  }
  html body .app-shell .main .content :is(.table-wrap,.data-table-card,.checks-table-wrap) th{
    white-space:nowrap!important;
    font-size:.69rem!important;
    letter-spacing:.07em!important;
  }
  html body .app-shell .main .content .incident-title-cell{
    min-width:190px!important;
    max-width:230px!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
  }
  html body .app-shell .main .content .incident-action-cell{min-width:104px!important;}
  html body .app-shell .main .content :is(.pill,.status,.role,.badge,.secure-pill,.incident-status-pill){
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    min-height:34px!important;
    padding:7px 11px!important;
    font-size:.74rem!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
  html body .app-shell .main .content td:has(:is(.pill,.status,.role,.badge,.incident-status-pill)){min-width:132px!important;}
  html body .app-shell .main .content td .btn,
  html body .app-shell .main .content td button{
    min-width:max-content!important;
    white-space:nowrap!important;
  }
}

/* Mittlere Tablets mit sichtbarer Sidebar: eine echte, ruhige Kopfzeile. */
@media (min-width:960px) and (max-width:1180px){
  html body .topbar .topbar-desktop-shell{
    display:grid!important;
    grid-template-columns:minmax(132px,150px) minmax(215px,1fr) minmax(310px,auto)!important;
    grid-template-areas:"brand context actions"!important;
    column-gap:14px!important;
    row-gap:0!important;
    min-height:60px!important;
  }
  html body .topbar .topbar-title{grid-area:brand!important;}
  html body .topbar .topbar-context{grid-area:context!important;}
  html body .topbar .topbar-actions{grid-area:actions!important;}
}

/* Knappere Tabletbreiten: Feuerwehr bekommt eine eigene Zeile statt Überlappungen. */
@media (min-width:861px) and (max-width:959px){
  html body .topbar .topbar-desktop-shell{
    display:grid!important;
    grid-template-columns:minmax(130px,1fr) minmax(0,auto)!important;
    grid-template-areas:"brand actions" "context context"!important;
    column-gap:12px!important;
    row-gap:8px!important;
    padding-bottom:10px!important;
  }
  html body .topbar .topbar-title{grid-area:brand!important;}
  html body .topbar .topbar-context{grid-area:context!important;}
  html body .topbar .topbar-actions{grid-area:actions!important;}
}

/* Kleine Tablets behalten die bereits funktionierende Overlay-Sidebar. */
@media (min-width:761px) and (max-width:860px){
  html body .app-shell{display:block!important;}
  html body .sidebar{
    position:fixed!important;
    width:min(84vw,300px)!important;
    min-width:0!important;
    max-width:min(84vw,300px)!important;
  }
}

/* Große iPads im Querformat: nur Touch-Geräte, normale Desktops bleiben unberührt. */
@media (min-width:1181px) and (max-width:1366px) and (hover:none) and (pointer:coarse){
  html body .app-shell{grid-template-columns:248px minmax(0,1fr)!important;}
  html body .sidebar{width:248px!important;min-width:248px!important;max-width:248px!important;padding-inline:13px!important;}
  html body .sidebar nav a{gap:10px!important;padding:10px!important;font-size:.88rem!important;line-height:1.22!important;word-break:normal!important;overflow-wrap:normal!important;}
  html body .sidebar nav a span{flex:0 0 30px!important;width:30px!important;min-width:30px!important;}
  html body .topbar .topbar-desktop-shell{
    grid-template-columns:minmax(160px,178px) minmax(285px,1fr) minmax(350px,auto)!important;
    grid-template-areas:"brand context actions"!important;
    align-items:center!important;
    gap:14px!important;
    min-height:62px!important;
    padding:9px 14px!important;
  }
  html body .topbar .department-context-switch,
  html body .topbar .department-context-static{height:42px!important;min-height:42px!important;max-height:42px!important;align-items:center!important;}
  html body .topbar .topbar-actions,
  html body .topbar .topbar-user-cluster{height:42px!important;min-height:42px!important;gap:7px!important;}
  html body .topbar .topbar-account-info{max-width:205px!important;height:40px!important;min-height:40px!important;}
  html body .topbar .user-chip,
  html body .topbar .user-chip.has-role-badge{max-width:108px!important;}
  html body .app-shell .main .content :is(.table-wrap,.data-table-card,.checks-table-wrap){overflow-x:auto!important;overflow-y:visible!important;}
  html body .app-shell .main .content :is(.table-wrap,.data-table-card,.checks-table-wrap) table{width:max(100%,900px)!important;min-width:900px!important;table-layout:auto!important;}
  html body .app-shell .main .content .incident-list-table{width:max(100%,940px)!important;min-width:940px!important;}
  html body .app-shell .main .content :is(th,td){word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important;}
  html body .app-shell .main .content :is(.pill,.status,.role,.badge,.incident-status-pill){min-height:34px!important;padding:7px 11px!important;white-space:nowrap!important;}
}