/* MUMS Enterprise UX Kit (Dashboard + My Schedule)
   - CSS Grid + Flex hybrid
   - Responsive + accessibility-focused
   - Additive/rollback-safe: does not remove existing styles
*/

:root{
  --ux-radius: 18px;
  --ux-radius-sm: 12px;
  --ux-shadow: 0 14px 40px rgba(0,0,0,.20);
  --ux-shadow-soft: 0 10px 26px rgba(0,0,0,.14);

  /* Shift colors (use as borders/accents; backgrounds use low opacity) */
  --shift-morning: #e0f7fa; /* teal */
  --shift-mid: #fff3e0; /* blue */
  --shift-night: #ede7f6; /* violet */

  --ux-focus: 0 0 0 3px rgba(99,102,241,.45);
}

/* Base helpers */
.ux-h1{ font-size: 24px; font-weight: 950; letter-spacing:.2px; margin:0; }
.ux-sub{ margin-top:6px; }
.ux-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ux-row.between{ justify-content:space-between; }
.ux-muted{ opacity:.82; }
.ux-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  font-weight: 800;
}
.ux-chip .dot{ width:8px; height:8px; border-radius:999px; background: var(--accent); }

.ux-card{
  border: 1px solid var(--border);
  border-radius: var(--ux-radius);
  background: var(--panel);
  box-shadow: var(--ux-shadow-soft);
}
.ux-card.pad{ padding: 14px; }

.ux-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.ux-col-12{ grid-column: span 12; }
.ux-col-8{ grid-column: span 8; }
.ux-col-6{ grid-column: span 6; }
.ux-col-4{ grid-column: span 4; }
.ux-col-3{ grid-column: span 3; }

@media (max-width: 1100px){
  .ux-col-8{ grid-column: span 12; }
  .ux-col-6{ grid-column: span 12; }
  .ux-col-4{ grid-column: span 6; }
  .ux-col-3{ grid-column: span 6; }
}
@media (max-width: 720px){
  .ux-grid{ gap: 10px; }
  .ux-col-4{ grid-column: span 12; }
  .ux-col-3{ grid-column: span 12; }
}

/* Accessible focus rings */
.ux-focusable:focus{ outline: none; box-shadow: var(--ux-focus); }
button:focus, a:focus, input:focus, select:focus, textarea:focus{ outline:none; box-shadow: var(--ux-focus); }

/* MY SCHEDULE (enterprise layout) */
.mysx{
  display:flex; flex-direction:column; gap:12px;
}
.mysx-header{
  display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap;
}
.mysx-title{
  display:flex; flex-direction:column; gap:6px;
}
.mysx-kpis{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.mysx-kpi{
  border-radius: var(--ux-radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--ux-shadow-soft);
  padding: 14px;
}
.mysx-kpi .big{ font-size: 18px; font-weight: 950; letter-spacing:.2px; margin-top:6px; }

.mysx-sections{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
}
@media (max-width: 1100px){
  .mysx-sections{ grid-template-columns: 1fr; }
}

.mysx-section-title{ font-weight: 950; letter-spacing:.2px; }

/* Calendar */
.mysx-cal{
  border-radius: var(--ux-radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.03));
  overflow:hidden;
}
.mysx-cal-head{
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  gap: 10px; flex-wrap:wrap;
}
.mysx-cal-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.mysx-daytab{
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  cursor:pointer;
}
.mysx-daytab.active{ background: rgba(99,102,241,.18); border-color: rgba(99,102,241,.45); }
.mysx-cal-body{ display:grid; grid-template-columns: 60px 1fr; }
.mysx-ruler{ border-right: 1px solid var(--border); padding:10px 6px; }
.mysx-ruler .tick{ height: 42px; display:flex; align-items:flex-start; justify-content:flex-end; padding-right:6px; font-size:11px; opacity:.75; }

.mysx-cal-grid{
  position:relative;
  padding:10px 12px;
  min-height: 24*42px; /* fallback, overridden by JS inline style */
}
.mysx-cal-grid::before{
  content:'';
  position:absolute; inset:10px 12px;
  background-image: linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 100% 42px;
  pointer-events:none;
}

.mysx-block{
  position:absolute;
  left: 12px; right: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
  padding: 10px;
  cursor: default;
}
.mysx-block.draggable{ cursor: grab; }
.mysx-block.draggable:active{ cursor: grabbing; }
.mysx-block .top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.mysx-block .name{ font-weight: 950; letter-spacing:.2px; }
.mysx-block .meta{ font-size:12px; opacity:.78; margin-top:4px; }

.mysx-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.mysx-badge{
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 8px;
  font-size:12px;
  font-weight:900;
  background: rgba(255,255,255,.04);
}
.mysx-badge.morning{ border-color: rgba(20,184,166,.45); background: rgba(20,184,166,.10); }
.mysx-badge.mid{ border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.10); }
.mysx-badge.night{ border-color: rgba(167,139,250,.45); background: rgba(167,139,250,.10); }

