/* Minimal "Make-like" shell (safe layer) */

/* Rail labels: visually hidden (icons-only) */
.app-rail-label{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.app-shell{ display:flex; min-height:100vh; background:#f5f6f8; }
.app-stage{ flex:1; display:flex; flex-direction:column; min-width:0; }
.app-work{ display:flex; gap:16px; padding:16px; min-width:0; }
.app-main{ flex:1; min-width:0; }
.app-side{ width:340px; min-width:300px; }

.app-rail{
  width:72px; background:#480bb9; color:#fff;
  display:flex; flex-direction:column; align-items:center;
  padding:12px 0; gap:10px;    

}
.app-rail-brand{
  width:44px; height:44px; border-radius:12px;
  background:rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none; font-weight:800;
  position: sticky;
}
.app-rail-item{
  width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none;
  opacity:.9;
}
.app-rail-item:hover{ background:rgba(255,255,255,.15); opacity:1; }
.app-rail-item.is-active{ background:rgba(255,255,255,.22); opacity:1; }
.app-rail-ico{ font-size:18px; line-height:1; }

.app-topbar{
  height:64px; background:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; border-bottom:1px solid #e6e6ea;
}
.app-topbar-left, .app-topbar-right{ display:flex; align-items:center; gap:10px; }
.app-org{ display:flex; align-items:center; gap:10px; }
.app-org-label{ font-weight:700; }
.app-topbtn{
  background:#f2f3f7; border:1px solid #e6e6ea; padding:8px 10px;
  border-radius:10px; text-decoration:none; color:#111;
  font-size:14px;
}
.app-topbtn-ghost{ background:transparent; }
.app-avatar{
  width:34px; height:34px; border-radius:999px;
  background:#eee; display:flex; align-items:center; justify-content:center;
  font-weight:700;
}

.app-card{
  background:#fff; border:1px solid #e6e6ea; border-radius:14px;
  padding:12px;
}
.app-card-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.app-card-title{ font-weight:800; }
.app-small{ font-size:12px; color:#666; }
.app-mini{
  font-size:12px; padding:6px 8px; border-radius:10px;
  border:1px solid #e6e6ea; text-decoration:none; color:#111;
  background:#f7f7fb;
}
.app-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid #f0f0f4; }
.app-row:first-child{ border-top:none; padding-top:0; }
.app-row-title{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }

select{ padding:8px 10px; border-radius:10px; border:1px solid #e6e6ea; background:#fff; }

/* ===========================
   FORCE SHELL LAYOUT (override)
   Keep sidebar on the RIGHT
=========================== */
.app-work{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  flex-wrap:nowrap !important;
}

.app-main{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.app-side{
  flex: 0 0 340px !important;
  width: 340px !important;
  min-width: 300px !important;
}

/* prevent legacy containers from forcing weird widths */
.app-main .lft-main,
.app-main .lft-layout-3col,
.app-main .lft-container{
  width: 100% !important;
  max-width: none !important;
}


/* ===========================
   FIX: keep app-side on the right
   (force override - last wins)
=========================== */
.app-work{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  flex-wrap:nowrap !important;
}

.app-main{
  flex:1 1 auto !important;
  min-width:0 !important;
}

.app-side{
  flex:0 0 340px !important;
  width:340px !important;
  min-width:300px !important;
  margin-left:16px !important;
}


/* =========================================================
   Sticky rail + sticky sidebar + consistent gaps
   (last wins overrides)
========================================================= */

/* Make the app behave like an "app shell": stage scrolls, rail stays */
html, body { height: 100%; }
body { margin: 0; overflow: hidden; }

/* Shell fills viewport; stage is the scroll container */
.app-shell { height: 100vh; }
.app-stage { overflow: auto; min-height: 0; padding: 0 !important; }

/* Rail: pinned, full height, never shrinks */
.app-rail{
  height: 100vh;
  flex: 0 0 72px;
  align-self: stretch;
}

/* Ensure rail is not influenced by internal sticky attempts */
.app-rail-brand{ position: static !important; }

/* =========================================================
   Rail labels visible + compact active highlight
========================================================= */

/* Make rail items vertical (icon + label) */
.app-rail-item{
  width:72px;
  padding:8px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:transparent;
}

/* ICON container (this is what gets highlighted) */
.app-rail-ico{
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* SVG icons */
.app-rail-ico svg{
  width:22px;
  height:22px;
  stroke:#fff;
}

/* LABELS — force visible */
.app-rail-label{
  position:static !important;
  width:auto !important;
  height:auto !important;
  margin:0;
  overflow:visible !important;
  clip:auto !important;
  white-space:nowrap;

  font-size:11px;
  line-height:1;
  color:rgba(255,255,255,.9);
  text-align:center;
}

/* Hover effect (icon only) */
.app-rail-item:hover .app-rail-ico{
  background:rgba(255,255,255,.15);
}

/* Active state — SMALL pill like logo background */
.app-rail-item.is-active .app-rail-ico{
  background:rgba(255,255,255,.22);
}

/* Remove full-item highlight if any */
.app-rail-item.is-active{
  background:transparent !important;
}