/*-- custom css start here --*/
.page-body {
  margin-top: 20px;
}

/*-- header css start here --*/
.jm-join-link {
  color: var(--tblr-primary);
}

.jm-join-link:hover {
  color: var(--sl-primary-hover);
  text-decoration: underline;
}

.jm-header-profile {
  gap: 15px;
}

.Jm-upgrade-btn {
  height: 40px;
}

.jm-profile-name {
  color: var(--tblr-white);
}

.jm-designation {
  color: var(--tblr-white) !important;
}

.navbar-toggler-icon {
  color: var(--tblr-white);
}

/*-- header css end here --*/
/*-- motion vocabulary + shell tokens ---------------------------------------
    Defined once and reused by every state change in the app shell.
    Never transition `all`; animate transform/opacity for movement.          */
:root {
  --jm-ease: cubic-bezier(.4, 0, .2, 1);
  --jm-ease-out: cubic-bezier(.16, 1, .3, 1);
  --jm-dur-1: 120ms;   /* hover, focus, colour */
  --jm-dur-2: 200ms;   /* dropdowns, chips, small panels */
  --jm-dur-3: 280ms;   /* drawer, large expand/collapse */
  --jm-topbar-h: 60px;
  --jm-shell-max: 1800px;

  /* The brand primary is a deep red; in dark mode it resolves to a muted mauve
     that clears neither 4.5:1 for text nor 3:1 for a focus ring on a near-black
     surface. Everything that has to be *legible* uses these instead. */
  --jm-nav-accent: var(--sl-primary);
  --jm-focus-ring: var(--sl-primary);
  --jm-danger-fg: var(--sl-danger);
}

[data-bs-theme="dark"] {
  --jm-nav-accent: color-mix(in srgb, var(--sl-primary) 50%, #ffffff);
  --jm-focus-ring: color-mix(in srgb, var(--sl-primary) 50%, #ffffff);
  --jm-danger-fg: color-mix(in srgb, var(--sl-danger) 78%, #ffffff);
}

/* First paint: hold every transition so the page does not fade in on load and
   a theme-swap reload does not animate every colour at once. Removed by the
   boot script in include/user/topbar.blade.php. */
.jm-boot *,
.jm-boot *::before,
.jm-boot *::after {
  transition: none !important;
}

/*-- user application shell: top bar + mobile drawer start here --*/

/* --- shell ------------------------------------------------------------- */
.jm-app-shell {
  --jm-page-bg: #f6f8fc;
  --jm-surface: #ffffff;
  --jm-line: #e3e8f1;
  --jm-fg: #586987;
  --jm-fg-strong: #1d2942;
  /* #8a97ae was 2.9:1 on the bar -- below AA wherever it carries text */
  --jm-fg-muted: #64748b;
  --jm-hover-bg: #eef2f8;
  --jm-active-bg: color-mix(in srgb, var(--sl-primary) 11%, var(--jm-surface));
  --jm-bar-bg: rgba(255, 255, 255, .82);
  --jm-bar-shadow: 0 10px 26px -14px rgba(23, 35, 58, .45);
  --jm-menu-bg: #ffffff;
  --jm-menu-line: rgba(220, 227, 238, .95);
  --jm-menu-shadow: 0 14px 34px -10px rgba(23, 35, 58, .22), 0 2px 6px rgba(23, 35, 58, .06);
  --jm-scrim: rgba(17, 25, 40, .46);
  --jm-drawer-shadow: 18px 0 48px -12px rgba(16, 24, 40, .34);

  min-height: 100vh;
  background: var(--jm-page-bg);
}

.jm-app-content {
  width: 100%;
  min-width: 0;
  max-width: var(--jm-shell-max);
  margin-inline: auto;
  background: var(--jm-page-bg);
}

.jm-app-shell ~ .footer {
  margin-left: 0;
  max-width: var(--jm-shell-max);
  margin-inline: auto;
  /* literal, not var(--jm-page-bg): that token is declared on .jm-app-shell and
     custom properties inherit down the tree, never across to a sibling. */
  background: #f6f8fc !important;
}

[data-bs-theme="dark"] .jm-app-shell ~ .footer {
  background: #212121 !important;
}

/* Keyboard users get a way past ~8 navigation stops (WCAG 2.4.1). */
.jm-skip-link {
  position: fixed;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 1060;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--sl-primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--jm-dur-2) var(--jm-ease-out);
}

.jm-skip-link:focus,
.jm-skip-link:focus-visible {
  color: #ffffff;
  transform: translateY(0);
}

body.jm-scroll-lock {
  overflow: hidden;
}

/* --- top bar ----------------------------------------------------------- */
.jm-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--jm-bar-bg);
  border-bottom: 1px solid var(--jm-line);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  transition:
    box-shadow var(--jm-dur-2) var(--jm-ease),
    background-color var(--jm-dur-2) var(--jm-ease),
    border-color var(--jm-dur-2) var(--jm-ease);
}

.jm-topbar.is-scrolled {
  box-shadow: var(--jm-bar-shadow);
}

.jm-topbar-inner {
  max-width: var(--jm-shell-max);
  height: var(--jm-topbar-h);
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- brand ------------------------------------------------------------- */
.jm-topbar-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 2px;
  border-radius: 8px;
  text-decoration: none;
}

.jm-topbar-logo {
  display: block;
  width: auto;
  max-width: 150px;
  height: 28px;
  object-fit: contain;
}

.jm-topbar-wordmark,
.jm-sidebar-wordmark {
  display: none;
  color: var(--jm-fg-strong);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.015em;
  white-space: nowrap;
}

.jm-topbar-brand.is-logoless .jm-topbar-logo,
.jm-sidebar-brand a.is-logoless img {
  display: none;
}

.jm-topbar-brand.is-logoless .jm-topbar-wordmark,
.jm-sidebar-brand a.is-logoless .jm-sidebar-wordmark {
  display: block;
}