/* Tooltip */
.mysx-tip{
  position:fixed;
  z-index: 9999;
  max-width: 360px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--ux-shadow);
  padding: 12px;
  display:none;
}
.mysx-tip .t{ font-weight:950; }
.mysx-tip .s{ opacity:.8; margin-top:6px; font-size:12px; }

/* Collapsible sections (mobile-first) */
.mysx-collapser{
  display:none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(255,255,255,.04);
  font-weight: 900;
}
@media (max-width: 720px){
  .mysx-collapser{ display:inline-flex; }
  .mysx-collapsible{ display:none; }
  .mysx-collapsible.open{ display:block; }
}

/* DASHBOARD (enterprise) */
.dashx{ display:flex; flex-direction:column; gap:12px; }
.dashx-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; }

.dashx-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.dashx-card{ padding:14px; }
.dashx-card .k{ font-size:12px; opacity:.78; }
.dashx-card .v{ font-size:22px; font-weight:950; letter-spacing:.2px; margin-top:6px; }
.dashx-card .s{ font-size:12px; opacity:.78; margin-top:6px; }

.dashx-layout{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
}
@media (max-width: 1100px){
  .dashx-layout{ grid-template-columns: 1fr; }
}

.dashx-panel{ padding:14px; }
.dashx-title{ font-weight:950; letter-spacing:.2px; }

/* Heatmap */
.dashx-heatmap{
  display:grid;
  grid-template-columns: 48px repeat(7, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.dashx-heatmap .hday{ font-size:11px; opacity:.75; text-align:center; }
.dashx-heatmap .hhr{ font-size:11px; opacity:.65; text-align:right; padding-right:6px; }
.dashx-heatmap .cell{
  height: 10px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.04);
}

/* Notification center */
.dashx-notif-tools{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.dashx-filter{
  border:1px solid var(--border);
  background: transparent;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  cursor:pointer;
}
.dashx-filter.active{ background: rgba(99,102,241,.18); border-color: rgba(99,102,241,.45); }

.dashx-notifs{ margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.dashx-notif{
  border:1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.03);
}
.dashx-notif.unread{ border-color: rgba(99,102,241,.55); background: rgba(99,102,241,.10); }
.dashx-notif .top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.dashx-notif .t{ font-weight:950; }
.dashx-notif .m{ font-size:12px; opacity:.78; margin-top:6px; white-space:pre-wrap; }

/* Quick actions strip */
.dashx-actions{ display:flex; gap:8px; flex-wrap:wrap; }



/* Schedule calendar: selector alignment with my_schedule.js */
.mysx-cal-grid{
  display:grid;
  grid-template-columns: 64px 1fr;
  gap:10px;
  margin-top:12px;
  align-items:stretch;
}
.mysx-ruler{
  position:relative;
  min-height: 560px;
}
.mysx-tick{
  position:absolute;
  left:0;
  right:0;
  transform: translateY(-50%);
  font-size:11px;
  color: rgba(255,255,255,0.65);
}
.mysx-days{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:8px;
}
.mysx-day{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.mysx-day-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:12px;
  background: rgba(255,255,255,0.04);
  font-size:12px;
}
.mysx-day-body{
  position:relative;
  flex:1;
  min-height: 560px;
  margin-top:8px;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(0,0,0,0.18);
  overflow:hidden;
}
.mysx-empty{
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  font-size:12px;
  color: rgba(255,255,255,0.60);
}

.mysx-tab{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:28px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.85);
  cursor:pointer;
}
.mysx-tab.active{
  background: rgba(80,160,255,0.14);
  border-color: rgba(80,160,255,0.30);
  color: #fff;
}
.mysx-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  font-size:11px;
  color: rgba(255,255,255,0.90);
}
.mysx-block{
  overflow:hidden;
}
.mysx-block-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.mysx-block-name{
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mysx-block-time{
  font-size:11px;
  color: rgba(255,255,255,0.70);
  white-space:nowrap;
}
.mysx-block-sub{
  margin-top:6px;
  font-size:11px;
  color: rgba(255,255,255,0.75);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.mysx-block.tiny .mysx-block-sub{
  display:none;
}
.mysx-block.tiny .mysx-block-time{
  display:none;
}
.mysx-cal-foot{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.mysx-tooltip{
  position:fixed;
  z-index: 9999;
  max-width: 320px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(10,16,26,0.95);
  color:#fff;
  font-size:12px;
  line-height:1.25;
  pointer-events:none;
  opacity:0;
  transition: opacity .12s ease;
}

@media (max-width: 920px){
  .mysx-cal-grid{ grid-template-columns: 1fr; }
  .mysx-ruler{ display:none; }
  .mysx-days{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mysx-day-body{ min-height: 480px; }
}
@media (max-width: 560px){
  .mysx-days{ grid-template-columns: 1fr; }
  .mysx-day-body{ min-height: 440px; }
}


/* Dashboard: distribution bars + safe acknowledge */
.dashx-bar{
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  overflow:hidden;
}
.dashx-bar .fill{
  height:100%;
  background: rgba(80,160,255,0.55);
  width:0%;
}
.dashx-dist-row{
  display:grid;
  grid-template-columns: 110px 1fr 92px;
  gap:10px;
  align-items:center;
  margin-top:8px;
}
.dashx-top-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:center;
  padding:8px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.10);
}
.dashx-top-row .dashx-bar{
  grid-column: 1 / span 2;
  margin-top:6px;
}
.dashx-spin{
  display:inline-block;
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.75);
  margin-right:8px;
  vertical-align:-3px;
  opacity:0;
}
.dashx-spin.on{
  opacity:1;
  animation: dashxspin .8s linear infinite;
}
@keyframes dashxspin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}


