/* MyOffice TEA2 – OWNER OFFICE DESIGN R16
   Production-safe visual override of existing TEA2 light glass design.
   No alternate application, dashboard, data or JavaScript.
   Owner UX acceptance remains required. */

/* Readable glass, on the EXISTING fixed MyOffice landscape. */
body.tea2-owner-design-v160 {
  --office-r16-ink: #173b52;
  --office-r16-muted: #486a80;
  --office-r16-glass: rgba(242,250,254,.54);
  --office-r16-glass-soft: rgba(232,245,251,.36);
  --office-r16-line: rgba(255,255,255,.76);
}
body.tea2-owner-design-v160 .main-screen {
  border:1px solid rgba(255,255,255,.62)!important;
  background:linear-gradient(145deg,rgba(240,249,253,.45),rgba(216,237,247,.28))!important;
  box-shadow:0 16px 42px rgba(28,65,87,.10),inset 0 1px 0 rgba(255,255,255,.66)!important;
  backdrop-filter:blur(18px) saturate(138%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(138%)!important;
  color:var(--office-r16-ink)!important;
}
body.tea2-owner-design-v160 .tea2-side-ui {
  background:linear-gradient(160deg,rgba(247,252,255,.65),rgba(215,236,246,.43))!important;
  border:1px solid var(--office-r16-line)!important;
  box-shadow:0 15px 35px rgba(27,71,98,.11),inset 0 1px 0 rgba(255,255,255,.74)!important;
  backdrop-filter:blur(25px) saturate(155%)!important;
  -webkit-backdrop-filter:blur(25px) saturate(155%)!important;
}
body.tea2-owner-design-v160 .myoffice-area-item {
  min-height:51px!important;
  color:#173b53!important;
  border-radius:12px!important;
}
body.tea2-owner-design-v160 .myoffice-area-copy strong {
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:730!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
}
body.tea2-owner-design-v160 .myoffice-area-copy small {
  font-size:10px!important;
  line-height:1.25!important;
  color:#4e6c80!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
}
body.tea2-owner-design-v160 .myoffice-area-item:hover,
body.tea2-owner-design-v160 .myoffice-area-item:focus-visible {
  background:rgba(255,255,255,.52)!important;
  border-color:rgba(100,160,192,.46)!important;
  outline-offset:1px!important;
}
body.tea2-owner-design-v160 .myoffice-area-item.active {
  background:linear-gradient(105deg,rgba(255,255,255,.72),rgba(193,229,245,.46))!important;
  border-color:rgba(121,176,204,.42)!important;
}
body.tea2-owner-design-v160 .tea2-side-head-copy small {
  font-size:10px!important;color:#4a6e82!important;
}
body.tea2-owner-design-v160 .tea2-side-head-copy strong {
  font-size:16px!important;color:#153d55!important;
}
body.tea2-owner-design-v160 .myoffice-area-menu {
  overflow:visible!important;
  padding-bottom:12px!important;
}
body.tea2-owner-design-v160 #leftMenuHost {
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(76,139,173,.42) transparent;
}

