/* ───────── Page layout & containers ───────── */
.page{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:24px;
}

body.resource-timeline-body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.resource-timeline-page{
  flex:1 1 auto;
  width:100%;
  max-width:none;
  padding:24px 32px 32px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.resource-timeline-panel{
  display:flex;
  flex-direction:column;
  min-height:0;
  flex:1 1 auto;
}

.resource-timeline-page .panel-body{
  display:grid;
  grid-template-rows:1fr;
  min-height:0;
}

.page.page--wide{
  max-width:none;
  padding-left:32px;
  padding-right:32px;
}

.page.page--wide .panel.fill{
  height:auto;
}

.page.page--wide .panel-body{
  padding-left:4px;
  padding-right:4px;
}

.page.page--wide .panel-header{
  padding-left:4px;
  padding-right:4px;
}

.page.page--wide .project-timeline-view{
  width:100%;
}

.page.page--wide .timeline-track{
  min-width:980px;
}

.page.page--wide .resource-row__track{
  min-width:1180px;
}

.page.page--wide .resource-row__scroller,
.page.page--wide .timeline-track{
  scroll-behavior:smooth;
}

.page.page--wide .panel.fill .panel-body{
  height:auto;
}

.page.page--wide .panel.fill .panel-body::-webkit-scrollbar,
.page.page--wide .timeline-track::-webkit-scrollbar,
.page.page--wide .resource-row__scroller::-webkit-scrollbar{
  height:10px;
}

.page.page--wide .timeline-track::-webkit-scrollbar-thumb,
.page.page--wide .resource-row__scroller::-webkit-scrollbar-thumb,
.page.page--wide .panel.fill .panel-body::-webkit-scrollbar-thumb{
  background:var(--border-strong);
  border-radius:999px;
}

.page.page--wide .timeline-track::-webkit-scrollbar-track,
.page.page--wide .resource-row__scroller::-webkit-scrollbar-track,
.page.page--wide .panel.fill .panel-body::-webkit-scrollbar-track{
  background:rgba(255,255,255,.04);
  border-radius:999px;
}

.page.page--wide .panel.fill .panel-body:hover::-webkit-scrollbar-thumb,
.page.page--wide .timeline-track:hover::-webkit-scrollbar-thumb,
.page.page--wide .resource-row__scroller:hover::-webkit-scrollbar-thumb{
  background:var(--muted);
}

.page.page--wide .panel.fill .panel-body:hover::-webkit-scrollbar-track,
.page.page--wide .timeline-track:hover::-webkit-scrollbar-track,
.page.page--wide .resource-row__scroller:hover::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
}

.shell{
  display:grid;
  grid-template-columns: minmax(0,1fr) 340px; /* left / center / right */
  gap:16px;
  min-height:calc(100vh - 88px);
}

.viewport-cage{
  min-height:calc(100vh - 88px);
  height:calc(100vh - 88px);
  display:grid;
}

.root-grid{ display:grid; gap:16px; min-height:0; height:100%; }

.content-grid{
  --sidebar-width: 360px;
  --sidebar-min: 300px;
  --sidebar-max: 560px;
  --sidebar-handle: 12px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-handle) minmax(var(--sidebar-min), var(--sidebar-width));
  gap:12px;
  align-items:start;
  min-height:0;
  height:100%;
}

.content-grid > .panel.fill{ height:100%; }

.sidebar-resizer{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--sidebar-handle);
  min-height:100%;
  align-self:stretch;
  cursor:col-resize;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--border);
  transition:background .15s ease, border-color .15s ease;
}

.sidebar-resizer::before{
  content:"";
  display:block;
  width:4px;
  height:36px;
  border-radius:999px;
  background:var(--border);
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}

.sidebar-resizer:hover,
.sidebar-resizer:focus-visible{
  background:rgba(91,195,122,.08);
  border-color:var(--highlight, #5bc37a);
}

body.resizing-sidebar{
  user-select:none;
  cursor:col-resize;
}

/* Panels & sidebars */
.sidebar, .panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
}

.sidebar.right{
  display:grid;
  grid-template-rows:1fr auto;
  gap:12px;
  position:sticky;
  top:72px;
  max-height:calc(100vh - 96px);
  overflow:auto;         /* prevent spillover */
  align-self:start;
}

/* Center grid: tasks (primary) + issues (secondary) */
.center{
  display:grid;
  grid-template-columns: 3fr 1.2fr;   /* tasks larger */
  gap:16px;
  height:calc(100vh - 120px);         /* topbar + margins */
}

/* “Fill” panels that scroll internally */
.panel.fill{ display:flex; min-height:0; flex-direction:column; }
.panel.fill .panel-header{ flex:0 0 auto; border-bottom:1px solid var(--border); padding:8px 4px; }
.panel.fill .panel-body{ min-height:0; overflow:auto; padding-top:8px; flex:1 1 auto; }

/* Lists / columns inside boards */
.columns{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:12px; }
.col{ min-width:0 }
.cards{ min-height:0 }

/* Right-anchored chat dock (optional global chat) */
#chatDock{ position:fixed; right:16px; bottom:16px; width:360px; z-index:80; }
#chatDock .panel{ padding:12px }

/* Stacked right column: chat + issues */
.right-stacked{
  display:grid;
  grid-template-rows: minmax(320px, 1fr) minmax(240px, 0.75fr);
  gap:12px;
  min-height:0;
}
.sidebar.right.right-stacked{
  position:sticky;
  top:72px;
  max-height:calc(100vh - 96px);
  height:calc(100vh - 96px);
  overflow:auto;
  align-self:start;
  min-height:0;
}
.right-stacked .panel{ display:flex; flex-direction:column; min-height:0; }
.right-stacked .panel .panel-body{ min-height:0; overflow:auto; }