/* ------------------------------------------------------------------
   Required Enterprise Classes (13126-07)
   ------------------------------------------------------------------ */

/* Task chips (used in My Schedule + Members tooling)
   Use inline CSS variables for exact palette matching:
   style="--task-color:#4aa3ff; --task-bg:rgba(74,163,255,.14)" */
.task-label{
  --task-color: rgba(255,255,255,.85);
  --task-bg: rgba(255,255,255,.06);
  --task-border: rgba(255,255,255,.14);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.01em;
  border:1px solid var(--task-border);
  background:var(--task-bg);
  color:var(--task-text, var(--text));
  line-height:1;
  white-space:nowrap;
}
.task-label:focus,
.task-label:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(56,189,248,.25);
}

/* Small color swatch for tasks */
.task-color{
  width:12px;
  height:12px;
  border-radius:4px;
  background:var(--task-color);
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset, 0 0 0 1px rgba(255,255,255,.10);
  flex:0 0 auto;
}

/* Schedule blocks (generic class used across schedule UIs) */
.schedule-block{
  position:relative;
  border:1px solid var(--task-border, rgba(255,255,255,.12));
  background:var(--task-bg, rgba(255,255,255,.04));
  border-radius:14px;
  padding:10px 12px;
  overflow:hidden;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.schedule-block:focus,
.schedule-block:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(56,189,248,.22), 0 14px 28px rgba(0,0,0,.25);
  border-color:rgba(56,189,248,.35);
}
.schedule-block:hover{
  transform:translateY(-1px);
  border-color:rgba(56,189,248,.35);
  box-shadow:0 14px 28px rgba(0,0,0,.25);
}
.schedule-block .sb-title{
  font-weight:900;
  font-size:13px;
  letter-spacing:.01em;
}
.schedule-block .sb-meta{
  margin-top:4px;
  font-size:12px;
  color:rgba(255,255,255,.72);
}

/* Members list rows (aliases: .members-row in legacy code) */
.member-row,
.members-row{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  transition:border-color .12s ease, background .12s ease;
}
.member-row:hover,
.members-row:hover{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
}
.members-row.m-selected{
  border-color:rgba(56,189,248,.35);
  box-shadow:0 0 0 3px rgba(56,189,248,.12);
}

/* Notification popout styling (schedule updates, mailbox assigns) */
.notification-popout{
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius:20px;
  box-shadow:0 22px 60px rgba(0,0,0,.50);
}
.notification-popout .announce-title{
  font-weight:950;
  letter-spacing:.01em;
}
.notification-popout .body{
  color:rgba(255,255,255,.92);
  font-size:13px;
  line-height:1.35;
}
.notification-popout .foot .btn{
  min-width:140px;
  font-weight:900;
}

/* ------------------------------------------------------------------
   My Schedule — Enterprise Weekly/Daily/Team Calendar (13126-09)
   ------------------------------------------------------------------ */

.schx{
  display:flex;
  flex-direction:column;
  gap:14px;
  /* shared grid sizing for pixel-perfect ruler alignment */
  --schx-row-h: 56px;
  --schx-hours: 9;
  /* fixed header sizing so the time ruler can align to the grid area */
  --schx-head-h: 46px;
  --schx-head-gap: 8px;
}
.schx-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.schx-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.schx-toggle{
  display:inline-flex;
  gap:6px;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.15);
}
.schx-toggle .btn{ border-radius:999px; }
.schx-toggle .btn.active{
  background: rgba(80,160,255,0.16);
  border-color: rgba(80,160,255,0.32);
  color:#fff;
}

