/*
 * MISTER FAST LiveMapChat WEB — Theme V1.1 Sidebar Enterprise
 * Scope: Sidebar visual layer only.
 * No map, driver data, feed, chat, login, role, API or JavaScript behavior changes.
 */

body.mf-workspace-theme-v1{
  --mf-v11-side-width:264px;
  --mf-v11-side-pad:12px;
  --mf-v11-side-gap:8px;
}

/* Sidebar shell */
body.mf-workspace-theme-v1 .mf514-sidebar{
  padding:10px 0 16px!important;
  background:linear-gradient(180deg,#064DAE 0%,#003B91 54%,#002B70 100%)!important;
  border-right:1px solid rgba(255,255,255,.16)!important;
  box-shadow:8px 0 26px rgba(0,43,117,.14)!important;
  overflow-x:hidden!important;
}

/* Brand: compact and easy to recognize */
body.mf-workspace-theme-v1 .mf514-brand{
  min-height:68px!important;
  margin:0 12px 12px!important;
  padding:10px 12px!important;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  column-gap:10px!important;
  align-items:center!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.mf-workspace-theme-v1 .mf514-brand>span{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  width:42px!important;
  height:42px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:13px!important;
  background:#FFC400!important;
  color:#00316E!important;
  font-size:21px!important;
  line-height:1!important;
}
body.mf-workspace-theme-v1 .mf514-brand>b{
  grid-column:2!important;
  grid-row:1!important;
  display:block!important;
  min-width:0!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:900!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.mf-workspace-theme-v1 .mf514-brand>small{
  grid-column:2!important;
  grid-row:2!important;
  display:block!important;
  color:rgba(255,255,255,.76)!important;
  font-size:10px!important;
  line-height:1.2!important;
}

/* Current user card */
body.mf-workspace-theme-v1 .mf514-sidebar .mf3243-menu-user{
  width:auto!important;
  min-height:62px!important;
  margin:0 12px 10px!important;
  padding:9px 10px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:16px!important;
  background:rgba(0,34,92,.24)!important;
  box-shadow:none!important;
}
body.mf-workspace-theme-v1 .mf514-sidebar .mf3243-menu-avatar{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
}
body.mf-workspace-theme-v1 .mf514-sidebar .mf3243-menu-user-copy>b{
  font-size:13px!important;
}
body.mf-workspace-theme-v1 .mf514-sidebar .mf3243-menu-user-copy>small{
  font-size:10px!important;
}

/* Menu stack */
body.mf-workspace-theme-v1 .mf514-menu{
  display:flex!important;
  flex-direction:column!important;
  gap:var(--mf-v11-side-gap)!important;
  padding:0 var(--mf-v11-side-pad) 12px!important;
  overflow:visible!important;
}

/* Menu item: icon + clear Thai label + simple arrow */
body.mf-workspace-theme-v1 .mf514-menu>button,
body.mf-workspace-theme-v1 .mf514-menu>a,
body.mf-workspace-theme-v1 .mf3243-sidebar-auth{
  position:relative!important;
  width:100%!important;
  min-height:58px!important;
  margin:0!important;
  padding:8px 38px 8px 9px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.17)!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.085)!important;
  color:#fff!important;
  text-align:left!important;
  text-decoration:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  cursor:pointer!important;
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease!important;
}
body.mf-workspace-theme-v1 .mf514-menu>button::after,
body.mf-workspace-theme-v1 .mf514-menu>a::after,
body.mf-workspace-theme-v1 .mf3243-sidebar-auth::after{
  content:'›'!important;
  position:absolute!important;
  right:14px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  color:rgba(255,255,255,.66)!important;
  font-size:22px!important;
  font-weight:900!important;
  line-height:1!important;
}
body.mf-workspace-theme-v1 .mf514-menu>button:hover,
body.mf-workspace-theme-v1 .mf514-menu>a:hover,
body.mf-workspace-theme-v1 .mf3243-sidebar-auth:hover{
  background:rgba(255,255,255,.16)!important;
  border-color:rgba(255,255,255,.34)!important;
  transform:translateX(2px)!important;
  box-shadow:0 7px 16px rgba(0,25,74,.13)!important;
}
body.mf-workspace-theme-v1 .mf514-menu>button:focus-visible,
body.mf-workspace-theme-v1 .mf514-menu>a:focus-visible,
body.mf-workspace-theme-v1 .mf3243-sidebar-auth:focus-visible{
  outline:3px solid rgba(255,196,0,.55)!important;
  outline-offset:2px!important;
}

/* Icon tile */
body.mf-workspace-theme-v1 .mf514-menu>button>span,
body.mf-workspace-theme-v1 .mf514-menu>a>span,
body.mf-workspace-theme-v1 .mf3243-sidebar-auth>span{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.13)!important;
  color:#fff!important;
  font-size:19px!important;
  line-height:1!important;
}