/* --- primary nav ------------------------------------------------------- */
.jm-topnav {
  display: none;
  flex: 0 1 auto;
  min-width: 0;
  align-self: stretch;
  align-items: stretch;
  gap: 1px;
  margin-inline-start: 10px;
}

/* No `overflow: hidden` here -- it would clip the Conference Mode dropdown.
   Instead every link is allowed to shrink and ellipsise, so the nav can never
   overflow its box and paint over .jm-topbar-actions (or scroll the page). */
.jm-topnav .jm-menu-wrap {
  min-width: 0;
}

.jm-topnav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--jm-fg);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  min-width: 0;
  transition: color var(--jm-dur-1) var(--jm-ease);
}

.jm-topnav-link > i,
.jm-topnav-link > span {
  position: relative;   /* keep label + icons above the ::before hover plate */
}

.jm-topnav-link > span {
  min-width: 0;
  /* the link sets line-height: 1; overflow: hidden would clip descenders */
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jm-topnav-link > i {
  flex: 0 0 auto;
}

.jm-topnav-link > i:first-child {
  color: var(--jm-fg-muted);
  font-size: 13.5px;
  transition: color var(--jm-dur-1) var(--jm-ease);
}

/* soft hover plate — no movement, per house style */
.jm-topnav-link::before {
  content: "";
  position: absolute;
  inset: 10px 4px;
  border-radius: 9px;
  background: var(--jm-hover-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--jm-dur-1) var(--jm-ease);
}

/* ink bar */
.jm-topnav-link::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--jm-nav-accent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  pointer-events: none;
  transition:
    transform var(--jm-dur-2) var(--jm-ease-out),
    opacity var(--jm-dur-2) var(--jm-ease);
}

.jm-topnav-link:hover,
.jm-topnav-link:focus-visible {
  color: var(--jm-fg-strong);
  text-decoration: none;
}

.jm-topnav-link:hover > i:first-child {
  color: var(--jm-fg-strong);
}

.jm-topnav-link:hover::before,
.jm-menu-wrap.is-open > .jm-topnav-link::before {
  opacity: 1;
}

.jm-topnav-link:hover::after,
.jm-menu-wrap.is-open > .jm-topnav-link::after {
  opacity: .4;
  transform: scaleX(.6);
}

.jm-topnav-link.active {
  color: var(--jm-nav-accent);
  font-weight: 700;
}

.jm-topnav-link.active > i:first-child,
.jm-topnav-link.active:hover > i:first-child {
  color: var(--jm-nav-accent);
}

.jm-topnav-link.active::after,
.jm-topnav-link.active:hover::after,
.jm-menu-wrap.is-open > .jm-topnav-link.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.jm-topnav-link:focus-visible {
  outline: 2px solid var(--jm-focus-ring);
  outline-offset: -4px;
}

.jm-caret {
  color: var(--jm-fg-muted);
  font-size: 9px;
  transition:
    transform var(--jm-dur-2) var(--jm-ease-out),
    color var(--jm-dur-1) var(--jm-ease);
}

.jm-menu-wrap.is-open .jm-caret {
  transform: rotate(180deg);
}

/* --- top-bar menus ----------------------------------------------------- */
.jm-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.jm-topnav .jm-menu-wrap {
  align-self: stretch;
}

.jm-menu {
  position: absolute;
  top: calc(100% - 5px);
  inset-inline-start: 4px;
  /* local ordering only: .jm-topbar is its own stacking context (z-index 1030
     plus a backdrop-filter), so a menu can never paint above the bar's layer. */
  z-index: 5;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--jm-menu-line);
  border-radius: 12px;
  background: var(--jm-menu-bg);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: var(--jm-menu-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity var(--jm-dur-2) var(--jm-ease),
    transform var(--jm-dur-2) var(--jm-ease-out),
    visibility 0s linear var(--jm-dur-2);
}

.jm-menu-wrap.is-open > .jm-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--jm-dur-2) var(--jm-ease),
    transform var(--jm-dur-2) var(--jm-ease-out),
    visibility 0s;
}

.jm-menu-end {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.jm-menu-head {
  padding: 8px 10px 6px;
}

.jm-menu-head strong {
  display: block;
  overflow: hidden;
  color: var(--jm-fg-strong);
  font-size: 12.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jm-menu-head small {
  display: block;
  margin-top: 2px;
  color: var(--jm-fg);
  font-size: 11px;
  text-transform: capitalize;
}

.jm-menu-divider {
  height: 1px;
  margin: 5px 4px;
  background: var(--jm-line);
}

.jm-menu-item {
  position: relative;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--jm-fg);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  text-align: start;
  text-decoration: none;
  transition:
    background-color var(--jm-dur-1) var(--jm-ease),
    color var(--jm-dur-1) var(--jm-ease);
}

.jm-menu-item > i:first-child {
  width: 15px;
  color: var(--jm-fg-muted);
  font-size: 12.5px;
  text-align: center;
  transition: color var(--jm-dur-1) var(--jm-ease);
}

.jm-menu-item:hover,
.jm-menu-item:focus-visible {
  background: var(--jm-hover-bg);
  color: var(--jm-fg-strong);
  text-decoration: none;
}

.jm-menu-item:hover > i:first-child {
  color: var(--jm-fg-strong);
}

.jm-menu-item.active {
  background: var(--jm-active-bg);
  color: var(--jm-nav-accent);
  font-weight: 600;
}

.jm-menu-item.active > i:first-child {
  color: var(--jm-nav-accent);
}

/* A destructive action needs an affordance at rest, not only on hover. */
.jm-menu-item-danger,
.jm-menu-item-danger > i:first-child,
.jm-menu-item-danger:hover,
.jm-menu-item-danger:focus-visible,
.jm-menu-item-danger:hover > i:first-child {
  color: var(--jm-danger-fg);
}

.jm-menu-item-danger:hover,
.jm-menu-item-danger:focus-visible {
  background: rgba(var(--sl-danger-rgb), .12);
}

/* --- right-hand cluster ------------------------------------------------ */
.jm-topbar-actions {
  flex: 0 0 auto;
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.jm-topbar-theme {
  margin: 0;
}

.jm-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--jm-fg);
  font-size: 15px;
  transition:
    background-color var(--jm-dur-1) var(--jm-ease),
    color var(--jm-dur-1) var(--jm-ease),
    border-color var(--jm-dur-1) var(--jm-ease);
}

