/* TrinoTime Cloud v1.0.4.8 — Compact Navigation UX Polish
   Presentation/accessibility only. No workforce, billing, tenant, auth, or Firestore logic changes. */

:root{
  --tt-sidebar:266px;
  --tt-sidebar-compact:88px;
  --tt-nav-rail-control:56px;
  --tt-nav-transition:220ms cubic-bezier(.2,.75,.2,1);
}

/* Keep the utility control available even on very long navigation menus. */
.sidebar{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  transition:width var(--tt-nav-transition),padding var(--tt-nav-transition),box-shadow var(--tt-nav-transition)!important;
  will-change:width,padding;
}
.app-main{
  transition:margin-left var(--tt-nav-transition)!important;
  will-change:margin-left;
}
.side-nav{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(123,132,144,.35) transparent;
  padding-right:2px;
}
.side-nav::-webkit-scrollbar{width:6px}
.side-nav::-webkit-scrollbar-track{background:transparent}
.side-nav::-webkit-scrollbar-thumb{background:rgba(123,132,144,.28);border-radius:999px}
.sidebar-bottom{
  flex:0 0 auto!important;
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.98) 28%);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

/* Keyboard accessibility across the entire navigation system. */
.side-nav button:focus-visible,
.sidebar-bottom button:focus-visible,
.workspace-switcher:focus-visible,
#signatureSidebarToggle:focus-visible,
.app-brand:focus-visible{
  outline:3px solid rgba(199,139,24,.30)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 1px rgba(159,104,16,.55),0 8px 22px rgba(159,104,16,.12)!important;
}

/* Active page remains visually obvious in both navigation widths. */
.side-nav button.active{
  border:1px solid rgba(199,139,24,.14)!important;
  background:linear-gradient(135deg,rgba(255,248,232,.98),rgba(247,232,203,.92))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 7px 18px rgba(159,104,16,.08)!important;
}

/* Future-proof notification/status badge support. A module can set
   data-nav-badge="3" or data-nav-badge="!" without moving the icon. */
.side-nav button[data-nav-badge]{position:relative}
.side-nav button[data-nav-badge]::before{
  content:attr(data-nav-badge);
  position:absolute;
  right:8px;
  top:7px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#B95B57;
  color:#fff;
  border:2px solid #fff;
  font-size:8px!important;
  font-weight:700;
  line-height:1;
  z-index:2;
}