/* Existing business areas are OFFICE WORKSPACES, not KPI dashboards. */
body.tea2-owner-design-v160 .area-hub-view .area-hub-top {
  background:linear-gradient(135deg,rgba(245,252,255,.62),rgba(216,239,248,.37))!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 7px 24px rgba(34,76,103,.08)!important;
  color:#143950!important;
}
body.tea2-owner-design-v160 .area-hub-view .area-hub-card {
  background:linear-gradient(155deg,rgba(251,254,255,.65),rgba(220,239,249,.39))!important;
  border:1px solid rgba(255,255,255,.72)!important;
  color:#183e56!important;
  box-shadow:0 6px 19px rgba(26,77,110,.075)!important;
}
body.tea2-owner-design-v160 .area-hub-view .area-hub-card p,
body.tea2-owner-design-v160 .area-hub-view .area-hub-title span,
body.tea2-owner-design-v160 .area-hub-view .area-hub-search small {
  font-size:12px!important;
  line-height:1.45!important;
  color:#44697e!important;
}
body.tea2-owner-design-v160 .area-hub-view .area-hub-card strong {
  font-size:14px!important;color:#1a4560!important;
}
body.tea2-owner-design-v160 .area-hub-view .area-hub-section-title,
body.tea2-owner-design-v160 .area-hub-view .area-hub-section-title strong {
  color:#275471!important;
}
body.tea2-owner-design-v160 .area-hub-view .area-hub-card em {
  color:#376b86!important;font-size:11px!important;
}
body.tea2-owner-design-v160 .area-hub-view .area-hub-card:hover,
body.tea2-owner-design-v160 .area-hub-view .area-hub-card:focus-visible {
  border-color:rgba(88,155,193,.63)!important;
  background:rgba(253,255,255,.83)!important;
  outline:2px solid rgba(68,139,180,.22)!important;
}
body.tea2-owner-design-v160 .area-hub-view .area-hub-context select,
body.tea2-owner-design-v160 .area-hub-view .area-hub-search input,
body.tea2-owner-design-v160 .workspace-view input,
body.tea2-owner-design-v160 .workspace-view select,
body.tea2-owner-design-v160 .workspace-view textarea {
  background:rgba(252,254,255,.76)!important;
  color:#173e54!important;
  border-color:rgba(151,193,214,.76)!important;
}
body.tea2-owner-design-v160 .workspace-view :is(button,.mini-btn,.round-btn) {
  font-size:12px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.67),rgba(224,241,250,.42))!important;
  color:#214d65!important;
  border-color:rgba(153,194,216,.62)!important;
}
body.tea2-owner-design-v160 .workspace-view :is(button.primary,.mini-btn.primary) {
  color:white!important;
  background:linear-gradient(120deg,#318bd0,#596dde)!important;
}
body.tea2-owner-design-v160 .mo-commandbar button {
  font-size:11px!important; /* v160 used font-size:0 and hid some text-only controls */
  color:#19435a!important;
}
body.tea2-owner-design-v160 .mo-commandbar button>span:not(.mo-count):not(.mo-presence-dot) {
  font-size:11px!important;
}
body.tea2-owner-design-v160 :is(button,input,select,textarea,a):focus-visible {
  outline:2px solid #267fae!important;
  outline-offset:2px!important;
}

/* Desktop: an invisible right rail must NOT reserve another 318px.
   Keep existing assistant margin so an opened James panel has room. */
@media(min-width:1101px) {
  body.tea2-owner-design-v160 .tea2-shell.tea2-owner-v120-real {
    grid-template-columns:248px minmax(0,1fr) 0px!important;
  }
  body.tea2-owner-design-v160 .tea2-header {
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    flex-wrap:nowrap!important;
    overflow:visible!important;
  }
  body.tea2-owner-design-v160 .myoffice-brand {
    flex:0 0 auto!important;
    margin:0!important;
  }
  body.tea2-owner-design-v160 #tea2-owner-all-software-btn {
    margin-left:auto!important;
    margin-right:8px!important;
    max-width:210px!important;
    white-space:nowrap!important;
  }
  body.tea2-owner-design-v160 .side-rail.expanded.side-left {
    width:240px!important;
  }
  body.tea2-owner-design-v160 .side-rail.side-left .tea2-side-ui {
    width:236px!important;
  }
  body.tea2-owner-design-v160 .main-screen,
  body.tea2-owner-design-v160 #leftRail.expanded~.main-screen,
  body.tea2-owner-design-v160 #leftRail:not(.expanded)~.main-screen {
    margin-left:16px!important;
  }
  body.tea2-owner-design-v160.myoffice-v4-ai:not(.mo-assistant-collapsed) .main-screen {
    margin-right:282px!important;
  }
  body.tea2-owner-design-v160.myoffice-v4-ai.mo-assistant-collapsed .main-screen {
    margin-right:16px!important;
  }
}

