/* Retter-Portal v1.2.79 – tablet-only layout repair.
   Smartphone <=760px and normal desktop >1180px stay unchanged.
   Large iPads in landscape are targeted only as coarse pointer devices. */

@media (min-width:761px) and (max-width:1180px),
       (min-width:1181px) and (max-width:1366px) and (hover:none) and (pointer:coarse){
  :root{--rp-tablet-sidebar:232px!important;}

  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  html body .app-shell{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  /* Sidebar and content use the exact same width variable: no overlap and no dead gap. */
  html body .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:var(--rp-tablet-sidebar)!important;
    min-width:var(--rp-tablet-sidebar)!important;
    max-width:var(--rp-tablet-sidebar)!important;
    height:100dvh!important;
    padding:16px 12px 22px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    z-index:1400!important;
  }
  html body .main{
    width:calc(100% - var(--rp-tablet-sidebar))!important;
    min-width:0!important;
    max-width:calc(100% - var(--rp-tablet-sidebar))!important;
    margin-left:var(--rp-tablet-sidebar)!important;
    overflow:visible!important;
  }
  html body .content{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:18px 18px 34px!important;
    overflow-x:hidden!important;
  }

  html body .sidebar .brand{
    width:100%!important;
    min-width:0!important;
    margin-bottom:12px!important;
    padding:7px 5px 14px!important;
  }
  html body .sidebar .brand-logo{
    display:block!important;
    width:100%!important;
    max-width:205px!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  html body .sidebar .nav-section{
    margin:17px 9px 8px!important;
    font-size:.64rem!important;
    letter-spacing:.12em!important;
  }
  html body .sidebar nav a{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    gap:9px!important;
    margin:3px 0!important;
    padding:9px 10px!important;
    font-size:.86rem!important;
    line-height:1.2!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
  }
  html body .sidebar nav a span{
    flex:0 0 30px!important;
    width:30px!important;
    min-width:30px!important;
    height:30px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  /* One coherent header row where the available width permits it. */
  html body .topbar{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:visible!important;
  }
  html body .topbar .topbar-desktop-shell{
    display:grid!important;
    grid-template-columns:minmax(150px,174px) minmax(240px,1fr) max-content!important;
    grid-template-areas:"brand context actions"!important;
    align-items:center!important;
    column-gap:14px!important;
    row-gap:0!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:64px!important;
    margin:0!important;
    padding:9px 14px!important;
    overflow:visible!important;
  }
  html body .topbar .topbar-title{
    grid-area:brand!important;
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  html body .topbar .topbar-eyebrow{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    font-size:.62rem!important;
    line-height:1!important;
    letter-spacing:.08em!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;
    height:26px!important;
    min-height:26px!important;
    margin:0!important;
    padding:0 8px!important;
    font-size:.58rem!important;
    line-height:26px!important;
  }

  html body .topbar .topbar-context{
    grid-area:context!important;
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    margin:0!important;
    padding:0!important;
  }
  html body .topbar .department-context-switch,
  html body .topbar .department-context-static{
    display:grid!important;
    grid-template-columns:74px 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:flex!important;
    align-items:center!important;
    width:74px!important;
    min-width:74px!important;
    max-width:74px!important;
    height:34px!important;
    margin:0!important;
    padding:0!important;
    font-size:.57rem!important;
    line-height:1!important;
    letter-spacing:.08em!important;
    white-space:nowrap!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 34px 0 10px!important;
    font-size:.78rem!important;
    line-height:34px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  html body .topbar .topbar-actions{
    grid-area:actions!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:auto!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
    gap:8px!important;
    overflow:visible!important;
  }
  html body .topbar .theme-switch{
    flex:0 0 auto!important;
    height:40px!important;
    min-height:40px!important;
    margin:0!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;
    padding:0!important;
    font-size:.65rem!important;
  }
  html body .topbar .theme-switch .theme-dot.auto{
    width:auto!important;
    min-width:43px!important;
    padding:0 7px!important;
  }
  html body .topbar .topbar-user-cluster{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:auto!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    gap:8px!important;
    overflow:visible!important;
  }
  html body .topbar .topbar-account-info{
    display:flex!important;
    align-items:center!important;
    width:auto!important;
    min-width:0!important;
    max-width:205px!important;
    height:40px!important;
    min-height:40px!important;
    margin:0!important;
    padding:4px 6px!important;
    gap:6px!important;
    overflow:hidden!important;
  }
  html body .topbar .topbar-role-badge{
    flex:0 1 auto!important;
    min-width:0!important;
    max-width:78px!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;
    display:block!important;
    min-width:0!important;
    max-width:108px!important;
    padding:0 2px!important;
    font-size:.73rem!important;
    line-height:1.1!important;
    text-align:left!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html body .topbar .topbar-logout{
    flex:0 0 auto!important;
    margin:0!important;
  }
  html body .topbar .topbar-logout .btn{
    height:40px!important;
    min-height:40px!important;
    min-width:70px!important;
    margin:0!important;
    padding:0 10px!important;
    font-size:.72rem!important;
    white-space:nowrap!important;
  }

  /* Tablet content must never slide under the fixed sidebar. */
  html body .content>*{
    min-width:0!important;
    max-width:100%!important;
  }
  html body .content :is(.page-head,.page-hero,.card,.toolbar,.pagination,.grid,.form-grid,.detail-grid,.info-grid,.table-wrap,.data-table-card,.checks-table-wrap){
    min-width:0!important;
    max-width:100%!important;
  }
  html body .content :is(.page-head,.page-hero){
    gap:16px!important;
  }
  html body .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:100%!important;
    min-height:34px!important;
    padding:7px 11px!important;
    font-size:.73rem!important;
    line-height:1.08!important;
    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
  html body .content :is(.table-wrap,.data-table-card,.checks-table-wrap){
    width:100%!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 .content :is(.table-wrap,.data-table-card,.checks-table-wrap) table{
    width:max(100%,820px)!important;
    min-width:820px!important;
    table-layout:auto!important;
  }
  html body .content .incident-list-table{
    width:max(100%,880px)!important;
    min-width:880px!important;
  }
  html body .content :is(th,td){
    word-break:normal!important;
    overflow-wrap:break-word!important;
    hyphens:none!important;
  }
}

/* Medium tablets need a second row, but the sidebar/content geometry stays identical. */
@media (min-width:761px) and (max-width:1080px){
  html body .topbar .topbar-desktop-shell{
    grid-template-columns:minmax(145px,1fr) max-content!important;
    grid-template-areas:"brand actions" "context context"!important;
    column-gap:12px!important;
    row-gap:8px!important;
    min-height:106px!important;
    padding-bottom:10px!important;
  }
  html body .topbar .topbar-context{height:42px!important;}
}

/* Portrait/small tablets use the existing overlay-sidebar pattern. */
@media (min-width:761px) and (max-width:900px){
  :root{--rp-tablet-sidebar:0px!important;}
  html body .sidebar{
    width:min(84vw,310px)!important;
    min-width:0!important;
    max-width:min(84vw,310px)!important;
    transform:translateX(calc(-100% - 18px))!important;
    transition:transform .22s ease!important;
    z-index:4400!important;
  }
  html body.sidebar-open .sidebar{transform:translateX(0)!important;}
  html body .main{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
  }
  html body .topbar .topbar-desktop-shell{
    grid-template-columns:42px minmax(130px,1fr) max-content!important;
    grid-template-areas:"menu brand actions" "context context context"!important;
  }
  html body .topbar .topbar-tablet-menu{
    grid-area:menu!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    padding:0!important;
    border:1px solid var(--line)!important;
    border-radius:13px!important;
    background:var(--surface)!important;
    color:var(--text)!important;
  }
}