.schx-kpis{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
.schx-kpi{
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  background: rgba(255,255,255,.03);
  min-width:0;
}
.schx-kpi .big{ font-size:18px; font-weight:950; letter-spacing:.2px; margin-top:6px; }

.schx-daytabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.schx-daytab{
  display:flex;
  align-items:center;
  justify-content:center;
  height:30px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.88);
  cursor:pointer;
  font-weight:900;
  font-size:12px;
}
.schx-daytab .dot{ margin-left:8px; width:7px; height:7px; border-radius:999px; background: rgba(255,255,255,.55); }
.schx-daytab.active{
  background: rgba(80,160,255,0.16);
  border-color: rgba(80,160,255,0.32);
  color:#fff;
}

.schx-cal{
  border:1px solid var(--border);
  border-radius:18px;
  padding:12px;
  background: rgba(255,255,255,.02);
}

.schx-grid{
  display:grid;
  grid-template-columns: 76px 1fr;
  gap:10px;
  align-items:start;
}
.schedule-ruler,
.schx-ruler{
  position:relative;
  display:flex;
  flex-direction:column;
}

.schx-ruler-spacer{
  height: calc(var(--schx-head-h) + var(--schx-head-gap));
}

.schx-ruler-body{
  position:relative;
  height: calc(var(--schx-hours) * var(--schx-row-h));
  min-height: calc(var(--schx-hours) * var(--schx-row-h));
  overflow: visible;
}

/* ------------------------------------------------------------------
   My Schedule — shared unit ruler grid (13126-11)
   Ensures tick labels align pixel-perfect with schedule grid lines.
   ------------------------------------------------------------------ */

.schx-ruler-grid{
  display:grid;
  grid-auto-rows: var(--schx-row-h);
  gap: 0;
}

.schx-ruler-row{
  position:relative;
  height: var(--schx-row-h);
}

.schx-ruler-end{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  transform: translateY(-50%);
}

.schx-tick-label{
  position:absolute;
  right:8px;
  top:0;
  transform: translateY(-50%);
  display:inline-block;
  padding:2px 6px;
  border-radius:8px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  font-size:11px;
  color: rgba(255,255,255,0.65);
  line-height: 1;
  white-space: nowrap;
}

.schx-tick{
  position:absolute;
  left:0;
  right:0;
  transform: translateY(-50%);
  font-size:11px;
  color: rgba(255,255,255,0.65);
  text-align:right;
  padding-right:8px;
}
.schx-tick span{ display:inline-block; padding:2px 6px; border-radius:8px; background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.08); }

.schx-cols{
  display:grid;
  gap:10px;
  min-width:0;
}
.schx-cols.week{
  grid-template-columns: repeat(7, minmax(180px, 1fr));
  overflow-x:auto;
  padding-bottom:6px;
}
.schx-cols.day{
  grid-template-columns: 1fr;
}

.schx-day{
  display:flex;
  flex-direction:column;
  min-width:180px;
}
.schx-dayhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(255,255,255,.03);
  height: var(--schx-head-h);
  min-height: var(--schx-head-h);
  overflow:hidden;
}
.schx-dayname{ font-weight:950; letter-spacing:.2px; }
.schx-daydate{
  font-size:11px;
  opacity:.76;
  line-height:1.2;
  text-align:right;
  max-width: 70%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.schx-daybody{
  position:relative;
  margin-top: var(--schx-head-gap);
  height: calc(var(--schx-hours) * var(--schx-row-h));
  min-height: calc(var(--schx-hours) * var(--schx-row-h));
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(0,0,0,.18);
  overflow:hidden;
  /* subtle grid backing (lines also rendered as elements for crispness) */
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.04) 0px,
    rgba(255,255,255,.04) 1px,
    rgba(0,0,0,0) 1px,
    rgba(0,0,0,0) var(--schx-row-h)
  );
}
.schx-lines{ position:absolute; inset:0; pointer-events:none; }
.schx-line{ position:absolute; left:0; right:0; height:1px; background: rgba(255,255,255,.08); }
.schx-empty{ position:absolute; top:10px; left:10px; right:10px; }

.schx-block{
  position:absolute;
  left:8px;
  right:8px;
  padding:10px;
}

.schx-btop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.schx-time{
  font-size:11px;
  color: rgba(255,255,255,0.72);
  white-space:nowrap;
}
.schx-bsub{
  margin-top:8px;
}

.schx-foot{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}

/* ------------------------------------------------------------------
   Team tabular view (13126-09)
   ------------------------------------------------------------------ */

.team-schedule-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.team-schedule-wrap{
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(0,0,0,.18);
  overflow:auto;
}

.team-schedule-grid{
  min-width: 920px;
}

.team-schedule-row{
  display:grid;
  align-items:stretch;
}

.team-schedule-header{
  position:sticky;
  top:0;
  z-index:4;
  background: rgba(8,14,24,.96);
  border-bottom:1px solid rgba(255,255,255,.10);
}

.tsg-h{
  padding:10px 8px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.2px;
  color: rgba(255,255,255,.82);
  border-left:1px solid rgba(255,255,255,.08);
  white-space:nowrap;
}
.tsg-h.ts-name{
  border-left:none;
  position:sticky;
  left:0;
  z-index:5;
  background: rgba(8,14,24,.98);
}

