/* R103.11.51.16.21.99-UI1-FIX4 — Command Center visual polish only
   Scope: Staff Online, Live Activity, panel rhythm, and system footer.
   No JS, API, workflow, permission, or backend semantics changed. */

body:not(.dark) #page-command-center .command-content-grid{
  align-items:start!important;
  gap:14px!important;
}

/* Keep the lower cards content-sized instead of stretching to the tallest sibling. */
body:not(.dark) #page-command-center .command-online-panel,
body:not(.dark) #page-command-center .command-feed-panel{
  align-self:start!important;
  overflow:hidden!important;
}

/* Cleaner panel shell and header hierarchy. */
body:not(.dark) #page-command-center .command-online-panel,
body:not(.dark) #page-command-center .command-feed-panel{
  background:linear-gradient(180deg,#ffffff 0%,#fbfefe 100%)!important;
  border:1px solid #dbe8ea!important;
  box-shadow:0 8px 22px rgba(18,72,84,.055)!important;
}
body:not(.dark) #page-command-center .command-online-panel>header,
body:not(.dark) #page-command-center .command-feed-panel>header{
  margin:-2px 0 12px!important;
  padding:0 0 11px!important;
  border-bottom:1px solid #e8f0f1!important;
}
body:not(.dark) #page-command-center .command-online-panel>header h3,
body:not(.dark) #page-command-center .command-feed-panel>header h3{
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
  color:#17354a!important;
}
body:not(.dark) #page-command-center .command-online-panel>header span,
body:not(.dark) #page-command-center .command-feed-panel>header span{
  font-size:8px!important;
  font-weight:700!important;
  color:#8296a6!important;
}

/* Staff Online: replace legacy dark cards with clean aqua cards. */
body:not(.dark) #page-command-center .command-online-list{
  gap:8px!important;
}
body:not(.dark) #page-command-center .command-online-person{
  min-width:0!important;
  padding:10px 11px!important;
  gap:10px!important;
  background:#f7fbfb!important;
  border:1px solid #dcebec!important;
  border-radius:11px!important;
  box-shadow:none!important;
  transition:background .12s ease,border-color .12s ease,transform .12s ease!important;
}
body:not(.dark) #page-command-center .command-online-person:hover{
  background:#f0f9f8!important;
  border-color:#c7e3e2!important;
  transform:translateY(-1px)!important;
}
body:not(.dark) #page-command-center .command-online-person i{
  flex:0 0 auto!important;
  width:8px!important;
  height:8px!important;
  background:#16b981!important;
  box-shadow:0 0 0 4px rgba(22,185,129,.10)!important;
}
body:not(.dark) #page-command-center .command-online-person strong{
  font-size:10px!important;
  line-height:1.25!important;
  font-weight:800!important;
  color:#17354a!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body:not(.dark) #page-command-center .command-online-person span{
  margin-top:2px!important;
  font-size:8px!important;
  line-height:1.35!important;
  color:#7b91a0!important;
  opacity:1!important;
}

/* Live Activity: more compact, readable rows and no forced tall empty card. */
body:not(.dark) #page-command-center .command-live-feed{
  max-height:330px!important;
  min-height:0!important;
  gap:2px!important;
  overflow:auto!important;
  scrollbar-width:thin!important;
  scrollbar-color:#c7dadd transparent!important;
}
body:not(.dark) #page-command-center .command-feed-item{
  grid-template-columns:30px minmax(0,1fr) auto!important;
  gap:9px!important;
  padding:9px 7px!important;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid #edf3f4!important;
  border-radius:0!important;
}
body:not(.dark) #page-command-center .command-feed-item:last-child{
  border-bottom:0!important;
}
body:not(.dark) #page-command-center .command-feed-item:hover{
  background:#f6fbfb!important;
}
body:not(.dark) #page-command-center .command-feed-item>i{
  width:27px!important;
  height:27px!important;
  border-radius:9px!important;
  background:#e9f8f6!important;
  color:#0b8c88!important;
  border:1px solid #d5efec!important;
}
body:not(.dark) #page-command-center .command-feed-item strong{
  font-size:9px!important;
  line-height:1.3!important;
  color:#17354a!important;
}
body:not(.dark) #page-command-center .command-feed-item span,
body:not(.dark) #page-command-center .command-feed-item time{
  font-size:8px!important;
  line-height:1.35!important;
  color:#8295a3!important;
  opacity:1!important;
}
body:not(.dark) #page-command-center .command-empty{
  padding:22px 14px!important;
  border:1px dashed #d9e8e9!important;
  border-radius:10px!important;
  background:#f9fcfc!important;
  color:#8296a6!important;
}

/* Compact status footer so it reads as a utility strip, not another heavy panel. */
body:not(.dark) #page-command-center .command-system-footer{
  margin-top:14px!important;
  padding:9px 12px!important;
  background:rgba(255,255,255,.88)!important;
  border:1px solid #dce8ea!important;
  border-radius:10px!important;
  box-shadow:0 5px 16px rgba(18,72,84,.04)!important;
}
body:not(.dark) #page-command-center .command-system-footer span{
  font-size:8px!important;
  font-weight:700!important;
  color:#8295a3!important;
  letter-spacing:.015em!important;
}
body:not(.dark) #page-command-center .command-system-footer b{
  margin-left:5px!important;
  color:#0a8b80!important;
  font-weight:800!important;
}

/* Responsive: preserve existing one-column behavior without oversized cards. */
@media(max-width:1050px){
  body:not(.dark) #page-command-center .command-online-panel,
  body:not(.dark) #page-command-center .command-feed-panel{
    width:100%!important;
  }
}
@media(max-width:650px){
  body:not(.dark) #page-command-center .command-system-footer{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:6px!important;
  }
}