/* Compact rail: make it an intentional icon rail rather than a compressed sidebar. */
@media(min-width:981px){
  body.tt-sidebar-compact .sidebar{
    width:var(--tt-sidebar-compact)!important;
    padding:16px!important;
  }
  body.tt-sidebar-compact .app-main{margin-left:var(--tt-sidebar-compact)!important}

  body.tt-sidebar-compact .app-brand{
    width:var(--tt-nav-rail-control)!important;
    min-height:66px!important;
    margin:0 auto 4px!important;
    padding:4px 0 12px!important;
    display:grid!important;
    place-items:center!important;
  }
  body.tt-sidebar-compact .app-brand img{
    width:39px!important;
    height:39px!important;
    margin:0!important;
  }
  body.tt-sidebar-compact .app-brand>span{display:none!important}

  body.tt-sidebar-compact .workspace-switcher{
    width:var(--tt-nav-rail-control)!important;
    min-width:var(--tt-nav-rail-control)!important;
    max-width:var(--tt-nav-rail-control)!important;
    height:56px!important;
    min-height:56px!important;
    margin:2px auto 14px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:15px!important;
    overflow:visible!important;
    transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease!important;
  }
  body.tt-sidebar-compact .workspace-switcher:hover{
    transform:translateY(-1px);
    background:#FFF9EC!important;
    border-color:rgba(199,139,24,.30)!important;
    box-shadow:0 9px 22px rgba(159,104,16,.10)!important;
  }
  body.tt-sidebar-compact .workspace-switcher>div,
  body.tt-sidebar-compact .workspace-switcher>span:last-child{display:none!important}
  body.tt-sidebar-compact .workspace-avatar{
    width:36px!important;
    height:36px!important;
    margin:0!important;
    font-size:10px!important;
  }

  body.tt-sidebar-compact .side-nav{
    width:100%;
    padding:1px 0 8px!important;
    scrollbar-width:none!important;
  }
  body.tt-sidebar-compact .side-nav::-webkit-scrollbar{width:0!important;height:0!important}
  body.tt-sidebar-compact .nav-rule{width:38px!important;margin:9px auto!important}

  body.tt-sidebar-compact .side-nav button,
  body.tt-sidebar-compact .sidebar-bottom button:not(#signatureSidebarToggle){
    position:relative;
    width:var(--tt-nav-rail-control)!important;
    min-width:var(--tt-nav-rail-control)!important;
    max-width:var(--tt-nav-rail-control)!important;
    height:50px!important;
    min-height:50px!important;
    margin:2px auto!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:14px!important;
    font-size:0!important;
    gap:0!important;
    overflow:visible!important;
  }
  body.tt-sidebar-compact .side-nav button>span,
  body.tt-sidebar-compact .sidebar-bottom button:not(#signatureSidebarToggle)>span{
    width:22px!important;
    height:22px!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
  }
  body.tt-sidebar-compact .side-nav button svg,
  body.tt-sidebar-compact .sidebar-bottom button:not(#signatureSidebarToggle) svg{
    width:22px!important;
    height:22px!important;
  }
  body.tt-sidebar-compact .side-nav button i,
  body.tt-sidebar-compact .sidebar-bottom button:not(#signatureSidebarToggle) i{display:none!important}

  body.tt-sidebar-compact .side-nav button.active{
    background:linear-gradient(145deg,rgba(255,249,235,.98),rgba(245,224,184,.92))!important;
    border:1px solid rgba(183,120,18,.24)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 8px 18px rgba(159,104,16,.13)!important;
  }
  body.tt-sidebar-compact .side-nav button.active>span{color:#A5680F!important}
  body.tt-sidebar-compact .side-nav button.active::after{display:none!important}
  body.tt-sidebar-compact .side-nav button[data-nav-badge]::before{
    right:4px;
    top:3px;
    border-width:2px;
    font-size:8px!important;
  }

  body.tt-sidebar-compact .sidebar-bottom{
    padding-top:10px!important;
    margin-top:0!important;
  }
  body.tt-sidebar-compact .sidebar-bottom a,
  body.tt-sidebar-compact .powered{display:none!important}
  body.tt-sidebar-compact #brandStudioBtn{display:grid!important}

  body.tt-sidebar-compact #signatureSidebarToggle{
    width:var(--tt-nav-rail-control)!important;
    min-width:var(--tt-nav-rail-control)!important;
    max-width:var(--tt-nav-rail-control)!important;
    height:48px!important;
    min-height:48px!important;
    margin:7px auto 0!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 8px 22px rgba(15,23,42,.05)!important;
  }
  body.tt-sidebar-compact #signatureSidebarToggle>span{display:none!important}
  body.tt-sidebar-compact #signatureSidebarToggle svg{
    width:20px!important;
    height:20px!important;
    transform:rotate(180deg);
    transition:transform var(--tt-nav-transition);
  }
}

/* Custom floating tooltip lives outside the overflow-clipped sidebar. */
.signature-nav-tooltip{
  position:fixed;
  left:0;
  top:0;
  z-index:1200;
  pointer-events:none;
  opacity:0;
  transform:translate3d(0,0,0) scale(.96);
  transform-origin:left center;
  padding:8px 10px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(24,29,38,.94);
  color:#fff;
  box-shadow:0 12px 32px rgba(15,23,42,.20);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  font-size:11px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  transition:opacity .12s ease,transform .12s ease;
}
.signature-nav-tooltip.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}
.signature-nav-tooltip::before{
  content:'';
  position:absolute;
  left:-5px;
  top:50%;
  width:9px;
  height:9px;
  transform:translateY(-50%) rotate(45deg);
  background:rgba(24,29,38,.94);
  border-left:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}

/* Smooth label transitions in expanded mode. */
@media(min-width:981px){
  body:not(.tt-sidebar-compact) .app-brand>span,
  body:not(.tt-sidebar-compact) .workspace-switcher>div,
  body:not(.tt-sidebar-compact) .workspace-switcher>span:last-child,
  body:not(.tt-sidebar-compact) .side-nav button,
  body:not(.tt-sidebar-compact) .sidebar-bottom button{
    transition:opacity .14s ease,background .16s ease,color .16s ease,transform .16s ease!important;
  }
}

/* Desktop compact preference never becomes a cramped mobile rail. */
@media(max-width:980px){
  body.tt-sidebar-compact .sidebar{
    width:266px!important;
    padding:18px!important;
  }
  body.tt-sidebar-compact .app-main{margin-left:0!important}
  body.tt-sidebar-compact .app-brand>span{display:inline!important}
  body.tt-sidebar-compact .workspace-switcher>div{display:flex!important}
  body.tt-sidebar-compact .workspace-switcher>span:last-child{display:inline!important}
  body.tt-sidebar-compact .side-nav button,
  body.tt-sidebar-compact .sidebar-bottom button{font-size:13px!important}
  .signature-nav-tooltip{display:none!important}
  #signatureSidebarToggle{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  .sidebar,.app-main,#signatureSidebarToggle svg,.signature-nav-tooltip{transition:none!important}
}