.tsg-name{
  padding:10px 10px;
  font-weight:950;
  color: rgba(255,255,255,.92);
  border-right:1px solid rgba(255,255,255,.10);
  position:sticky;
  left:0;
  z-index:3;
  background: rgba(0,0,0,.18);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tsg-cell{
  min-height:44px;
  border-left:1px solid rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  position:relative;
}
.team-schedule-row.member-row:hover .tsg-name{
  background: rgba(80,160,255,0.10);
}
.tsg-cell.has-task{
  /* background is set inline to exact task color */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}
.tsg-badge{
  position:absolute;
  top:8px;
  left:8px;
  max-width: calc(100% - 16px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  padding:5px 8px;
  border-radius:999px;
  backdrop-filter: blur(6px);
}

/* ------------------------------------------------------------------
   Responsive / density tweaks
   ------------------------------------------------------------------ */

@media (max-width: 1100px){
  .schx-kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .schx-grid{ grid-template-columns: 1fr; }
  .schx-ruler, .schedule-ruler{ display:none; }
  .schx-day{ min-width:0; }
  /* reduce hour height on mobile to avoid excessive scrolling */
  .schx{ --schx-row-h: 48px; }
}

@media (max-width: 900px){
  .schedule-block{ padding:10px; border-radius:16px; }
  .task-label{ font-size:11px; padding:6px 9px; }
}


/* ------------------------------------------------------------------
   Members — Floating Graphical Task Status Panel (13126-11)
   ------------------------------------------------------------------ */

.graph-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.graph-toggle input{
  width:16px;
  height:16px;
  accent-color: var(--accent, #4f8bff);
}

.graph-status-panel{
  position:fixed;
  right: 18px;
  bottom: 18px;
  width: 520px;
  height: 360px;
  min-width: 320px;
  min-height: 240px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  z-index: 120;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(15,27,46,.98), rgba(12,22,40,.98));
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  overflow: hidden;
  resize: both;
}

/* Phase 1-505: floating panel must always be on top */
.graph-status-panel.gsp-floating{
  position: fixed;
  z-index: 9999;
}

/* Phase 1-505: default anchor to avoid bottom bars */
.graph-status-panel.gsp-float-anchor{
  right: 18px;
  bottom: 64px;
}

/* Phase 1-505: resize handles (edges + corners) */
.graph-status-panel.gsp-resizable{
  /* keep base resize handle as fallback, but handles enable edge resizing */
}
.gsp-resize-handle{
  position:absolute;
  z-index: 3;
  background: transparent;
  touch-action: none;
}
.gsp-rh-n, .gsp-rh-s{ left: 10px; right: 10px; height: 10px; }
.gsp-rh-n{ top: 0; cursor: ns-resize; }
.gsp-rh-s{ bottom: 0; cursor: ns-resize; }
.gsp-rh-e, .gsp-rh-w{ top: 10px; bottom: 10px; width: 10px; }
.gsp-rh-e{ right: 0; cursor: ew-resize; }
.gsp-rh-w{ left: 0; cursor: ew-resize; }
.gsp-rh-ne, .gsp-rh-nw, .gsp-rh-se, .gsp-rh-sw{ width: 14px; height: 14px; }
.gsp-rh-ne{ top: 0; right: 0; cursor: nesw-resize; }
.gsp-rh-nw{ top: 0; left: 0; cursor: nwse-resize; }
.gsp-rh-se{ bottom: 0; right: 0; cursor: nwse-resize; }
.gsp-rh-sw{ bottom: 0; left: 0; cursor: nesw-resize; }
.graph-status-panel.gsp-resizing{
  outline: 2px solid rgba(79,139,255,.25);
  outline-offset: -2px;
}

.graph-status-panel .gsp-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  user-select:none;
  cursor: move;
}
.graph-status-panel .gsp-head.dragging{
  background: rgba(255,255,255,.03);
}

.graph-status-panel .gsp-title{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
}
.graph-status-panel .gsp-sub{
  font-size: 12px;
  color: rgba(255,255,255,.65);
  margin-top: 2px;
}

.graph-status-panel .gsp-body{
  padding: 12px 14px;
  overflow:auto;
  height: calc(100% - 96px);
}

.graph-status-panel .gsp-foot{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
  font-size: 12px;
}

.gsp-row{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  align-items:center;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  margin-bottom: 10px;
}

.gsp-row.member-highlight{
  border-color: rgba(79,139,255,.55);
  box-shadow: 0 0 0 3px rgba(79,139,255,.12);
}

.gsp-name{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.gsp-name .name{
  font-weight: 700;
  font-size: 13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gsp-name .meta{
  font-size: 12px;
  color: rgba(255,255,255,.65);
  margin-top: 2px;
}

.gsp-bar{
  position:relative;
  height: 16px;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display:flex;
}

.task-bar{
  height: 100%;
  min-width: 3px;
  background: var(--c, #4f8bff);
  transition: width .18s ease, opacity .18s ease;
}
.task-bar:hover{
  opacity: .92;
}

/* Graph panel controls + governance notices (Phase 1-500) */
.gsp-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
  margin-bottom: 12px;
}
.gsp-controls label{
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(255,255,255,.70);
}
.gsp-controls .input{
  padding:6px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.gsp-controls .input:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,139,255,.20);
  border-color: rgba(79,139,255,.45);
}
.gsp-controls-hint{
  margin-left:auto;
}

.gsp-note{
  margin-top:6px;
  padding:6px 8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  font-size:12px;
  line-height:1.35;
}
.gsp-note.low{
  border-color: rgba(34,211,238,.35);
  background: rgba(34,211,238,.10);
  color: rgba(224,252,255,.92);
}
.gsp-note.high{
  border-color: rgba(255,162,26,.40);
  background: rgba(255,162,26,.12);
  color: rgba(255,245,232,.92);
}

/* Governance tooltip (enterprise-grade) */
.gsp-gov{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
}
.gsp-govbadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: rgba(255,255,255,.88);
  cursor:help;
}
.gsp-govbadge:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(79,139,255,.22);
}
.gsp-govtip{
  display:none;
  position:absolute;
  left:0;
  top: calc(100% + 8px);
  width:min(520px, calc(100vw - 64px));
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(8,12,22,.95);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,.92);
  font-size:12px;
  line-height:1.4;
  box-shadow: 0 14px 32px rgba(0,0,0,.35);
  z-index: 20;
}
.gsp-gov:hover .gsp-govtip,
.gsp-gov:focus-within .gsp-govtip{
  display:block;
}
.gsp-govtip.low{
  border-color: rgba(34,211,238,.35);
}
.gsp-govtip.high{
  border-color: rgba(255,162,26,.40);
}
.gsp-govbadge.low{
  border-color: rgba(34,211,238,.35);
  background: rgba(34,211,238,.10);
  color: rgba(224,252,255,.95);
}
.gsp-govbadge.high{
  border-color: rgba(255,162,26,.40);
  background: rgba(255,162,26,.12);
  color: rgba(255,245,232,.95);
}