.jm-icon-btn:hover {
  background: var(--jm-hover-bg);
  color: var(--jm-fg-strong);
}

.jm-topbar-sep {
  width: 1px;
  height: 22px;
  background: var(--jm-line);
}

.jm-user-trigger {
  max-width: 220px;
  padding: 4px 9px 4px 4px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--jm-fg);
  transition:
    background-color var(--jm-dur-1) var(--jm-ease),
    border-color var(--jm-dur-1) var(--jm-ease);
}

.jm-user-trigger:hover,
.jm-menu-wrap.is-open > .jm-user-trigger {
  background: var(--jm-hover-bg);
  border-color: var(--jm-line);
}

.jm-user-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
}

.jm-user-copy {
  min-width: 0;
  flex-direction: column;
  line-height: 1.15;
  text-align: start;
}

.jm-user-copy strong,
.jm-user-copy small {
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jm-user-copy strong {
  color: var(--jm-fg-strong);
  font-size: 12px;
  font-weight: 600;
}

.jm-user-copy small {
  margin-top: 2px;
  color: var(--jm-fg);
  font-size: 11px;
  text-transform: capitalize;
}

/* --- hamburger --------------------------------------------------------- */
.jm-burger {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin-inline-start: -9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--jm-fg-strong);
  transition: background-color var(--jm-dur-1) var(--jm-ease);
}

.jm-burger:hover {
  background: var(--jm-hover-bg);
}

.jm-burger-box {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
}

.jm-burger-bar {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform var(--jm-dur-3) var(--jm-ease-out),
    opacity var(--jm-dur-2) var(--jm-ease);
}

.jm-burger-bar:nth-child(1) { top: 0; }
.jm-burger-bar:nth-child(2) { top: 5px; }
.jm-burger-bar:nth-child(3) { top: 10px; }

/* No X-morph on the burger: the open drawer (z-index 1047) paints over the bar
   (its own stacking context at 1030), so the morph was never visible and the
   button was not clickable to close. The drawer's own close button, the scrim
   and Esc are the close affordances. */

/* --- mobile drawer ----------------------------------------------------- */
.jm-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 1046;
  background: var(--jm-scrim);
  opacity: 0;
  visibility: hidden;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition:
    opacity var(--jm-dur-3) var(--jm-ease),
    visibility 0s linear var(--jm-dur-3);
}

.jm-drawer-scrim.is-visible {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--jm-dur-3) var(--jm-ease),
    visibility 0s;
}

.jm-user-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1047;
  width: min(300px, 86vw);
  display: flex;
  flex-direction: column;
  background: var(--jm-surface);
  border-right: 1px solid var(--jm-line);
  color: var(--jm-fg-strong);
  overscroll-behavior: contain;
  visibility: hidden;
  transform: translateX(-100%);
  transition:
    transform var(--jm-dur-3) var(--jm-ease-out),
    box-shadow var(--jm-dur-3) var(--jm-ease-out),
    visibility 0s linear var(--jm-dur-3);
}

[dir="rtl"] .jm-user-sidebar {
  inset: 0 0 0 auto;
  border-right: 0;
  border-left: 1px solid var(--jm-line);
  transform: translateX(100%);
}

.jm-user-sidebar.is-open {
  visibility: visible;
  transform: translateX(0);
  box-shadow: var(--jm-drawer-shadow);
  transition:
    transform var(--jm-dur-3) var(--jm-ease-out),
    box-shadow var(--jm-dur-3) var(--jm-ease-out),
    visibility 0s;
}

.jm-sidebar-brand {
  min-height: 56px;
  padding: 14px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.jm-sidebar-brand a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.jm-sidebar-brand img {
  display: block;
  width: auto;
  max-width: 148px;
  height: 28px;
  object-fit: contain;
}

.jm-sidebar-close,
.jm-sidebar-logout {
  border: 0;
  background: transparent;
  color: var(--jm-fg-muted);
  transition:
    background-color var(--jm-dur-1) var(--jm-ease),
    color var(--jm-dur-1) var(--jm-ease);
}

.jm-sidebar-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.jm-sidebar-close:hover {
  background: var(--jm-hover-bg);
  color: var(--jm-fg-strong);
}

.jm-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 6px 12px 20px;
}

