/* /includes/controls/moderntabs.css
   Shared contemporary tabs with optional "More" overflow dropdown. */

:root{
  --modern-tabs-accent: var(--primary, var(--bs-primary, #0d6efd));
  --modern-tabs-border: rgba(0,0,0,.095);
  --modern-tabs-border-soft: rgba(0,0,0,.065);
  --modern-tabs-hover: rgba(13,110,253,.06);
  --modern-tabs-hover-border: rgba(13,110,253,.15);
}

.modern-tabs-card,
.profile-tabs-card{
  position: relative;
  overflow: visible !important;
  border: 1px solid var(--modern-tabs-border-soft) !important;
  background: var(--bs-body-bg, #fff);
  box-shadow: 0 6px 18px rgba(0,0,0,.045) !important;
}

.modern-tabs-card-header{
  position: relative;
  z-index: 40;
  padding: .22rem .40rem 0;
  border-bottom: 1px solid var(--modern-tabs-border);
  background: var(--bs-body-bg, #fff);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.modern-tabs-card-body{
  position: relative;
  z-index: 1;
  overflow: visible;
  border-top: 0;
  padding-top: .78rem !important;
}

.modern-tabs-shell,
.profile-tabs-shell,
.meet-subtabs-wrap{
  position: relative;
  z-index: 30;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  padding: .28rem;
  margin: 0;
  border: 1px solid var(--modern-tabs-border-soft);
  border-radius: 999px;
  background: var(--bs-body-bg, #fff);
  box-shadow: 0 1px 0 rgba(255,255,255,.72) inset, 0 .35rem 1rem rgba(0,0,0,.04);
}

.modern-tabs-card .modern-tabs-shell,
.modern-tabs-card .profile-tabs-shell,
.profile-tabs-card .profile-tabs-shell{
  margin: 0 0 -1px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.modern-tabs-shell--standalone{
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 0 0 1rem;
}

.modern-tabs-shell.is-dropdown-open,
.profile-tabs-shell.is-dropdown-open,
.meet-subtabs-wrap.is-dropdown-open{
  z-index: 1080;
}

@supports selector(:has(*)){
  .modern-tabs-shell:has(.modern-tabs-menu.show),
  .profile-tabs-shell:has(.profile-tabs-menu.show),
  .meet-subtabs-wrap:has(.modern-tabs-menu.show){
    z-index: 1080;
  }
}

.modern-tab-group,
.modern-tabs-group,
.profile-tab-group,
.meet-subtabs-wrap > .meet-tabs{
  position: relative;
  z-index: 1;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: .12rem;
  overflow: visible;
  padding: 0;
  margin: 0;
  list-style: none;
  vertical-align: top;
}

.modern-tab-group > .modern-tabbtn,
.modern-tabs-group > .modern-tabbtn,
.profile-tab-group > .profile-tabbtn,
.profile-tab-group .profile-tabs-more-btn,
.modern-tab-group .modern-tabs-more-btn,
.modern-tabs-group .modern-tabs-more-btn,
.meet-subtabs-wrap > .meet-tabs .meet-tabbtn{
  border: 0 !important;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  min-height: 2.1rem;
  padding: .38rem .66rem !important;
  line-height: 1.1;
  white-space: nowrap;
  font-weight: 800;
  color: rgba(0,0,0,.74) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer;
  transform: none !important;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.modern-tab-group > .modern-tabbtn i,
.modern-tabs-group > .modern-tabbtn i,
.profile-tab-group > .profile-tabbtn i,
.profile-tab-group .profile-tabs-more-btn i,
.modern-tab-group .modern-tabs-more-btn i,
.modern-tabs-group .modern-tabs-more-btn i,
.meet-subtabs-wrap > .meet-tabs .meet-tabbtn i{
  width: 1.1rem;
  text-align: center;
}

.modern-tab-group > .modern-tabbtn:hover,
.modern-tabs-group > .modern-tabbtn:hover,
.profile-tab-group > .profile-tabbtn:hover,
.profile-tab-group .profile-tabs-more-btn:hover,
.modern-tab-group .modern-tabs-more-btn:hover,
.modern-tabs-group .modern-tabs-more-btn:hover,
.meet-subtabs-wrap > .meet-tabs .meet-tabbtn:hover{
  color: rgba(0,0,0,.92) !important;
  background: var(--modern-tabs-hover) !important;
}

.modern-tab-group > .modern-tabbtn.active,
.modern-tab-group > .modern-tabbtn.is-active,
.modern-tabs-group > .modern-tabbtn.active,
.modern-tabs-group > .modern-tabbtn.is-active,
.profile-tab-group > .profile-tabbtn.active,
.profile-tab-group > .profile-tabbtn.is-active,
.profile-tab-group .profile-tabs-more-btn.active,
.profile-tab-group .profile-tabs-more-btn.is-active,
.modern-tab-group .modern-tabs-more-btn.active,
.modern-tab-group .modern-tabs-more-btn.is-active,
.modern-tabs-group .modern-tabs-more-btn.active,
.modern-tabs-group .modern-tabs-more-btn.is-active,
.meet-subtabs-wrap > .meet-tabs .meet-tabbtn.active,
.meet-subtabs-wrap > .meet-tabs .meet-tabbtn.is-active{
  color: #fff !important;
  background: var(--modern-tabs-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18) !important;
}

.modern-tab-group > .modern-tabbtn:focus-visible,
.modern-tabs-group > .modern-tabbtn:focus-visible,
.profile-tab-group > .profile-tabbtn:focus-visible,
.profile-tab-group .profile-tabs-more-btn:focus-visible,
.modern-tab-group .modern-tabs-more-btn:focus-visible,
.modern-tabs-group .modern-tabs-more-btn:focus-visible,
.meet-subtabs-wrap > .meet-tabs .meet-tabbtn:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 .16rem rgba(13,110,253,.18) !important;
}

/* Connected card tab strip. */
.modern-tabs-card .modern-tabs-group,
.profile-tabs-card .profile-tab-group{
  display: flex;
  width: 100%;
  align-items: flex-end;
  gap: .08rem;
}

.modern-tabs-card .modern-tabs-group > .modern-tabbtn,
.profile-tabs-card .profile-tab-group > .profile-tabbtn,
.modern-tabs-card .modern-tabs-group .modern-tabs-more-btn,
.profile-tabs-card .profile-tab-group .profile-tabs-more-btn{
  min-height: 2.08rem;
  margin-bottom: -1px !important;
  padding: .38rem .64rem .44rem !important;
  border: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  border-radius: .62rem .62rem 0 0 !important;
  color: rgba(0,0,0,.68) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.modern-tabs-card .modern-tabs-group > .modern-tabbtn:hover,
.profile-tabs-card .profile-tab-group > .profile-tabbtn:hover,
.modern-tabs-card .modern-tabs-group .modern-tabs-more-btn:hover,
.profile-tabs-card .profile-tab-group .profile-tabs-more-btn:hover{
  color: rgba(0,0,0,.90) !important;
  border-color: var(--modern-tabs-hover-border) !important;
  border-bottom-color: transparent !important;
  background: var(--modern-tabs-hover) !important;
}

.modern-tabs-card .modern-tabs-group > .modern-tabbtn.active,
.modern-tabs-card .modern-tabs-group > .modern-tabbtn.is-active,
.profile-tabs-card .profile-tab-group > .profile-tabbtn.active,
.profile-tabs-card .profile-tab-group > .profile-tabbtn.is-active,
.modern-tabs-card .modern-tabs-group .modern-tabs-more-btn.active,
.modern-tabs-card .modern-tabs-group .modern-tabs-more-btn.is-active,
.profile-tabs-card .profile-tab-group .profile-tabs-more-btn.active,
.profile-tabs-card .profile-tab-group .profile-tabs-more-btn.is-active{
  color: var(--modern-tabs-accent) !important;
  border-color: var(--modern-tabs-border) !important;
  border-bottom-color: var(--bs-body-bg, #fff) !important;
  background: var(--bs-body-bg, #fff) !important;
  box-shadow: inset 0 2px 0 var(--modern-tabs-accent) !important;
}

.modern-tabs-card .modern-tabs-group > .modern-tabbtn:focus-visible,
.profile-tabs-card .profile-tab-group > .profile-tabbtn:focus-visible,
.modern-tabs-card .modern-tabs-group .modern-tabs-more-btn:focus-visible,
.profile-tabs-card .profile-tab-group .profile-tabs-more-btn:focus-visible{
  outline: 0;
  box-shadow: inset 0 2px 0 var(--modern-tabs-accent), 0 0 0 .16rem rgba(13,110,253,.16) !important;
}

.modern-tabs-shell.is-reflowing .modern-tabbtn,
.modern-tabs-shell.is-reflowing .modern-tabs-more-btn,
.profile-tabs-shell.is-reflowing .profile-tabbtn,
.profile-tabs-shell.is-reflowing .profile-tabs-more-btn,
.meet-subtabs-wrap.is-reflowing .meet-tabbtn{
  transition: none !important;
}

.modern-tabs-more-wrap,
.profile-tabs-more-wrap{
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  overflow: visible !important;
}

.modern-tabs-more-btn.dropdown-toggle::after,
.profile-tabs-more-btn.dropdown-toggle::after{
  margin-left: .25rem;
}

.modern-tabs-menu,
.profile-tabs-menu{
  position: absolute;
  z-index: 1085;
  min-width: 13.5rem;
  max-width: calc(100vw - 1.5rem);
  box-sizing: border-box;
  padding: .35rem;
  border-radius: 1rem;
  border: 1px solid var(--modern-tabs-border-soft);
  box-shadow: 0 18px 45px rgba(0,0,0,.16);
  overflow: hidden;
}

.modern-tab-menuitem,
.profile-tab-menuitem{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  gap: .55rem;
  border-radius: .78rem;
  padding: .7rem .8rem !important;
  margin: 0;
  font-weight: 750;
  color: rgba(0,0,0,.78) !important;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none !important;
  background-clip: padding-box;
}

.modern-tab-menuitem i,
.profile-tab-menuitem i{
  width: 1.15rem;
  flex: 0 0 1.15rem;
  text-align: center;
}

.modern-tab-menuitem span,
.profile-tab-menuitem span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modern-tab-menuitem:hover,
.profile-tab-menuitem:hover{
  background: var(--modern-tabs-hover) !important;
  color: rgba(0,0,0,.94) !important;
}

.modern-tab-menuitem.active,
.modern-tab-menuitem.is-active,
.profile-tab-menuitem.active,
.profile-tab-menuitem.is-active{
  background: rgba(13,110,253,.12) !important;
  color: var(--modern-tabs-accent) !important;
}

.modern-tab-menuitem.active::after,
.modern-tab-menuitem.is-active::after,
.profile-tab-menuitem.active::after,
.profile-tab-menuitem.is-active::after{
  content: "✓";
  margin-left: auto;
  flex: 0 0 auto;
  font-weight: 900;
}

.modern-tabpanes,
.meet-tabpanes{
  position: relative;
  z-index: 1;
  overflow: visible;
}

.modern-pane,
.meet-pane{ display: none; }
.modern-pane.is-active,
.meet-pane.is-active{ display: block; }

/* Legacy horizontal-scroll fallback for any older modern tab lists that do not use a More dropdown. */
.modern-tabs,
.meet-subtabs-wrap > .meet-tabs{
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.modern-tabs::-webkit-scrollbar,
.meet-subtabs-wrap > .meet-tabs::-webkit-scrollbar{ display: none; }

.modern-tabs-wrap,
.meet-subtabs-wrap{ position: relative; }

@media (max-width: 767.98px){
  .modern-tabs-shell--standalone{
    display: block;
    width: 100%;
  }
  .modern-tab-group,
  .modern-tabs-group,
  .profile-tab-group,
  .meet-subtabs-wrap > .meet-tabs{
    width: 100%;
  }
  .modern-tabs-card-header{ padding: .18rem .34rem 0; }
  .modern-tabs-card-body{ padding-top: .72rem !important; }
  .modern-tabs-card .modern-tabs-group > .modern-tabbtn,
  .profile-tabs-card .profile-tab-group > .profile-tabbtn,
  .modern-tabs-card .modern-tabs-group .modern-tabs-more-btn,
  .profile-tabs-card .profile-tab-group .profile-tabs-more-btn{
    min-height: 2.08rem;
    padding: .36rem .54rem .42rem !important;
  }
  .modern-tabs-menu,
  .profile-tabs-menu{
    min-width: min(13.5rem, calc(100vw - 1.5rem));
  }
}

@media (max-width: 420px){
  .modern-tab-group > .modern-tabbtn,
  .modern-tabs-group > .modern-tabbtn,
  .profile-tab-group > .profile-tabbtn,
  .profile-tab-group .profile-tabs-more-btn,
  .modern-tab-group .modern-tabs-more-btn,
  .modern-tabs-group .modern-tabs-more-btn{
    padding: .38rem .56rem !important;
  }
  .modern-tabs-card .modern-tabs-group > .modern-tabbtn,
  .profile-tabs-card .profile-tab-group > .profile-tabbtn,
  .modern-tabs-card .modern-tabs-group .modern-tabs-more-btn,
  .profile-tabs-card .profile-tab-group .profile-tabs-more-btn{
    padding: .38rem .58rem .45rem !important;
  }
  .modern-tabs-more-text,
  .profile-tabs-more-text{ display: none; }
}

html.dark{
  --modern-tabs-border: rgba(255,255,255,.12);
  --modern-tabs-border-soft: rgba(255,255,255,.085);
  --modern-tabs-hover: rgba(255,255,255,.08);
  --modern-tabs-hover-border: rgba(255,255,255,.14);
}

html.dark .modern-tabs-card,
html.dark .profile-tabs-card,
html.dark .modern-tabs-card-header,
html.dark .modern-tabs-shell,
html.dark .profile-tabs-shell,
html.dark .meet-subtabs-wrap{
  background: var(--bs-body-bg, #181818);
}

html.dark .modern-tabs-card,
html.dark .profile-tabs-card{
  box-shadow: 0 8px 22px rgba(0,0,0,.24) !important;
}

html.dark .modern-tabs-shell,
html.dark .profile-tabs-shell,
html.dark .meet-subtabs-wrap{
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 .35rem 1rem rgba(0,0,0,.20);
}

html.dark .modern-tab-group > .modern-tabbtn,
html.dark .modern-tabs-group > .modern-tabbtn,
html.dark .profile-tab-group > .profile-tabbtn,
html.dark .profile-tab-group .profile-tabs-more-btn,
html.dark .modern-tab-group .modern-tabs-more-btn,
html.dark .modern-tabs-group .modern-tabs-more-btn,
html.dark .meet-subtabs-wrap > .meet-tabs .meet-tabbtn,
html.dark .modern-tab-menuitem,
html.dark .profile-tab-menuitem{
  color: rgba(255,255,255,.78) !important;
}

html.dark .modern-tab-group > .modern-tabbtn:hover,
html.dark .modern-tabs-group > .modern-tabbtn:hover,
html.dark .profile-tab-group > .profile-tabbtn:hover,
html.dark .profile-tab-group .profile-tabs-more-btn:hover,
html.dark .modern-tab-group .modern-tabs-more-btn:hover,
html.dark .modern-tabs-group .modern-tabs-more-btn:hover,
html.dark .meet-subtabs-wrap > .meet-tabs .meet-tabbtn:hover,
html.dark .modern-tab-menuitem:hover,
html.dark .profile-tab-menuitem:hover{
  color: rgba(255,255,255,.96) !important;
  background: var(--modern-tabs-hover) !important;
}

html.dark .modern-tabs-card .modern-tabs-group > .modern-tabbtn,
html.dark .profile-tabs-card .profile-tab-group > .profile-tabbtn,
html.dark .modern-tabs-card .modern-tabs-group .modern-tabs-more-btn,
html.dark .profile-tabs-card .profile-tab-group .profile-tabs-more-btn{
  color: rgba(255,255,255,.72) !important;
}

html.dark .modern-tab-group > .modern-tabbtn.active,
html.dark .modern-tab-group > .modern-tabbtn.is-active,
html.dark .modern-tabs-group > .modern-tabbtn.active,
html.dark .modern-tabs-group > .modern-tabbtn.is-active,
html.dark .profile-tab-group > .profile-tabbtn.active,
html.dark .profile-tab-group > .profile-tabbtn.is-active,
html.dark .profile-tab-group .profile-tabs-more-btn.active,
html.dark .profile-tab-group .profile-tabs-more-btn.is-active,
html.dark .modern-tab-group .modern-tabs-more-btn.active,
html.dark .modern-tab-group .modern-tabs-more-btn.is-active,
html.dark .modern-tabs-group .modern-tabs-more-btn.active,
html.dark .modern-tabs-group .modern-tabs-more-btn.is-active,
html.dark .meet-subtabs-wrap > .meet-tabs .meet-tabbtn.active,
html.dark .meet-subtabs-wrap > .meet-tabs .meet-tabbtn.is-active{
  color: #fff !important;
  background: var(--modern-tabs-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14) !important;
}

html.dark .modern-tabs-card .modern-tabs-group > .modern-tabbtn.active,
html.dark .modern-tabs-card .modern-tabs-group > .modern-tabbtn.is-active,
html.dark .profile-tabs-card .profile-tab-group > .profile-tabbtn.active,
html.dark .profile-tabs-card .profile-tab-group > .profile-tabbtn.is-active,
html.dark .modern-tabs-card .modern-tabs-group .modern-tabs-more-btn.active,
html.dark .modern-tabs-card .modern-tabs-group .modern-tabs-more-btn.is-active,
html.dark .profile-tabs-card .profile-tab-group .profile-tabs-more-btn.active,
html.dark .profile-tabs-card .profile-tab-group .profile-tabs-more-btn.is-active{
  color: #fff !important;
  border-color: var(--modern-tabs-border) !important;
  border-bottom-color: var(--bs-body-bg, #181818) !important;
  background: var(--bs-body-bg, #181818) !important;
  box-shadow: inset 0 2px 0 var(--modern-tabs-accent) !important;
}

html.dark .modern-tabs-menu,
html.dark .profile-tabs-menu{
  background: var(--bs-body-bg, #181818);
  box-shadow: 0 18px 45px rgba(0,0,0,.34);
}

html.dark .modern-tab-menuitem.active,
html.dark .modern-tab-menuitem.is-active,
html.dark .profile-tab-menuitem.active,
html.dark .profile-tab-menuitem.is-active{
  color: #fff !important;
  background: rgba(13,110,253,.32) !important;
}