@media (max-width: 900px){
  .graph-status-panel{ width: calc(100vw - 24px); height: 320px; right: 12px; bottom: 12px; }
  .gsp-row{ grid-template-columns: 140px 1fr; }
  .gsp-controls-hint{ flex-basis:100%; margin-left:0; }
}

/* ------------------------------------------------------------------
   Graph Panel: Priority Badges + Analytics Views (Phase 1-503)
   ------------------------------------------------------------------ */

.gsp-pri{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
}

.gsp-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: rgba(255,255,255,.90);
  cursor:help;
  user-select:none;
}
.gsp-badge:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(79,139,255,.22);
}

.gsp-badge.pri-high{
  border-color: rgba(255,82,82,.38);
  background: rgba(255,82,82,.12);
  color: rgba(255,235,235,.98);
}
.gsp-badge.pri-balanced{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
  color: rgba(230,255,241,.95);
}
.gsp-badge.pri-over{
  border-color: rgba(255,162,26,.40);
  background: rgba(255,162,26,.12);
  color: rgba(255,245,232,.95);
}

.gsp-tip{
  display:none;
  position:absolute;
  left:0;
  top: calc(100% + 8px);
  width:min(520px, calc(100vw - 64px));
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(8,12,22,.95);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,.92);
  font-size:12px;
  line-height:1.4;
  box-shadow: 0 14px 32px rgba(0,0,0,.35);
  z-index: 25;
}
.gsp-pri:hover .gsp-tip,
.gsp-pri:focus-within .gsp-tip{
  display:block;
}
.gsp-tip.pri-high{ border-color: rgba(255,82,82,.40); }
.gsp-tip.pri-over{ border-color: rgba(255,162,26,.45); }

