/* ============================================================
   KON SMALL TABS - v587
   Saf: the tab boxes along the top of Command Center 04 and the walls
   are huge. Make them small and smart, like the member app's tiles under
   the radar.
   WHY THEY WERE HUGE: the clock box sat in the same row, and with the
   date, OPERATOR and VOICE ON buttons in it, it grew to ~130 px - and
   every tab stretched to match. The clock now sits in the top-right
   corner of the title band instead, and the tabs are one slim row.
   Loaded LAST so it wins; the wall's own layout is otherwise untouched.
   ============================================================ */
.wall{position:relative}
.tabs{display:flex!important;gap:6px!important;margin:8px 0!important;align-items:stretch}
.tabs a{flex:1 1 0;min-width:0;min-height:0!important;height:38px;padding:0 10px!important;
  display:flex;align-items:center;justify-content:flex-start!important;gap:7px!important;text-align:left!important;
  background:#000!important;border:1.5px solid #e9b53a!important;border-radius:11px!important;
  color:#e9b53a!important;font-size:9px!important;letter-spacing:.1em!important;font-weight:800;line-height:1.1;overflow:hidden}
.tabs a span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
.tabs a svg{width:15px!important;height:15px!important}
.tabs a.home{flex:0 0 auto;justify-content:center!important;padding:0 12px!important}
.tabs a.on{background:linear-gradient(135deg,#f2c75a,#d8a93a)!important;color:#100c04!important;border-color:#f2c75a!important}
.tabs a.hot{border-color:#ff5a5a!important;color:#ff5a5a!important}
.tabs a:not(.on):hover{background:#141008!important}
/* the clock: top-right corner of the title band, out of the tab row.
   Time on the left, the OPERATOR / VOICE / alert buttons stacked on the
   right, so the box stays inside the band. */
.tabs .clock{position:absolute;top:15px;right:20px;z-index:5;width:250px;min-height:0!important;max-height:74px;overflow:hidden;
  border:1px solid #7a6428;border-radius:10px;background:#080706;padding:5px 7px!important;
  display:grid!important;grid-template-columns:1fr 92px;column-gap:7px;row-gap:0;align-items:center;justify-items:center;line-height:1.15}
.tabs .clock>small,.tabs .clock>span,.tabs .clock>b{grid-column:1}
.tabs .clock>small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:7.5px!important}
.tabs .clock>span{font-size:15px!important}
.tabs .clock small span{font:inherit!important;color:inherit!important;letter-spacing:inherit!important}
.tabs .clock>b{font-size:8.5px!important}
.tabs .clock>div,.tabs .clock>button{grid-column:2;grid-row:1 / span 3;align-self:center;width:100%!important;margin:0!important}
.tabs .clock>div{display:flex!important;flex-direction:column;gap:3px!important}
.tabs .clock>div.hidden,.tabs .clock>button.hidden{display:none!important}
.tabs .clock button{padding:4px 3px!important;font-size:7px!important;line-height:1.1;width:100%}
/* narrow screens: tabs wrap four to a row, clock back in the flow */
@media(max-width:900px){
  .tabs{flex-wrap:wrap}
  .tabs a{flex:1 1 calc(25% - 6px)}
  .tabs .clock{position:static;width:100%;order:99;max-height:none}
}