/*
 * layout.css
 * Top-level layout: sticky header bar, two-column desktop layout
 * (300px sidebar + flex main panel), mobile single-column default,
 * and the contenteditable header span used for inline entity renaming.
 *
 * Breakpoint: ≥768px = desktop two-column; <768px = mobile accordion.
 */

/* ── Header ── */
.hdr{background:#1e3a5f;color:white;padding:10px 14px;display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:100;box-shadow:0 2px 6px rgba(0,0,0,.3);flex-shrink:0}
.hdr h1{flex:1;font-size:.96rem;font-weight:600}
.hbtn{background:none;border:none;color:white;min-width:34px;min-height:34px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hbtn:active{background:rgba(255,255,255,.2)}

/* ── Mobile layout (default) ── */
.layout{display:flex;flex-direction:column;min-height:100vh}
.sidebar{flex:1}
.main-panel{display:none}

/* ── Desktop layout ── */
@media(min-width:768px){
  body{overflow:hidden}
  .layout{flex-direction:row;height:100vh;overflow:hidden}
  .sidebar{width:300px;display:flex;flex-direction:column;border-right:1px solid #cbd5e1;overflow:hidden;flex-shrink:0}
  .sidebar .hdr{padding:9px 12px}
  .sidebar-body{flex:1;overflow-y:auto;padding:8px 10px 16px}
  .main-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#e8eef5}
  .main-hdr{background:#1e3a5f;color:white;padding:9px 14px;display:flex;align-items:center;gap:8px;flex-shrink:0}
  .main-hdr h2{flex:1;font-size:.9rem;font-weight:500;opacity:.9;min-width:0}
  .main-body{flex:1;overflow:auto;padding:14px}
}

/* ── Detail header editable name ── */
.hdr-edit{display:block;outline:none;cursor:text;border-radius:3px;padding:1px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-edit:focus{background:rgba(255,255,255,.15);white-space:normal;overflow:visible}