.jm-sidebar-label {
  padding: 10px 10px 7px;
  color: var(--jm-fg-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.jm-sidebar-link {
  width: 100%;
  min-height: 42px;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--jm-fg);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-align: start;
  text-decoration: none;
  transition:
    background-color var(--jm-dur-1) var(--jm-ease),
    color var(--jm-dur-1) var(--jm-ease);
}

.jm-sidebar-link > i:first-child {
  width: 17px;
  color: var(--jm-fg-muted);
  font-size: 14px;
  text-align: center;
  transition: color var(--jm-dur-1) var(--jm-ease);
}

.jm-sidebar-link:hover {
  background: var(--jm-hover-bg);
  color: var(--jm-fg-strong);
  text-decoration: none;
}

.jm-sidebar-link:hover > i:first-child {
  color: var(--jm-fg-strong);
}

.jm-sidebar-link.active {
  background: var(--jm-active-bg);
  color: var(--jm-nav-accent);
  font-weight: 600;
}

.jm-sidebar-link.active > i:first-child {
  color: var(--jm-nav-accent);
}

.jm-sidebar-parent {
  cursor: pointer;
}

.jm-sidebar-parent .jm-sidebar-chevron {
  margin-inline-start: auto;
  color: var(--jm-fg-muted);
  font-size: 10px;
  transition: transform var(--jm-dur-2) var(--jm-ease-out);
}

.jm-sidebar-parent[aria-expanded="true"] .jm-sidebar-chevron {
  transform: rotate(180deg);
}


.jm-sidebar-sublink {
  min-height: 36px;
  margin: 2px 0 2px 28px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 8px;
  color: var(--jm-fg);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color var(--jm-dur-1) var(--jm-ease),
    color var(--jm-dur-1) var(--jm-ease);
}

.jm-sidebar-sublink > i:first-child {
  width: 14px;
  color: var(--jm-fg-muted);
  font-size: 12px;
  text-align: center;
}

.jm-sidebar-sublink:hover {
  background: var(--jm-hover-bg);
  color: var(--jm-fg-strong);
  text-decoration: none;
}

.jm-sidebar-sublink.active {
  background: var(--jm-active-bg);
  color: var(--jm-nav-accent);
  font-weight: 600;
}

.jm-sidebar-sublink.active > i:first-child {
  color: var(--jm-nav-accent);
}

.jm-link-trailing {
  margin-inline-start: auto;
  font-size: 9px;
  opacity: .65;
}

.jm-sidebar-divider {
  height: 1px;
  margin: 14px 9px 6px;
  background: var(--jm-line);
}

.jm-sidebar-footer {
  padding: 10px 12px 14px;
  border-top: 1px solid var(--jm-line);
}

.jm-sidebar-footer form {
  margin: 0;
}

.jm-theme-toggle {
  cursor: pointer;
}

.jm-sidebar-user {
  margin-top: 8px;
  padding: 9px 7px 2px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.jm-sidebar-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
}

.jm-sidebar-user-copy {
  min-width: 0;
  flex: 1;
  color: var(--jm-fg-strong);
  text-decoration: none;
}

.jm-sidebar-user-copy strong,
.jm-sidebar-user-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jm-sidebar-user-copy strong {
  font-size: 12px;
  font-weight: 600;
}

.jm-sidebar-user-copy small {
  margin-top: 2px;
  color: var(--jm-fg-muted);
  font-size: 10px;
  text-transform: capitalize;
}

.jm-sidebar-logout {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
}

.jm-sidebar-logout:hover {
  background: rgba(var(--sl-danger-rgb), .12);
  color: var(--jm-danger-fg);
}

/* --- dark ------------------------------------------------------------- */
[data-bs-theme="dark"] .jm-app-shell {
  --jm-page-bg: var(--sl-page);
  --jm-surface: var(--sl-surface);
  --jm-line: var(--sl-border);
  --jm-fg: var(--sl-text-secondary);
  --jm-fg-strong: var(--sl-text-primary);
  --jm-fg-muted: var(--sl-text-tertiary);
  --jm-hover-bg: var(--sl-neutral-30);
  --jm-active-bg: color-mix(in srgb, var(--sl-primary) 20%, var(--jm-surface));
  --jm-bar-bg: rgba(23, 23, 23, .84);
  /* a light hairline does the separating -- a black drop shadow cannot */
  --jm-bar-shadow: 0 1px 0 rgba(255, 255, 255, .10), 0 14px 30px -18px rgba(0, 0, 0, .95);
  --jm-menu-bg: #1f1f1f;
  --jm-menu-line: rgba(72, 72, 72, .8);
  --jm-menu-shadow: 0 16px 38px -12px rgba(0, 0, 0, .72);
  --jm-scrim: rgba(0, 0, 0, .58);
  --jm-drawer-shadow: 18px 0 48px -12px rgba(0, 0, 0, .7);
}

[data-bs-theme="dark"] .jm-user-avatar {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

[data-bs-theme="dark"] .jm-dashboard {
  color: var(--sl-text-primary);
}

[data-bs-theme="dark"] .jm-dashboard .form-label {
  color: var(--sl-text-secondary);
}

/* --- breakpoints ------------------------------------------------------ */
@media (min-width: 992px) {
  .jm-topnav {
    display: flex;
  }
}

/* The tight band: five labels, a logo and the user chip in ~990px. Trim the
   chrome here so labels only start ellipsising in genuinely extreme cases. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .jm-topbar-inner {
    padding-inline: 14px;
    gap: 8px;
  }

  .jm-topnav {
    margin-inline-start: 4px;
  }

  .jm-topnav-link {
    padding: 0 9px;
    gap: 6px;
  }

  .jm-user-copy strong,
  .jm-user-copy small {
    max-width: 96px;
  }
}

@media (max-width: 991.98px) {
  :root {
    --jm-topbar-h: 56px;
  }

  .jm-topbar-inner {
    padding-inline: 12px;
    gap: 10px;
  }

  .jm-topbar-logo {
    max-width: 124px;
    height: 26px;
  }

  /* avatar-only trigger: keep the pill concentric, and meet the 44px
     touch-target minimum without growing the 56px bar. */
  .jm-user-trigger {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    justify-content: center;
  }

  .jm-burger {
    margin-inline-start: -8px;
  }

  .jm-menu {
    min-width: 200px;
  }
}

@media print {
  .jm-topbar,
  .jm-user-sidebar,
  .jm-drawer-scrim,
  .jm-invoice-page .page-header {
    display: none !important;
  }

  .jm-app-content,
  .jm-invoice-page .jm-app-content,
  .jm-app-shell ~ .footer,
  .jm-invoice-page ~ .footer {
    max-width: none !important;
    margin-left: 0 !important;
  }

  .jm-invoice-page .page-body {
    padding: 0 !important;
  }
}
/*-- user application shell: top bar + mobile drawer end here --*/

/*-- dashboard css start here --*/
.jm-dashboard {
  color: #25324b;
  font-size: 12.5px;
}

.jm-dashboard .page-body {
  min-height: calc(100vh - var(--jm-topbar-h));
  margin-top: 0;
  padding: 20px 22px;
}

.jm-dashboard .container-xl {
  width: 100%;
  max-width: none;
  padding: 0;
}

.jm-dashboard .page-body > .container-xl > .card {
  min-height: calc(100vh - var(--jm-topbar-h) - 40px);
  border-color: #e1e6ef !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(26, 39, 65, .04) !important;
}

.jm-dashboard h2 {
  font-size: 18px;
  font-weight: 700;
}

.jm-dashboard h3 {
  font-size: 13px;
}

.jm-dashboard h4 {
  font-size: 13px;
  font-weight: 600;
}

.jm-dashboard .form-label {
  margin-bottom: 5px;
  color: #65748f;
  font-size: 11px;
}

.jm-dashboard .form-control,
.jm-dashboard .form-select,
.jm-dashboard .btn {
  min-height: 36px;
  font-size: 12px;
}

.jm-dashboard .text-secondary {
  color: #8996ad !important;
}

.jm-create-meeting-btn {
  background: #ff7a00 !important;
  background-image: none !important;
  border-color: #ff7a00 !important;
  box-shadow: none !important;
}

.jm-create-meeting-btn:hover,
.jm-create-meeting-btn:focus {
  background: #e96f00 !important;
  border-color: #e96f00 !important;
}

[data-bs-theme="dark"] .jm-create-meeting-btn {
  background: linear-gradient(135deg, #ff9a32 0%, #ff6a00 100%) !important;
  border: 1px solid #ffad5c !important;
  box-shadow: 0 5px 18px rgba(255, 122, 0, .32) !important;
  color: #fff !important;
}

[data-bs-theme="dark"] .jm-create-meeting-btn:hover,
[data-bs-theme="dark"] .jm-create-meeting-btn:focus {
  background: linear-gradient(135deg, #ffad5c 0%, #ff7a00 100%) !important;
  border-color: #ffc080 !important;
  box-shadow: 0 7px 22px rgba(255, 122, 0, .42) !important;
}

/*-- recording and profile application pages start here --*/
.jm-recordings-page .page-body,
.jm-profile-page .page-body {
  margin-top: 0;
  padding: 20px 22px;
}

.jm-recordings-page .recordings-page-shell,
.jm-profile-page .page-header > .container-xl,
.jm-profile-page .page-body > .container-xl {
  width: 100%;
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}

.jm-recordings-page .recordings-page-shell > .card,
.jm-profile-page .page-body > .container-xl > .card {
  border-color: #e1e6ef !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(26, 39, 65, .04) !important;
}

.jm-recordings-page .recording-page-tab {
  font-size: 11.5px;
}

.jm-profile-page .page-header {
  margin: 0;
  padding: 20px 22px 0;
}

.jm-profile-page .page-header .page-title {
  font-size: 19px;
  font-weight: 700;
}

.jm-profile-page .page-header .jm-header-right {
  padding: 0;
}

.jm-profile-page .profile-tabs {
  background: #fbfcfe;
  border-color: #e4e9f1 !important;
}

.jm-profile-page .profile-tabs .card-body {
  padding: 14px;
}

.jm-profile-page .profile-tabs .list-group {
  gap: 3px;
}

.jm-profile-page .profile-tabs .list-group-item {
  gap: 10px;
  min-height: 40px;
  padding: 10px 12px;
  border: 0 !important;
  border-radius: 8px !important;
  color: #62708a;
  font-size: 12px;
  font-weight: 500;
  transition:
    background-color var(--jm-dur-1) var(--jm-ease),
    color var(--jm-dur-1) var(--jm-ease);
}

.jm-profile-page .profile-tabs .list-group-item i {
  width: 17px;
  color: #8793a9;
  text-align: center;
}


.jm-profile-page .profile-tabs .list-group-item:hover {
  background: var(--jm-hover-bg, #f0f3f8) !important;
  color: var(--jm-fg-strong, #25324b);
}

.jm-profile-page .profile-tabs .list-group-item.active {
  background: var(--jm-active-bg, #e9edff) !important;
  color: var(--sl-primary) !important;
}

.jm-profile-page .profile-tabs .list-group-item.active i {
  color: var(--sl-primary);
}

.jm-profile-page [class*="col-md-9"] > .card-body {
  padding: 24px 28px;
}

.jm-profile-page [class*="col-md-9"] > .card-body h2 {
  font-size: 17px;
  font-weight: 700;
}

.jm-profile-page .card-footer {
  padding: 14px 28px;
  border-top: 1px solid #e4e9f1;
}

.jm-profile-page .form-group + .form-group {
  margin-top: 14px;
}

.jm-invoice-page .page-body > .container-xl > .card {
  max-width: 1100px;
  margin: 0 auto;
}

[data-bs-theme="dark"] .jm-profile-page .profile-tabs {
  background: var(--sl-elevated);
  border-color: var(--sl-border) !important;
}

[data-bs-theme="dark"] .jm-profile-page .profile-tabs .list-group-item {
  color: var(--sl-text-secondary);
}

[data-bs-theme="dark"] .jm-profile-page .profile-tabs .list-group-item:hover {
  background: var(--sl-neutral-30) !important;
  color: var(--sl-text-primary);
}

[data-bs-theme="dark"] .jm-profile-page .profile-tabs .list-group-item.active {
  background: rgba(var(--sl-primary-rgb), .16) !important;
  color: var(--sl-primary) !important;
}

@media (max-width: 767.98px) {
  .jm-recordings-page .page-body,
  .jm-profile-page .page-body {
    padding: 12px;
  }

  .jm-profile-page .page-header {
    padding: 14px 12px 0;
  }

  .jm-profile-page .page-header .row {
    gap: 12px;
  }

  .jm-profile-page .page-header .jm-header-right,
  .jm-profile-page .page-header .jm-instant-meeting {
    width: 100%;
    align-items: stretch !important;
  }

  .jm-profile-page .profile-tabs {
    border-right: 0 !important;
    border-bottom: 1px solid #e4e9f1;
  }

  .jm-profile-page .profile-tabs .list-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jm-profile-page [class*="col-md-9"] > .card-body {
    padding: 20px 16px;
  }

  .jm-profile-page .card-footer {
    padding: 14px 16px;
  }
}

/*-- recording and profile application pages end here --*/

.jm-header-left,
.jm-header-right {
  padding: var(--tblr-card-cap-padding-y) var(--tblr-card-cap-padding-x);
}

.jm-meeting-header {
  border-bottom: var(--tblr-card-border-width) solid var(--tblr-card-border-color);
}

.jm-header-right {
  gap: 20px;
}

.jm-instant-meeting {
  gap: 15px;
}

.jm-right {
  gap: 15px;
}

.jm-meeting-actions {
  gap: 15px;
  white-space: nowrap;
}

.jm-addto-btn {
  gap: 20px;
}

.jm-addto-btn a {
  gap: 8px;
  transition: opacity 200ms ease;
}

.jm-addto-btn a:hover {
  opacity: 0.75;
}

.jm-addto-btn a.jm-btn-google-calender {
  color: #4285f4;
}

.jm-addto-btn a.jm-btn-microsoft-outlook {
  color: #117bd6;
}

.jm-meeting-card {
  border-bottom: var(--tblr-card-border-width) solid var(--tblr-card-border-color);
  padding: 15px 20px;
  cursor: pointer;
}

.jm-meeting-card:hover {
  background-color: var(--sl-neutral-30);
}

.jm-meeting-card:focus-visible {
  outline: 2px solid var(--sl-primary);
  outline-offset: -2px;
}

.jm-meeting-card:active {
  background-color: rgba(var(--tblr-secondary-rgb), .12);
}

.jm-meeting-card.active,
.list-group-transparent .list-group-item.active {
  background-color: rgba(var(--tblr-secondary-rgb), .08) !important;
}

.nav-pills .jm-meeting-card.nav-link {
  border-radius: 0px;
}

.jm-meeting-search {
  padding: 15px 20px;
}

.jm-pagination {
  padding: 15px 20px;
}

.jm-meeting-detail {
  padding: 30px 20px 30px 30px;
}

.jm-invite-list {
  max-height: 350px;
  overflow-y: auto;
}

/* the button is absolutely positioned over the input -- reserve its width */
.jm-dashboard #conferenceId {
  padding-right: 56px !important;
}

[dir="rtl"] .jm-dashboard #conferenceId {
  padding-right: 2.5rem !important;
  padding-left: 56px !important;
}

button.link.jm-join-link {
  position: absolute;
  top: 7px;
  right: 10px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
}

button.link.jm-join-link:hover {
  color: var(--sl-primary-hover);
  text-decoration: underline;
}

button.link.jm-join-link:focus-visible {
  outline: 2px solid var(--jm-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

[dir="rtl"] button.link.jm-join-link {
  right: unset;
  left: 10px;
}

.jm-meeting-date {
  gap: 8px;
}

.nav-pills .nav-link.active {
  position: relative;
}

.nav-pills .nav-link.active::after {
  content: "";
  border-right: 3px solid;
  position: absolute;
  width: 10px;
  left: -7px;
  bottom: 0;
  top: 0;
  right: auto;
}

.ts-dropdown {
  z-index: 1056;
}

.jm-meeting-heading .jm-meeting-actions a {
  margin-left: 10px;
}

.jm-meeting-embed {
  font-size: 12px;
  resize: none;
  height: 89px;
}

.jm-meeting-card .text-truncate {
  max-width: min(550px, 100%);
}

.jm-meeting-date .text-truncate {
  max-width: min(300px, 100%);
}

/*-- dashboard css end here --*/
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  max-width: 1480px;
}

/*-- footer css start here --*/
.footer {
  padding: 1rem;
}

.jm-footer-menu {
  gap: 20px;
}

/*-- footer css end here --*/

/*-- Loader: layout only, colors in nova-theme.css --*/
#cover-spin {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: block;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#cover-spin::after {
  content: "";
  display: block;
  position: absolute;
  left: 48%;
  top: 40%;
  width: 40px;
  height: 40px;
  border-style: solid;
  border-top-color: transparent;
  border-width: 4px;
  border-radius: 50%;
  -webkit-animation: spin 0.8s linear infinite;
  animation: spin 0.8s linear infinite;
}
/*-- Loader css end here --*/

[type="radio"].hide-radio {
  display: none;
}

/* btn-primary styling now handled by nova-theme.css */

/*-- profile css start here --*/
.jm-profile .jm-header-right {
  padding: 0;
}

.g-recaptcha {
  overflow: hidden;
  max-width: 298px;
  width: 100%;
  height: 74px;
}

.g-recaptcha iframe {
  margin: -1px 0px 0px -2px;
}

.hero {
  padding: 6.5rem 0;
}

.hero-title {
  text-align: center;
  font-size: 3rem;
  font-weight: var(--tblr-font-weight-black);
  letter-spacing: -.04em;
  line-height: 1.2;
}

.hero-description {
  color: var(--tblr-secondary);
  font-size: var(--tblr-font-size-h2);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 45rem;
}

.hero-description-wide {
  max-width: 61.875rem;
}

.navbar-logo {
  width: auto;
  height: 2rem;
}

.logo-image {
  height: 2rem;
  width: auto;
}

.pricing-label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  vertical-align: bottom;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured {
  z-index: 1;
  border: 2px solid var(--tblr-primary);
  order: -1;
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .featured {
    order: unset;
    margin-top: 0;
    margin-bottom: 0;
    box-shadow: 0 0 4px rgba(var(--tblr-body-color-rgb), .04);
    border-radius: 8px;
  }
}

@media (max-width: 767.98px) {
  .jm-dashboard .page-body {
    padding: 12px;
  }

  .jm-dashboard .page-body > .container-xl > .card {
    min-height: calc(100vh - var(--jm-topbar-h) - 80px);
  }

  .hero-title {
    font-size: 2rem;
  }
}

@media (max-width: 575.98px) {
  .hero-description {
    font-size: var(--tblr-font-size-h3);
  }
}

@media (min-width: 992px) {

  :host,
  :root {
    margin-left: 0;
    margin-right: 0;
  }
}

/*-- Responsive css start here --*/
/*--mobile css start here--*/
@media screen and (max-width: 767px) {

  .featured {
    transform: unset;
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 100%;
  }

  .btn-outline-primary,
  .Jm-upgrade-btn,
  .btn-outline-danger {
    font-size: 0px;
    width: 44px;
    height: 44px;
  }

  .jm-header-profile {
    gap: 10px;
  }

  .jm-instant-meeting {
    width: 100%;
  }

  .jm-join-meeting {
    width: 100%;
  }

  .jm-header-left {
    padding: 0 15px 15px 15px;
  }

  .jm-meeting-detail {
    padding: 15px 20px;
  }

  .text-secondary {
    font-size: 12px;
  }

  .jm-meeting-heading .jm-meeting-actions a {
    margin: 0;
  }

  body {
    font-size: 0.875rem;
  }

  .jm-addto-btn {
    flex-direction: column;
  }

  .jm-meeting-detail {
    padding: 10px 15px;
  }

  .jm-meeting-card {
    padding: 15px;
  }

  .jm-pagination {
    padding: 15px;
  }

  .jm-meeting-search {
    padding: 15px;
  }

  .jm-header-right {
    padding: 15px;
  }

  .jm-meeting-card .text-truncate {
    max-width: 300px;
  }

  .jm-meeting-id {
    width: 130px;
  }

  .jm-meeting-date {
    width: 60%;
  }

  .jm-meeting-date .text-truncate {
    width: 140px;
  }

  .meeting-title {
    max-width: 200px !important;
  }
}

/*--ipad css start here--*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 100%;
  }

  .btn-outline-primary,
  .Jm-upgrade-btn {
    font-size: 0px;
    width: 44px;
    height: 44px;
  }

  .jm-header-profile {
    gap: 10px;
  }

  .jm-instant-meeting {
    width: 100%;
  }

  .jm-join-meeting {
    width: 100%;
  }

  .jm-header-left {
    padding: 0 15px 15px 15px;
  }

  .jm-meeting-detail {
    padding: 15px 20px;
  }

  .text-secondary {
    font-size: 12px;
  }

  .jm-meeting-heading .jm-meeting-actions a {
    margin: 0;
  }

  body {
    font-size: 0.875rem;
  }

  .jm-addto-btn {
    gap: 10px;
  }

  .jm-addto-btn a {
    gap: 3px;
    font-size: 12px;
  }

  .jm-meeting-detail {
    padding: 10px 15px;
  }

  .jm-meeting-card {
    padding: 15px;
  }

  .jm-pagination {
    padding: 15px;
  }

  .jm-meeting-search {
    padding: 15px;
  }

  .jm-header-right {
    padding: 15px;
  }
}

/*--ipad  pro css start here--*/
@media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (-webkit-min-device-pixel-ratio: 2) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 100%;
  }

  .jm-meeting-card .text-truncate {
    max-width: 355px;
  }
}

/*--laptop css start here--*/
@media screen and (min-width: 1200px) and (max-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 100%;
  }

  .page-body {
    margin-top: 10px;
  }

  .jm-meeting-card {
    padding: 13px 20px;
  }

  .jm-meeting-detail {
    padding: 25px 20px 25px 25px;
  }

  .jm-meeting-card .text-truncate {
    max-width: 440px;
  }

  .jm-meeting-date p.text-truncate {
    max-width: 220px;
  }

  .jm-meeting-actions a {
    margin-left: 5px;
  }
}


video::cue {
    font-size: 22px !important;
    color: white !important;
    background: rgba(0,0,0,0.7) !important;
}

/*-- viewport-height panes: allow for the sticky top bar -------------------*/
@media (min-width: 992px) {
  .jm-recordings-page .page-body,
  .jm-recordings-page .meeting-layout-row {
    min-height: calc(100vh - var(--jm-topbar-h));
  }
}

/*-- motion polish: the "clunky" fixes --------------------------------------
    Everything below removes a snap the app used to have. Movement is done
    with transform/opacity; size changes are explicit, never `all`.          */

@keyframes jm-rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Any Bootstrap collapse inside the app shell (Conference Mode, accordions,
   "show more" panels) glides instead of jumping. */
.jm-app-shell .collapsing {
  transition:
    height var(--jm-dur-3) var(--jm-ease-out),
    width var(--jm-dur-3) var(--jm-ease-out);
}

.jm-app-shell .accordion-button::after,
.jm-app-shell [data-bs-toggle="collapse"] .fa-chevron-down {
  transition: transform var(--jm-dur-2) var(--jm-ease-out);
}

/* Recordings: the list <-> detail switch. The search rail used to vanish with
   `display: none`; it now collapses its width while the detail pane grows.
   Only `width` is animated -- `flex-basis: auto` and `max-width: none` are
   discrete, so touching either would snap the column shut instantly. */
.jm-recordings-page .meeting-search-box,
.jm-recordings-page .meeting-detail-column {
  transition:
    width var(--jm-dur-3) var(--jm-ease-out),
    padding var(--jm-dur-3) var(--jm-ease-out),
    opacity var(--jm-dur-2) var(--jm-ease),
    visibility 0s;
}

.jm-recordings-page .meeting-search-box {
  visibility: visible;
}

/* The rail the list leaves behind when it collapses. It holds the column (and
   its divider) on the left edge, so the control that brings the list back sits
   where the list was rather than stranded at the far right of the detail pane. */
.jm-recordings-page .meeting-layout-row {
  --jm-rail-w: 56px;
}

.jm-recordings-page .meeting-rail {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: var(--jm-rail-w);
  padding: 1rem 0;
  position: sticky;
  top: 0;
}

.jm-recordings-page .meeting-rail-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sl-text-secondary, var(--tblr-secondary));
  user-select: none;
}

