/* DF13AB HF2
   - Search moves from header into central workspace.
   - User/session returns to header right.
   - API/version is shown below product name.
   - Side panes can resize/collapse and remember state.
*/

:root{
  --df13-topbar-height:86px;
  --df13-left-width:270px;
  --df13-right-width:360px;
  --df13-panel-handle:8px;
}

/* Header: brand left, session right. Search no longer consumes header space. */
.topbar{
  height:var(--df13-topbar-height) !important;
  min-height:var(--df13-topbar-height);
  display:grid !important;
  grid-template-columns:minmax(280px,1fr) auto !important;
  align-items:center !important;
  column-gap:18px !important;
  padding:0 18px !important;
  box-sizing:border-box;
}

.brand{
  min-width:0;
  align-items:center;
}

.brand > div:not(.mark){
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

.brand strong{
  line-height:1.15;
}

.brand > div:not(.mark) > span{
  margin-top:4px;
}

.status.df13-version{
  order:2;
  display:flex !important;
  align-items:center;
  gap:6px;
  margin-top:4px;
  padding:0;
  min-width:0;
  font-size:10px;
  line-height:1.15;
  color:#667b88;
  background:transparent;
  border:0;
}

.status.df13-version + span{
  order:3;
}

/* Session block is a normal header element; never floats over search. */
.df13-user-chip{
  position:static !important;
  inset:auto !important;
  width:auto !important;
  max-width:min(390px,42vw) !important;
  min-width:0;
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:8px 12px !important;
  margin:0 !important;
  border:1px solid #d5e0e7;
  border-radius:999px !important;
  background:#fff;
  box-shadow:none !important;
  font-size:12px;
  white-space:nowrap;
}

.df13-user-chip > span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.df13-user-chip button{
  flex:0 0 auto;
}

/* Three-column working area driven by CSS variables. */
.workspace{
  position:relative;
  height:calc(100vh - var(--df13-topbar-height)) !important;
  display:grid !important;
  grid-template-columns:
    var(--df13-left-width)
    minmax(420px,1fr)
    var(--df13-right-width) !important;
  overflow:hidden;
}

.sidebar,
.detail{
  min-width:0;
  box-sizing:border-box;
  transition:
    opacity .16s ease,
    padding .16s ease,
    border-color .16s ease;
}

.content{
  min-width:0;
  box-sizing:border-box;
}

/* Main search becomes first control of central area. */
.searchbar.df13-main-search{
  width:100%;
  box-sizing:border-box;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:10px !important;
  align-items:center;
  margin:0 0 18px !important;
  padding:10px !important;
  border:1px solid #d9e2e8;
  border-radius:11px;
  background:#fff;
  box-shadow:0 2px 8px rgba(20,45,65,.04);
  position:sticky;
  top:0;
  z-index:520;
}

.searchbar.df13-main-search input{
  min-width:0;
}

.searchbar.df13-main-search button{
  min-width:92px;
}

/* Collapse state. */
body.df13-left-collapsed{
  --df13-left-width:0px;
}

body.df13-right-collapsed{
  --df13-right-width:0px;
}

body.df13-left-collapsed .sidebar,
body.df13-right-collapsed .detail{
  opacity:0;
  padding-left:0 !important;
  padding-right:0 !important;
  border:0 !important;
  overflow:hidden !important;
  pointer-events:none;
}

/* Drag handles. */
.df13-resizer{
  position:absolute;
  top:0;
  bottom:0;
  width:var(--df13-panel-handle);
  z-index:720;
  cursor:col-resize;
  touch-action:none;
  background:transparent;
}

.df13-resizer:hover,
.df13-resizer.df13-dragging{
  background:rgba(23,70,106,.12);
}

#df13LeftResizer{
  left:calc(var(--df13-left-width) - 4px);
}

#df13RightResizer{
  right:calc(var(--df13-right-width) - 4px);
}

body.df13-left-collapsed #df13LeftResizer,
body.df13-right-collapsed #df13RightResizer{
  display:none;
}

/* Collapse/restore buttons remain accessible when a pane is hidden. */
.df13-panel-toggle{
  position:absolute;
  top:10px;
  z-index:760;
  width:28px;
  height:28px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid #ced9e0;
  border-radius:7px;
  background:#fff;
  color:#17466a;
  box-shadow:0 2px 8px rgba(20,45,65,.08);
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}

#df13ToggleLeft{
  left:max(7px,calc(var(--df13-left-width) - 36px));
}

#df13ToggleRight{
  right:max(7px,calc(var(--df13-right-width) - 36px));
}

body.df13-left-collapsed #df13ToggleLeft{
  left:7px;
}

body.df13-right-collapsed #df13ToggleRight{
  right:7px;
}

body.df13-resizing{
  cursor:col-resize !important;
  user-select:none !important;
}

body.df13-resizing *{
  cursor:col-resize !important;
}

/* Defensive UI RBAC. Backend ACL remains authoritative. */
.df13-admin-hidden{
  display:none !important;
}

/* Search header remains usable as side panes change width. */
@media(max-width:1050px){
  .topbar{
    grid-template-columns:minmax(235px,1fr) auto !important;
  }

  .workspace{
    grid-template-columns:
      var(--df13-left-width)
      minmax(360px,1fr)
      var(--df13-right-width) !important;
  }
}

@media(max-width:760px){
  :root{
    --df13-topbar-height:108px;
  }

  .topbar{
    grid-template-columns:1fr !important;
    align-content:center;
    row-gap:5px !important;
  }

  .df13-user-chip{
    max-width:100% !important;
    justify-self:start;
    padding:5px 9px !important;
  }

  .workspace{
    grid-template-columns:
      var(--df13-left-width)
      minmax(320px,1fr)
      var(--df13-right-width) !important;
  }

  .searchbar.df13-main-search{
    position:relative;
    grid-template-columns:1fr !important;
  }

  .searchbar.df13-main-search button{
    width:100%;
  }
}