.sidebar.right.sidebar-tabbed{
  position:sticky;
  top:72px;
  max-height:calc(100vh - 96px);
  height:calc(100vh - 96px);
  overflow:auto;
  align-self:start;
  min-height:0;
  grid-template-rows:1fr auto;
}
.sidebar.right.sidebar-tabbed .panel{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.sidebar-tabs-header{ padding-bottom:0; }
.sidebar-tabs-body{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:0;
}
.sidebar-tab-panel{
  display:none;
  flex-direction:column;
  min-height:0;
  height:100%;
}
.sidebar-tab-panel.active{ display:flex; }
.sidebar-tab-panel .tab-panel-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  margin-top:8px;
}
.notification-list{ min-height:0; }

/* Chat / issues panels */
.sidebar-tab-panel.chat-panel {
  display: none;
  grid-template-rows: auto 1fr;
  min-height: 260px;
}

.sidebar-tab-panel.chat-panel.active {
  display: grid;
}

.chat-panel .chat-window { min-height: 150px; overflow: auto; }

.issues-panel { display: flex; flex-direction: column; min-height: 0; }
.issues-panel .panel-body { min-height: 0; overflow: auto; }

/* Helper */
.hidden { display: none !important; }

/* Mobile shell */
.mobile-shell { display: none; padding: 0 12px 20px; }
.mobile-tabs { display: flex; gap: 8px; margin: 10px 0 12px; overflow: auto; }
.mobile-tab { flex: 1; white-space: nowrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: inherit; }
.mobile-tab.active { background: linear-gradient(120deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); box-shadow: 0 8px 26px rgba(0,0,0,.25); border-color: var(--border-strong, #555); }
.mobile-panels { display: grid; gap: 12px; }
.mobile-panel { display: none; }
.mobile-panel.active { display: block; }
.mobile-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mobile-card-list { display: flex; flex-direction: column; gap: 10px; }
.mobile-host { min-height: 120px; border: 1px dashed var(--border); border-radius: 12px; padding: 10px; background: rgba(255,255,255,.02); }
.mobile-analysis-callout { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: rgba(255,255,255,.03); }
.mobile-menu-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: inherit; }
.mobile-menu-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 8; }
.topbar-points { display: none; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); font-size: 12px; }
.topbar-points .points-value { font-weight: 700; }
.mobile-side-panel { border: none; padding: 0; background: transparent; }

.topbar-points.points-pop {
  animation: pointsPulse 0.8s ease;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
}

/* User/profile menu */
.user-menu { position: relative; }
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid var(--border);
  background: var(--panel);
  color: inherit;
  border-radius: 12px;
  padding: .45rem .65rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(91,195,122,.16), rgba(255,255,255,.04));
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: .4px;
}
.user-chip-text { display: grid; gap: 2px; }
.user-chip-name { font-weight: 700; line-height: 1.1; }
.user-chip-sub { font-size: 12px; color: var(--muted); line-height: 1.1; }

.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  display: none;
  min-width: 200px;
  z-index: 15;
}
.user-menu-panel.open { display: flex; flex-direction: column; gap: 4px; }
.user-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
}
.user-menu-item:hover { border-color: var(--border-strong, #666); background: rgba(255,255,255,.04); }
.user-menu-item.logout { color: #f7b7b7; }

@keyframes pointsPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  70% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* Auth layout */
.login-shell{
  min-height: calc(100vh - 56px); /* header height */
  display: grid;
  place-items: center;
  padding: 24px;
}

/* ───────── Responsive tweaks ───────── */
@media (max-width: 1200px){
  .content-grid{ grid-template-columns: minmax(0,1fr); }
  .root-grid, .content-grid{ height:auto; }
  .sidebar-resizer{ display:none; }
  .sidebar.right{ position:static; top:auto; max-height:none; overflow:visible; }
  .sidebar.right.right-stacked{ grid-template-rows: auto auto; overflow:visible; height:auto; align-self:stretch; }
  .right-stacked .panel .panel-body{ overflow:visible; }
  .viewport-cage{ min-height:auto; height:auto; }
}

@media (max-width: 900px){
  #chatDock{ width:min(360px, 92vw); right:4vw; }
  .content-grid{ gap:12px; }
}

@media (max-width: 720px){
  .content-grid{ gap:12px; }
  .panel, .sidebar{ padding:10px; }
  .topbar{ padding:10px 12px; gap: 8px; }
  .topbar .brand span{ display:none; }
  .mobile-menu-toggle{ display:inline-flex; }
  .topbar-points{ display:inline-flex; margin-left:auto; }
  .topbar-actions{ position: fixed; top:58px; right:12px; left:12px; z-index:10; background: var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px; flex-direction: column; gap:10px; box-shadow: 0 18px 50px rgba(0,0,0,.45); display: none; }
  .topbar .topbar-group{ width:100%; justify-content: flex-start; flex-wrap: wrap; }
  .user-menu{ width:100%; }
  .user-menu-panel{ position: static; width:100%; box-shadow:none; margin-top:6px; }
  .user-menu-panel.open{ display:flex; }
  .user-chip{ width:100%; justify-content: space-between; }
  body.mobile-menu-open .topbar-actions{ display:flex; }
  body.mobile-menu-open .mobile-menu-scrim{ display:block; }
  body.phone-mode .root-grid{ display:none; }
  body.phone-mode .analysis-shell{ margin: 0 12px; }
  body.phone-mode .mobile-shell{ display:block; }
  body.phone-mode .sidebar.right{ display:none; }
  body.phone-mode .performance-panel{ display:none; }
}