@media (min-width: 992px) {
  /* the two columns always add up to 12, so they must never wrap mid-transition */
  .jm-recordings-page .meeting-layout-row {
    flex-wrap: nowrap;
  }

  .jm-recordings-page .meeting-layout-row.search-box-collapsed .meeting-search-box {
    display: block;
    flex: 0 0 auto;
    width: var(--jm-rail-w);
    min-width: 0;
    padding-inline: 0;
    overflow: hidden !important;
    transition:
      width var(--jm-dur-3) var(--jm-ease-out),
      padding var(--jm-dur-3) var(--jm-ease-out);
  }

  /* The column now survives the collapse so it can carry the rail, so it is the
     list inside it that fades -- and it fades first, never reflowing visibly
     inside the shrinking column. */
  .jm-recordings-page .meeting-layout-row.search-box-collapsed .meeting-search-box > :not(.meeting-rail) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--jm-dur-2) var(--jm-ease),
      visibility 0s linear var(--jm-dur-2);
  }

  .jm-recordings-page .meeting-layout-row.search-box-collapsed .meeting-rail {
    display: flex;
  }

  .jm-recordings-page .meeting-layout-row.search-box-collapsed .meeting-detail-column {
    flex: 0 0 auto;
    width: calc(100% - var(--jm-rail-w));
    max-width: calc(100% - var(--jm-rail-w));
  }

  /* Collapsing is the header button's job, expanding the rail's: exactly one of
     the two is on screen at any time. The :not() matters -- the rail's own
     button borrows .meeting-search-toggle for its shape. */
  .jm-recordings-page .meeting-layout-row.search-box-collapsed .meeting-search-toggle:not(.meeting-rail-toggle) {
    display: none !important;
  }
}