/* Keep existing mobile shell behaviors. Do not force desktop grids at tablet sizes. */
@media(min-width:761px) and (max-width:1100px) {
  body.tea2-owner-design-v160 .myoffice-area-copy strong{font-size:11.5px!important}
  body.tea2-owner-design-v160 .myoffice-area-copy small{font-size:10px!important}
}
@media(max-width:760px){
  body.tea2-owner-design-v160 .main-screen {
    background:linear-gradient(145deg,rgba(241,250,255,.62),rgba(223,240,250,.46))!important;
  }
  body.tea2-owner-design-v160 .side-rail.expanded .tea2-side-ui {
    max-width:min(92vw,315px)!important;
  }
  body.tea2-owner-design-v160 .area-hub-view .area-hub-grid{
    grid-template-columns:1fr!important;
  }
  body.tea2-owner-design-v160 .area-hub-view .area-hub-card{
    min-height:96px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body.tea2-owner-design-v160 .myoffice-area-item,
  body.tea2-owner-design-v160 .area-hub-card {
    transition:none!important;transform:none!important;
  }
}
/* R17 responsive correction: the legacy middle-size rules made workspace ~22px wide. */
@media(min-width:761px) and (max-width:1100px){
  body.tea2-owner-design-v160 .tea2-shell.tea2-owner-v120-real{
    display:grid!important;
    grid-template-columns:220px minmax(0,1fr) 0px!important;
  }
  body.tea2-owner-design-v160 .main-screen,
  body.tea2-owner-design-v160 #leftRail.expanded~.main-screen,
  body.tea2-owner-design-v160 #leftRail:not(.expanded)~.main-screen,
  body.tea2-owner-design-v160 #rightRail.expanded~.main-screen,
  body.tea2-owner-design-v160.myoffice-v4-ai:not(.mo-assistant-collapsed) .main-screen,
  body.tea2-owner-design-v160.myoffice-v4-ai.mo-assistant-collapsed .main-screen{
    margin-left:12px!important;
    margin-right:12px!important;
    min-width:0!important;
  }
  body.tea2-owner-design-v160 .tea2-header{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:thin;
  }
  body.tea2-owner-design-v160 .myoffice-brand{
    flex:0 0 auto!important;
  }
  body.tea2-owner-design-v160 .side-rail.expanded.side-left{width:218px!important}
  body.tea2-owner-design-v160 .side-rail.side-left .tea2-side-ui{width:214px!important}
  body.tea2-owner-design-v160 #tea2-owner-all-software-btn{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }
  body.tea2-owner-design-v160 .myoffice-area-copy strong{font-size:11.5px!important}
  body.tea2-owner-design-v160 .myoffice-area-copy small{font-size:10px!important}
}

/* R18 mobile correction: keep a full office work area beside collapsed navigation. */
@media(max-width:760px){
  body.tea2-owner-design-v160 .tea2-shell.tea2-owner-v120-real {
    display:grid!important;
    grid-template-columns:60px minmax(0,1fr) 0px!important;
    grid-template-rows:68px minmax(0,1fr) 56px!important;
  }
  body.tea2-owner-design-v160 .main-screen,
  body.tea2-owner-design-v160 #leftRail.expanded~.main-screen,
  body.tea2-owner-design-v160 #leftRail:not(.expanded)~.main-screen,
  body.tea2-owner-design-v160 #rightRail.expanded~.main-screen,
  body.tea2-owner-design-v160.myoffice-v4-ai:not(.mo-assistant-collapsed) .main-screen,
  body.tea2-owner-design-v160.myoffice-v4-ai.mo-assistant-collapsed .main-screen{
    margin-left:8px!important;
    margin-right:8px!important;
    min-width:0!important;
  }
  body.tea2-owner-design-v160 .tea2-header{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    align-items:center!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:thin;
  }
  body.tea2-owner-design-v160 .myoffice-brand{
    min-width:185px!important;
    max-width:220px!important;
    flex:0 0 auto!important;
  }
  body.tea2-owner-design-v160 .myoffice-name{
    font-size:19px!important;
  }
  body.tea2-owner-design-v160 .myoffice-sub{
    display:none!important;
  }
  body.tea2-owner-design-v160 .side-rail.expanded.side-left{
    width:min(290px,calc(100vw - 22px))!important;
    z-index:50!important;
  }
  body.tea2-owner-design-v160 .side-rail.expanded.side-left .tea2-side-ui{
    width:min(280px,calc(100vw - 35px))!important;
  }
  body.tea2-owner-design-v160 .area-hub-view .area-hub-shell{padding:7px!important}
  body.tea2-owner-design-v160 .area-hub-view .area-hub-top{padding:10px!important}
  body.tea2-owner-design-v160 .workspace-stage{inset:5px!important}
}

/* R18 compact mobile header: show MyOffice branding and keep service links accessible. */
@media(max-width:760px){
  body.tea2-owner-design-v160 .myoffice-brand{
    display:flex!important;
    width:172px!important;
    min-width:172px!important;
    max-width:172px!important;
    padding:5px 8px!important;
    overflow:hidden!important;
  }
  body.tea2-owner-design-v160 .myoffice-brand>img{
    width:31px!important;height:35px!important;
  }
  body.tea2-owner-design-v160 .myoffice-brand>div{
    padding-left:6px!important;
  }
  body.tea2-owner-design-v160 .myoffice-name{
    font-size:16px!important;
    letter-spacing:-.4px!important;
    white-space:nowrap!important;
  }
  body.tea2-owner-design-v160 #tea2-owner-all-software-btn{
    display:none!important; /* existing Mine programmer navigation remains available */
  }
  body.tea2-owner-design-v160 #tea2-supermicro-wake-entry-r129,
  body.tea2-owner-design-v160 #tea2-recovery-link-r13{
    display:inline-flex!important;
    flex:0 0 37px!important;
    width:37px!important;
    min-width:37px!important;
    max-width:37px!important;
    padding:0!important;
    justify-content:center!important;
    font-size:0!important;
  }
  body.tea2-owner-design-v160 #tea2-supermicro-wake-entry-r129:before{
    content:"\26A1";font-size:17px!important;
  }
  body.tea2-owner-design-v160 #tea2-recovery-link-r13:before{
    content:"\21BB";font-size:19px!important;
  }
  body.tea2-owner-design-v160 .tea2-env-badge{
    min-width:0!important;
    max-width:90px!important;
    padding:4px 6px!important;
    right:6px!important;
    top:8px!important;
  }
  body.tea2-owner-design-v160 .tea2-env-badge small{
    display:none!important;
  }
}