/* Controls layout (task + analytics view) */
.gsp-controls .gsp-field{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Visualization containers */
.gsp-viz{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height: 16px;
}

.gsp-pie{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: conic-gradient(var(--c, #4f8bff) calc(var(--p, 0)*1%), rgba(255,255,255,.08) 0);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.20);
}
.gsp-donut{
  position:relative;
}
.gsp-donut::after{
  content:'';
  position:absolute;
  inset: 10px;
  border-radius:999px;
  background: rgba(8,12,22,.92);
  border:1px solid rgba(255,255,255,.08);
}

.gsp-stackcol{
  position:relative;
  width: 22px;
  height: 46px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.gsp-stackcol .fill{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: calc(var(--p, 0) * 1%);
  background: var(--c, #4f8bff);
  opacity: .95;
}

.gsp-heat{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  width: 100%;
}
.gsp-heat .cell{
  position:relative;
  height: 14px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  overflow:hidden;
}
.gsp-heat .cell::after{
  content:'';
  position:absolute;
  inset:0;
  background: var(--c, #4f8bff);
  opacity: var(--a, 0);
}

.gsp-radar{
  width: 76px;
  height: 60px;
}
.gsp-radar svg{
  width: 100%;
  height: 100%;
}
.gsp-radar .grid{
  fill:none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 1;
}
.gsp-radar .poly{
  fill: color-mix(in srgb, var(--c, #4f8bff) 26%, transparent);
  stroke: var(--c, #4f8bff);
  stroke-width: 2;
}

.gsp-vizwrap{ width:100%; justify-content:flex-end; }
.gsp-vizwrap.gsp-heat{ justify-content:flex-start; }



/* === Graph Panel Landscape Rebuild (Phase 1-504) === */
.graph-status-panel.gsp-landscape{
  width: 820px;
  height: 440px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
}

/* Landscape table layout (matches sample) */
.gsp-landscape-table{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
  overflow:hidden;
  margin-top: 10px;
}

.gsp-thead{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.gsp-th{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}

.gsp-tbody{
  display:block;
}

.gsp-tr{
  display:grid;
  grid-template-columns: 240px 1fr;
  align-items:center;
  gap: 0;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.gsp-tr:last-child{
  border-bottom:none;
}

/* Phase 1-505: highlight selected member in Graph Panel */
.gsp-tr.gsp-highlighted{
  background: rgba(79,139,255,.10);
}

.gsp-td-name{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 12px;
  border-right: 1px solid rgba(255,255,255,.06);
}
.gsp-td-name .gsp-member{
  overflow:hidden;
  text-overflow: ellipsis;
}
.gsp-td-name .gsp-hours{
  flex: 0 0 auto;
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}

.gsp-td-bar{
  padding-left: 12px;
}

/* Percent-based progress bar cell */
.gsp-progress{
  width: 100%;
}
.gsp-progress-track{
  position: relative;
  height: 22px;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  --p: 0;
  --c: var(--gsp-bar, #4f8bff);
}
.gsp-progress-fill{
  height: 100%;
  width: calc(var(--p, 0) * 1%);
  background: var(--c);
  border-radius: 999px;
  transition: width .18s ease, opacity .18s ease;
  min-width: 3px;
}
.gsp-progress-label{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  left: max(10px, calc(var(--p, 0) * 1% - 34px));
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.95);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  pointer-events:none;
}

/* Per-task styling hooks */
.gsp-task-mailbox{ --gsp-bar: #f59e0b; }
.gsp-task-call{ --gsp-bar: #16a34a; }
.gsp-task-backoffice{ --gsp-bar: #f59e0b; }
.gsp-task-generic{ --gsp-bar: #4f8bff; }

/* Max-hours settings grid */
.gsp-settings{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}
.gsp-settings-title{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.gsp-max-grid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 820px){
  .gsp-thead, .gsp-tr{ grid-template-columns: 180px 1fr; }
  .gsp-max-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .graph-status-panel.gsp-landscape{ width: calc(100vw - 24px); height: 70vh; }
  .gsp-thead, .gsp-tr{ grid-template-columns: 150px 1fr; }
  .gsp-max-grid{ grid-template-columns: 1fr; }
}
.gsp-max-item{
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.gsp-max-item .lbl{
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.88);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.gsp-max-item .input{
  width: 100%;
}

/* ------------------------------------------------------------------
   Phase 1-506: Members page compression + REPORTS dropdown
   ------------------------------------------------------------------ */

/* Compressed member row: reduce vertical space so more users fit onscreen */
.members-row{
  padding: 6px 10px !important;
  gap: 10px !important;
}
.members-row .members-meta{
  gap: 2px !important;
}
.members-row .m-name{
  gap: 8px !important;
}
.members-row .m-name-text{
  line-height: 1.1;
}
.members-row .status-pill{
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 6px;
}
.members-row .timeline-wrap{
  gap: 4px !important;
}

/* Compact workload line (replaces pill badges) */
.member-task-stats{
  font-size: 10px;
  line-height: 1.15;
  color: rgba(255,255,255,.62);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* REPORTS dropdown (hover-open + polished menu) */
.reports-dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 9000;
}
.reports-toggle{
  border-radius: 12px;
}
.reports-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(15,27,46,.98), rgba(12,22,40,.98));
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  display: none;
  z-index: 10001;
}
.reports-dropdown.open .reports-menu,
.reports-dropdown:hover .reports-menu,
.reports-dropdown:focus-within .reports-menu{
  display: block;
}
.reports-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.92);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.reports-item:hover,
.reports-item:focus{
  background: rgba(79,139,255,.10);
  border-color: rgba(79,139,255,.22);
  outline: none;
}
.reports-item:active{
  transform: translateY(1px);
}

/* ------------------------------------------------------------------
   Phase 1-508: Members UX anchors + progress bars + grid compression
   ------------------------------------------------------------------ */

/* Member progress bar under name (0–60 green, 61–85 orange, 86–100 red)
   Phase 1-510: Tooltip label centered below the progress bar in the member name section.
*/
.member-progress{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  margin-top:4px;
  min-width:0;
  max-width:100%;
  width:100%;
  overflow:hidden;
  line-height:1;
}

/* Track + bar (new markup) */
.progress-track{
  width:100%;
  max-width:100%;
  height:6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  overflow:hidden;
  box-sizing:border-box;
}
.progress-bar{
  height:100%;
  border-radius:999px;
  transition:width .18s ease;
  max-width:100%;
}
.progress-text{
  display:block;
  width:100%;
  font-size:inherit;
  color:rgba(255,255,255,.70);
  text-align:right;
}
.progress-tooltip{
  display:block;
  width:100%;
  text-align:center;
  font-size:inherit; /* same as .progress-text */
  color:rgba(255,255,255,.65);
  margin-top:2px;
  opacity:.86;
  transform:translateY(1px);
  transition:opacity .16s ease, transform .16s ease;
  pointer-events:none;
}

.member-progress:hover .progress-tooltip,
.member-progress:focus-within .progress-tooltip{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .progress-tooltip{transition:none;transform:none;}
}

/* Threshold colors (requested enterprise hex values) */
.progress-green{background-color:#4CAF50;}
.progress-orange{background-color:#FF9800;}
.progress-red{background-color:#F44336;}

/* Back-compat selectors (older markup) */
.member-progress-track{flex:1;height:6px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);overflow:hidden}
.member-progress-fill{height:100%;border-radius:999px;transition:width .18s ease;max-width:100%}
.member-progress-pct{font-size:inherit;line-height:1;color:rgba(255,255,255,.70);text-align:right}
.member-progress-fill.pct-green{background-color:#4CAF50;}
.member-progress-fill.pct-orange{background-color:#FF9800;}
.member-progress-fill.pct-red{background-color:#F44336;}

body[data-mode="light"] .progress-track,
body[data-mode="light"] .member-progress-track{border-color:rgba(15,23,42,.14);background:rgba(15,23,42,.04)}
body[data-mode="light"] .progress-text,
body[data-mode="light"] .member-progress-pct{color:rgba(15,23,42,.66)}
body[data-mode="light"] .progress-tooltip{color:#555;}

/* Fixed anchors: Team dropdown + Week selector + Lock bar */
.members-topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.members-topbar-left{min-width:0}
.members-topbar-right{display:flex;align-items:flex-start;justify-content:flex-end;gap:14px;flex-wrap:nowrap;position:sticky;top:10px;z-index:3500}
.members-teamctl{min-width:210px}
.weekctl{min-width:520px}
.weekctl-row{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}
.week-warn{max-width:520px}
@media (max-width: 980px){
  .members-topbar-right{transform:scale(.92);transform-origin:top right}
}
@media (max-width: 820px){
  .weekctl{min-width:460px}
  .members-teamctl{min-width:190px}
}
@media (max-width: 720px){
  .members-topbar{flex-direction:column;align-items:stretch}
  .members-topbar-right{justify-content:flex-start;transform:none}
  .weekctl{min-width:0;width:100%}
  .members-teamctl{min-width:0;width:100%}
  .weekctl-row{justify-content:flex-start;flex-wrap:wrap}
  .week-warn{max-width:100%;text-align:left}
}

/* Block grid compression (~20%): row spacing, columns, timeline + ruler alignment */
.members-page #schedulePane{padding:10px !important}
.members-page .members-wrap{gap:10px !important}
.members-page .members-table{display:flex;flex-direction:column;gap:8px}
.members-page .members-row{padding:5px 8px !important;gap:10px !important;grid-template-columns:240px 1fr 190px !important;border-radius:14px}
.members-page .timeline-ruler{grid-template-columns:240px 1fr 190px !important;gap:10px !important;height:18px !important;margin-bottom:6px !important}
.members-page .timeline-ruler .ruler-track{height:18px !important}
.members-page .timeline-ruler .mark{font-size:10px !important}
.members-page .timeline{height:27px !important;border-radius:12px}
.members-page .timeline .seg{top:3px !important;bottom:3px !important;font-size:10px !important;padding:0 5px !important}

/* Horizontal leave buttons */
.members-page .member-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.members-page .leave-actions{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.members-page .leavebtn{min-width:28px;height:26px;padding:0 8px;border-radius:10px;font-size:11px;line-height:24px}

/* Members overlay background compression (~20%): reduce vertical density in key controls */
.members-page .timeline-legend{margin-bottom:8px}
.members-page .sched-toolbar{gap:10px}
.members-page .sched-toolbar .left{gap:8px}
.members-page .coverage-panel{margin-top:8px !important}