/* The handle that hides the recordings list. It sits on the list's right
   border, level with the recording title, so it reads as part of the edge it
   collapses. While the list is hidden it steps aside; the rail's own chevron
   brings the list back. */
.jm-recordings-page .meeting-layout-row {
  position: relative;
}

.jm-recordings-page .meeting-sidebar-handle {
  position: absolute;
  z-index: 6;
  top: 1.7rem;
  left: calc(100% / 3);
  width: 30px;
  height: 30px;
  margin-left: -15px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  background: var(--tblr-bg-surface, #fff);
  color: var(--sl-primary, var(--tblr-primary));
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  transition:
    background-color var(--jm-dur-1, 120ms) var(--jm-ease, ease),
    border-color var(--jm-dur-1, 120ms) var(--jm-ease, ease),
    color var(--jm-dur-1, 120ms) var(--jm-ease, ease),
    box-shadow var(--jm-dur-2, 200ms) var(--jm-ease, ease),
    transform var(--jm-dur-2, 200ms) var(--jm-ease-out, ease-out),
    opacity var(--jm-dur-2, 200ms) var(--jm-ease, ease);
}

.jm-recordings-page .meeting-sidebar-handle i {
  font-size: 11px;
  transition: transform var(--jm-dur-2, 200ms) var(--jm-ease-out, ease-out);
}

.jm-recordings-page .meeting-sidebar-handle:hover {
  background: var(--sl-primary, var(--tblr-primary));
  border-color: var(--sl-primary, var(--tblr-primary));
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--sl-primary-rgb, 191, 33, 48), 0.3);
  transform: scale(1.08);
}