/* Force labels visible in expanded mode */
body.mf-workspace-theme-v1:not(.mf212-sidebar-collapsed) .mf514-menu>button>b,
body.mf-workspace-theme-v1:not(.mf212-sidebar-collapsed) .mf514-menu>a>b,
body.mf-workspace-theme-v1:not(.mf212-sidebar-collapsed) .mf3243-sidebar-auth>b{
  display:block!important;
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:hidden!important;
  color:inherit!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

/* Active state: unmistakable, but not noisy */
body.mf-workspace-theme-v1 .mf514-menu>button.is-active{
  background:#FFC400!important;
  border-color:#FFD545!important;
  color:#00316E!important;
  box-shadow:0 9px 20px rgba(255,196,0,.24)!important;
}
body.mf-workspace-theme-v1 .mf514-menu>button.is-active::after{
  color:#00316E!important;
}
body.mf-workspace-theme-v1 .mf514-menu>button.is-active>span{
  border-color:rgba(0,49,110,.08)!important;
  background:rgba(255,255,255,.68)!important;
  color:#00316E!important;
}

/* Login/logout is visually separated but remains in same flow */
body.mf-workspace-theme-v1 .mf3243-sidebar-auth{
  margin-top:5px!important;
  border-color:rgba(255,255,255,.24)!important;
  background:rgba(0,25,74,.26)!important;
}
body.mf-workspace-theme-v1 .mf3243-sidebar-auth.is-login{
  background:#FFC400!important;
  border-color:#FFD545!important;
  color:#00316E!important;
}
body.mf-workspace-theme-v1 .mf3243-sidebar-auth.is-login::after{
  color:#00316E!important;
}
body.mf-workspace-theme-v1 .mf3243-sidebar-auth.is-login>span{
  background:rgba(255,255,255,.70)!important;
  color:#00316E!important;
}

/* Customer service shortcut */
body.mf-workspace-theme-v1 .mf351-customer-request-link{
  width:auto!important;
  min-height:66px!important;
  margin:2px 12px 10px!important;
  padding:10px 12px!important;
  border:1px solid #FFD545!important;
  border-radius:17px!important;
  background:#FFC400!important;
  color:#00316E!important;
  box-shadow:0 8px 20px rgba(255,196,0,.18)!important;
}

/* Collapse control */
body.mf-workspace-theme-v1 .mf212-sidebar-toggle{
  width:42px!important;
  height:62px!important;
  border:2px solid #fff!important;
  border-radius:0 18px 18px 0!important;
  background:#0046A6!important;
  color:#fff!important;
  box-shadow:5px 7px 18px rgba(0,43,117,.18)!important;
}
body.mf-workspace-theme-v1 .mf212-sidebar-toggle:hover{
  background:#FFC400!important;
  color:#00316E!important;
}

/* True compact mode: icons only, clean and predictable */
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf514-sidebar{
  padding-left:0!important;
  padding-right:0!important;
}
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf514-brand{
  width:52px!important;
  min-height:54px!important;
  margin:8px auto 12px!important;
  padding:6px!important;
  display:flex!important;
  justify-content:center!important;
}
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf514-brand>span{
  width:40px!important;
  height:40px!important;
}
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf514-brand>b,
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf514-brand>small,
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf3243-menu-user,
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf351-customer-request-link{
  display:none!important;
}
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf514-menu{
  padding:0 9px 12px!important;
  gap:8px!important;
}
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf514-menu>button,
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf514-menu>a,
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf3243-sidebar-auth{
  min-height:54px!important;
  padding:6px!important;
  justify-content:center!important;
  border-radius:15px!important;
}
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf514-menu>button::after,
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf514-menu>a::after,
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf3243-sidebar-auth::after,
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf514-menu b,
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf3243-sidebar-auth b{
  display:none!important;
}
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf514-menu>button>span,
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf514-menu>a>span,
body.mf-workspace-theme-v1.mf212-sidebar-collapsed .mf3243-sidebar-auth>span{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
}

/* Keep text readable on narrower desktop widths. */
@media (max-width:1180px){
  body.mf-workspace-theme-v1:not(.mf212-sidebar-collapsed) .mf514-menu>button>b,
  body.mf-workspace-theme-v1:not(.mf212-sidebar-collapsed) .mf514-menu>a>b,
  body.mf-workspace-theme-v1:not(.mf212-sidebar-collapsed) .mf3243-sidebar-auth>b{
    font-size:13px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.mf-workspace-theme-v1 .mf514-menu>button,
  body.mf-workspace-theme-v1 .mf514-menu>a,
  body.mf-workspace-theme-v1 .mf3243-sidebar-auth{
    transition:none!important;
  }
}