.jm-recordings-page .meeting-sidebar-handle:hover i {
  transform: translateX(-1px);
}

.jm-recordings-page .meeting-sidebar-handle:focus-visible {
  outline: 2px solid var(--sl-primary, var(--tblr-primary));
  outline-offset: 2px;
}

[data-bs-theme="dark"] .jm-recordings-page .meeting-sidebar-handle {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

@media (min-width: 992px) {
  .jm-recordings-page .meeting-layout-row.search-box-collapsed .meeting-sidebar-handle {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jm-recordings-page .meeting-sidebar-handle,
  .jm-recordings-page .meeting-sidebar-handle i {
    transition: none;
  }
}

/* Freshly rendered detail content arrives instead of appearing. */
.jm-recordings-page .meeting-video-layout,
.jm-recordings-page #playlistsTabPane:not(.d-none) {
  animation: jm-rise-in var(--jm-dur-3) var(--jm-ease-out) both;
}

/* Recording view chips. */
.jm-recordings-page .recording-page-tab {
  transition:
    background-color var(--jm-dur-1) var(--jm-ease),
    color var(--jm-dur-1) var(--jm-ease),
    box-shadow var(--jm-dur-1) var(--jm-ease);
}

.jm-recordings-page .recording-page-tab:not(.active):hover {
  background: var(--jm-hover-bg);
  color: var(--jm-fg-strong);
}

/* Meeting / recording rows in the list. */
.jm-app-shell .jm-meeting-card {
  transition:
    background-color var(--jm-dur-1) var(--jm-ease),
    border-color var(--jm-dur-1) var(--jm-ease);
}

/* The theme swap's colour transition lives in nova-theme.css with the rest of
   the global motion vocabulary -- a second copy here only shadowed it. */
/*-- motion polish end here --*/



/*-- app shell: keep labelled buttons intrinsic on tablet/mobile -------------
    The `.btn-outline-primary { font-size: 0; width: 44px }` rules further up
    were written for the marketing header's icon-only buttons. Inside the app
    shell `.jm-dashboard .btn` re-asserts a 12px font, so the label survives and
    a fixed 44px box just pushes it off the right edge (4px of horizontal page
    scroll on /conference-mode/docs at 768). Let those buttons size themselves. */
@media screen and (max-width: 959px) {
  .jm-app-shell .btn-outline-primary,
  .jm-app-shell .btn-outline-danger,
  .jm-app-shell .Jm-upgrade-btn {
    width: auto;
    height: auto;
    min-height: 36px;
    font-size: 12px;
  }
}

/*-- reduced motion ---------------------------------------------------------
    Last block in the file on purpose. The repeated [class] selectors raise the
    specificity to (0,4,0) so component rules that set `transition: ... !important`
    (Tabler / nova-theme .btn, .card, .modal-dialog, ...) cannot outrank it.    */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  html,
  body,
  [class][class][class][class],
  [class][class][class][class]::before,
  [class][class][class][class]::after {
    animation-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    transition-duration: .01ms !important;
  }

  html {
    scroll-behavior: auto !important;
  }
}

/*-- custom css end here --*/