/* Global minimum layout width — below this, horizontal scroll rather than broken UI */
html, body { min-width: 350px; }

[data-bs-theme-base="neutral"] {
  --tblr-gray-50: #fafafa;
  --tblr-gray-100: #f5f5f5;
  --tblr-gray-200: #e5e5e5;
  --tblr-gray-300: #d4d4d4;
  --tblr-gray-400: #a3a3a3;
  --tblr-gray-500: #737373;
  --tblr-gray-600: #525252;
  --tblr-gray-700: #404040;
  --tblr-gray-800: #262626;
  --tblr-gray-900: #171717;
  --tblr-gray-950: #0a0a0a;
}

/*-- custom css start here --*/

/* Layout: body fills viewport as flex column */
html, body { height: 100%; }
body {
  min-height: 100vh;
  display: flex !important;
  flex-direction: column !important;
}

/* Meeting room needs .page-body to fill remaining viewport height —
   was collapsing to 0 on <1200 because of some flex:0 override */
.page.jm-meeting {
  flex: 1 1 auto;
  min-height: 0;
}
.jm-meeting .page-wrapper {
  flex: 1 1 auto !important;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.jm-meeting .page-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Dashboard (calendar) page fills viewport, calendar inside scrolls.
   NOTE: skip these rules on .jm-room-page (room detail) — it has tabs
   with long content and needs to scroll naturally. */
.jm-dashboard:not(.jm-room-page) {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
.jm-dashboard:not(.jm-room-page) .page-wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.jm-dashboard:not(.jm-room-page) .page-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.jm-dashboard:not(.jm-room-page) .page-body > .container-fluid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#jmViewCalendar {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#jm-calendar {
  flex: 1 1 auto;
  min-height: 0;
}

/* .page-body margin is already set by Tabler (var(--tblr-page-padding-y)) — no extra top margin */

/*-- header css start here --*/
[data-bs-theme="light"] .navbar {
  background-color: var(--tblr-primary);
}

.jm-join-link {
  color: var(--tblr-primary);
}

.jm-header-profile {
  gap: .5rem;
  margin-left: .5rem;
}

/* Give the profile dropdown-link real padding (Bootstrap + Tabler template
   hardcoded p-0) so avatar+name don't hug the edges; hover state hints it's
   clickable. */
.jm-header-profile .nav-item.dropdown > .nav-link.p-0,
.jm-header-profile .nav-item.dropdown > .nav-link {
  /* .25rem + 2rem avatar + .25rem = 2.5rem — matches other nav-links */
  padding: .25rem 1rem !important;
  border-radius: .5rem;
  transition: background-color .15s ease;
}

/* Side padding on all top-navbar links (Admin, Панель управления, theme toggle) */
.navbar .navbar-nav .nav-item > .nav-link {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Gap between nav-items at the top */
.navbar .navbar-nav {
  gap: .5rem;
}
.jm-header-profile .nav-item.dropdown > .nav-link:hover,
.jm-header-profile .nav-item.dropdown > .nav-link:focus {
  background-color: rgba(0, 0, 0, .06);
}
[data-bs-theme=dark] .jm-header-profile .nav-item.dropdown > .nav-link:hover,
[data-bs-theme=dark] .jm-header-profile .nav-item.dropdown > .nav-link:focus {
  background-color: rgba(255, 255, 255, .08);
}

.jm-header-profile .nav-item.dropdown .avatar {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

/* Keep all top-navbar nav-links on one visual baseline without forcing extra
   vertical height — inline-flex + center aligns icon/text naturally. */
.navbar .navbar-nav .nav-item > .nav-link {
  display: inline-flex;
  align-items: center;
  padding: .25rem 1rem !important;
  border-radius: .5rem;
  transition: background-color .15s ease;
}
.navbar .navbar-nav .nav-item > .nav-link:hover,
.navbar .navbar-nav .nav-item > .nav-link:focus {
  background-color: rgba(0, 0, 0, .06);
}
[data-bs-theme=dark] .navbar .navbar-nav .nav-item > .nav-link:hover,
[data-bs-theme=dark] .navbar .navbar-nav .nav-item > .nav-link:focus {
  background-color: rgba(255, 255, 255, .08);
}
/* Icon-only nav-links (shield, etc) — kill right margin on nav-link-icon
   when there's no nav-link-title sibling OR when the title is hidden via d-md-none ≥768 */
.navbar .navbar-nav .nav-link > .nav-link-icon:only-child,
.navbar .navbar-nav .nav-link > .nav-link-icon:last-child {
  margin-inline-end: 0;
}
@media (min-width: 768px) {
  .navbar .navbar-nav .nav-link:has(> .nav-link-title.d-md-none) .nav-link-icon {
    margin-inline-end: 0 !important;
  }
  /* Shrink horizontal padding on those icon-only nav-links so the hover pill is square, not lopsided */
  .navbar .navbar-nav .nav-link:has(> .nav-link-title.d-md-none) {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
}
/* Theme-toggle button lives outside .navbar-nav, give it equivalent padding
   so it sits on the same rhythm as real nav-links */
.navbar .dark-theme-setting.nav-link {
  padding: .25rem .5rem !important;
  border-radius: .5rem;
  transition: background-color .15s ease;
}
.navbar .dark-theme-setting.nav-link:hover,
.navbar .dark-theme-setting.nav-link:focus {
  background-color: rgba(0, 0, 0, .06);
}
[data-bs-theme=dark] .navbar .dark-theme-setting.nav-link:hover,
[data-bs-theme=dark] .navbar .dark-theme-setting.nav-link:focus {
  background-color: rgba(255, 255, 255, .08);
}
.jm-header-profile .nav-item.dropdown .ps-2 {
  padding-left: 1rem !important;
}
.jm-header-profile .jm-profile-name {
  line-height: 1.2;
  font-weight: 500;
}
.jm-header-profile .jm-designation {
  margin-top: 3px !important;
  opacity: .85;
  line-height: 1.2;
}

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

.nav-link,
.nav-link-icon {
  color: #ffffff;
}

.nav-link:hover {
  color: #ffffff;
}

.jm-profile-name {
  color: #ffffff;
}

.jm-designation {
  color: #ffffff !important;
}

.navbar-expand-md .nav-item.active:after {
  border-color: #ffffff;
}

.navbar-toggler-icon {
  color: #ffffff;
}

/*-- header css end here --*/
/*-- dashboard css start 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-instant-meeting h4 {
  white-space: nowrap;
}

.jm-right {
  gap: 15px;
}

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

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

.jm-addto-btn a {
  gap: 8px;
}

.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;
  transition: background-color .12s ease;
}

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

.jm-card-archived {
  background-color: rgba(var(--tblr-secondary-rgb), .025);
}

.jm-card-materials .badge {
  font-weight: 500;
  font-size: 0.7rem;
  padding: 0.25em 0.5em;
}

.jm-meeting-info dd {
  color: var(--tblr-secondary);
  font-weight: 400;
}

.jm-meeting-info dt {
  font-weight: 500;
  word-break: break-word;
}

.jm-meeting-actions.flex-wrap {
  row-gap: 8px;
}

.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;
}

button.link.jm-join-link {
  position: absolute;
  top: 7px;
  right: 10px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[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: 550px;
}

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

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

[data-bs-theme=dark] .toast-header {
  background: unset;
  color: var(--tblr-white);
}

/* Larger switch for admin tables where toggle is the only control in a cell */
.form-switch-lg .form-check-input {
  width: 2.5rem;
  height: 1.5rem;
  margin-top: 0;
}

/* Autofill in password field (Chrome/Edge turns input blue-ish); the eye addon
   stayed white, making a hard visual seam against the autofilled input.
   Make the addon transparent with its own left padding so the eye sits in a
   neat gutter that flows with the input regardless of autofill color. */
.input-group-flat > .input-group-text {
  background: transparent !important;
  border-left: 0;
  padding-left: .75rem;
  padding-right: .75rem;
}

/* Neutralise Chrome's blue autofill background so input + addon read as one
   continuous control. Works by casting an inset shadow matching the field bg. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--tblr-bg-forms, #fff) inset !important;
  -webkit-text-fill-color: var(--tblr-body-color, #1f2937) !important;
  transition: background-color 9999s ease-in-out 0s;
}
[data-bs-theme=dark] input:-webkit-autofill,
[data-bs-theme=dark] input:-webkit-autofill:hover,
[data-bs-theme=dark] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--tblr-bg-surface, #182230) inset !important;
  -webkit-text-fill-color: var(--tblr-body-color, #e5e7eb) !important;
}

/* ───────────────────── Rooms (Phase 2a.1) ───────────────────── */

/* Command bar on dashboard */
.jm-cmdbar .jm-join-by-id {
  max-width: 220px;
}

@media (max-width: 575.98px) {
  .jm-cmdbar .jm-join-by-id {
    order: 10;
    width: 100%;
    max-width: none;
  }
}

/* ─────────── Modernised Rooms dashboard ─────────── */

/* Page container tweaks for a softer, calmer surface */
.jm-dashboard {
  background: var(--tblr-bg-surface-secondary, #f7f8fa);
}
[data-bs-theme=dark] .jm-dashboard {
  background: var(--tblr-bg-surface-secondary, #0f172a);
}

/* Cmd-bar pill */
.jm-cmdbar h1 {
  letter-spacing: -.01em;
}

/* Group header */
.jm-room-group > h2 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--tblr-body-color);
}
.jm-room-group > h2 .badge {
  font-size: .68rem;
  font-weight: 500;
  padding: .22em .6em;
  border-radius: 999px;
  letter-spacing: .02em;
}

/* Room card */
.jm-room-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--tblr-border-color-rgb, 220,220,230), .6);
  border-radius: 14px !important;
  background: var(--tblr-bg-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.jm-room-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(var(--tblr-body-color-rgb, 31,41,55), .09);
  border-color: rgba(var(--tblr-primary-rgb), .4);
}
.jm-room-card .card-body {
  padding: 1rem 1rem .5rem 1rem;
}
.jm-room-card .card-footer {
  border-top: 1px solid rgba(var(--tblr-border-color-rgb, 220,220,230), .5);
  background: transparent;
}

.jm-room-card__accent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  border-radius: 0;
}

/* Live card gets a soft pulse on the border */
.jm-room-card--live {
  border-color: rgba(var(--tblr-red-rgb), .45) !important;
  box-shadow: 0 0 0 3px rgba(var(--tblr-red-rgb), .10);
}

/* Past cards faded */
.jm-room-card--past_recent,
.jm-room-card--past_older {
  opacity: .82;
}
.jm-room-card--past_recent .jm-room-card__accent,
.jm-room-card--past_older .jm-room-card__accent {
  opacity: .5;
}

.jm-room-card__title {
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -.005em;
}

.jm-room-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* Copy-chip — replaces the inline code block */
.jm-room-card__id-chip {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: .78rem;
  color: var(--tblr-secondary);
  border: 1px dashed rgba(var(--tblr-secondary-rgb), .35);
  background: transparent;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.jm-room-card__id-chip:hover {
  background: rgba(var(--tblr-primary-rgb), .08);
  color: var(--tblr-primary);
  border-color: rgba(var(--tblr-primary-rgb), .4);
  border-style: solid;
}
.jm-room-card__id-chip.jm-copied {
  background: rgba(var(--tblr-success-rgb), .12);
  color: var(--tblr-success);
  border-color: var(--tblr-success);
  border-style: solid;
}

/* ─────────── Cmd-bar & filter modernisation ─────────── */

/* Primary action buttons — softer radius, lift on hover, brand shadow */
.jm-cmdbar .btn {
  padding: .55rem 1.1rem;
  border-radius: 10px;
  font-weight: 500;
  font-size: .92rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  border-width: 1.5px;
}
.jm-cmdbar .btn svg { flex-shrink: 0; }
.jm-cmdbar .btn-primary {
  background: var(--tblr-primary);
  border-color: var(--tblr-primary);
  box-shadow: 0 2px 8px rgba(var(--tblr-primary-rgb), .28);
}
.jm-cmdbar .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--tblr-primary-rgb), .4);
}
.jm-cmdbar .btn-outline-primary {
  background: rgba(var(--tblr-primary-rgb), .06);
  color: var(--tblr-primary);
  border-color: rgba(var(--tblr-primary-rgb), .3);
}
.jm-cmdbar .btn-outline-primary:hover {
  background: rgba(var(--tblr-primary-rgb), .12);
  border-color: var(--tblr-primary);
  color: var(--tblr-primary);
  transform: translateY(-1px);
}
[data-bs-theme=dark] .jm-cmdbar .btn-outline-primary {
  background: rgba(var(--tblr-primary-rgb), .12);
}

/* Create-room button label — progressive shrink: full → short → icon-only */
.jm-create-btn__short { display: none; }
@media (max-width: 569.98px) {
  .jm-create-btn__full { display: none; }
  .jm-create-btn__short { display: inline; }
}
@media (max-width: 399.98px) {
  .jm-create-btn__short { display: none; }
  .jm-create-btn { padding: .55rem .75rem; }  /* keep icon centred */
}

/* Split-button group for Create — primary + tiny dropdown */
.jm-create-group {
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(var(--tblr-primary-rgb), .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.jm-create-group:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--tblr-primary-rgb), .4);
}
.jm-create-group > .btn {
  box-shadow: none !important;
}
.jm-create-group > .btn:hover {
  transform: none;
  box-shadow: none;
}
.jm-create-group > .btn.jm-create-btn {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, .22);
}
.jm-create-group > .btn.jm-create-split {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  padding: .55rem .6rem;
}
.jm-create-menu {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .15), 0 0 0 1px rgba(var(--tblr-border-color-rgb, 220,220,230), .6);
  padding: .35rem;
  min-width: 260px;
  background: var(--tblr-bg-surface);
  z-index: 2000 !important;       /* above FullCalendar's .fc-scroller / sticky rows */
}
/* Ensure the btn-group itself creates a stacking context above the calendar when open */
.jm-create-group {
  position: relative;
  z-index: 3;
}
.jm-create-group.show,
.jm-create-group:has(.dropdown-menu.show) {
  z-index: 2001;
}
.jm-create-menu .dropdown-item {
  border-radius: 8px;
  padding: .6rem .75rem;
  transition: background-color .12s ease;
}
.jm-create-menu .dropdown-item:hover {
  background: rgba(var(--tblr-primary-rgb), .08);
}

/* Self-contained search — icon button that expands into an input on focus */
.jm-search-compact {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.jm-search-compact__toggle {
  width: 40px;
  height: 40px;
  border: 0;
  background: rgba(var(--tblr-secondary-rgb), .10);
  color: var(--tblr-secondary);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.jm-search-compact__toggle:hover {
  background: rgba(var(--tblr-primary-rgb), .12);
  color: var(--tblr-primary);
}
.jm-search-compact.is-open .jm-search-compact__toggle {
  display: none;
}
.jm-search-compact__form {
  position: relative;
  display: none;
  width: 0;
  overflow: hidden;
  transition: width .22s ease;
}
.jm-search-compact.is-open .jm-search-compact__form {
  display: flex;
  width: 260px;
}
.jm-search-compact__form .form-control {
  border-radius: 10px;
  border: 1px solid rgba(var(--tblr-border-color-rgb, 220,220,230), .8);
  padding: .55rem 2.25rem .55rem .95rem !important;
  background: var(--tblr-bg-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  height: 40px;
  outline: 0 !important;
  outline-offset: 0 !important;
  -webkit-appearance: none;
  appearance: none;
}
.jm-search-compact__form input[type="search"]::-webkit-search-cancel-button,
.jm-search-compact__form input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
.jm-search-compact__form .form-control:focus,
.jm-search-compact__form .form-control:focus-visible,
.jm-search-compact__form .form-control:focus-within {
  border-color: var(--tblr-primary) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .15) !important;
  outline: 0 !important;
  outline-width: 0 !important;
  outline-style: none !important;
}
.jm-search-compact__clear {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--tblr-secondary);
  cursor: pointer;
  padding: .25rem;
  border-radius: 50%;
  display: inline-flex;
}
.jm-search-compact__clear:hover {
  background: rgba(var(--tblr-secondary-rgb), .12);
  color: var(--tblr-body-color);
}
@media (max-width: 767.98px) {
  .jm-search-compact.is-open .jm-search-compact__form {
    width: 100%;
  }
  .jm-search-compact.is-open {
    flex: 1 1 100%;
  }
}

/* Search — pill input with soft focus ring */
.jm-rooms-filter {
  position: relative;
}
.jm-search-box {
  width: 260px;
  max-width: 100%;
  position: relative;
}
.jm-search-box .input-icon-addon {
  left: .75rem;
  color: var(--tblr-secondary);
  opacity: .6;
}
.jm-search-box .form-control {
  border-radius: 10px;
  border: 1px solid rgba(var(--tblr-border-color-rgb, 220,220,230), .8);
  padding: .55rem .95rem .55rem 2.5rem !important;
  background: var(--tblr-bg-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  height: auto;
}
.jm-search-box .form-control:focus {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .15);
  background: var(--tblr-bg-surface);
}
[data-bs-theme=dark] .jm-search-box .form-control {
  background: rgba(255, 255, 255, .03);
}
@media (max-width: 767.98px) {
  .jm-search-box { width: 100%; }
  .jm-rooms-filter { flex: 1 1 100%; order: 99; }
}

/* True sliding switch (List ⟷ Calendar) — like an iOS / Linear segmented control */
.jm-view-switch {
  position: relative;
  display: inline-flex;
  background: rgba(var(--tblr-secondary-rgb), .10);
  padding: 3px;
  border-radius: 999px;
  font-size: .86rem;
  user-select: none;
}
.jm-view-switch__opt {
  position: relative;
  z-index: 2;
  border: 0;
  background: transparent;
  color: var(--tblr-secondary);
  padding: .45rem 1.4rem;       /* extra horizontal breathing room inside the active thumb */
  border-radius: 999px;
  font-weight: 500;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
  transition: color .2s ease;
  white-space: nowrap;
}
.jm-view-switch__opt:hover:not(.active) {
  color: var(--tblr-body-color);
}
.jm-view-switch__opt.active {
  color: var(--tblr-primary);
}
.jm-view-switch__opt svg { flex-shrink: 0; }
.jm-view-switch__thumb {
  position: absolute;
  z-index: 1;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: var(--tblr-bg-surface);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 1px rgba(var(--tblr-border-color-rgb, 220,220,230), .5);
  transition: transform .25s cubic-bezier(.4,.0,.2,1);
  pointer-events: none;
}
.jm-view-switch[data-view="calendar"] .jm-view-switch__thumb {
  transform: translateX(100%);
}
[data-bs-theme=dark] .jm-view-switch {
  background: rgba(255, 255, 255, .06);
}
[data-bs-theme=dark] .jm-view-switch__thumb {
  background: rgba(255, 255, 255, .15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
/* Hide text labels on <992 — only icons */
@media (max-width: 991.98px) {
  .jm-view-switch__opt { padding: .4rem .75rem; }
  .jm-view-switch__opt > span { display: none; }
}

/* FullCalendar theme tweaks — segmented pill button groups + readable events */
#jm-calendar {
  --fc-border-color: rgba(var(--tblr-border-color-rgb, 220,220,230), .6);
  --fc-today-bg-color: rgba(var(--tblr-primary-rgb), .06);
  --fc-event-bg-color: var(--tblr-primary);
  --fc-event-border-color: var(--tblr-primary);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: rgba(var(--tblr-secondary-rgb), .05);
  --fc-list-event-hover-bg-color: rgba(var(--tblr-primary-rgb), .08);
}
#jm-calendar .fc-toolbar-title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Both button groups styled as segmented pill — same look as .jm-view-switch */
#jm-calendar .fc-button-group {
  background: rgba(var(--tblr-secondary-rgb), .14) !important;
  padding: 3px !important;
  border-radius: 999px !important;
  gap: 4px;
  border: 0 !important;
  display: inline-flex;
  box-shadow: none !important;
  position: relative;
  overflow: visible;
}
/* 3-state sliding thumb for the views group (Month/Week/List) */
#jm-calendar .fc-button-group.jm-fc-stateful {
  --thumb-count: 1;
  --thumb-pos: 0;
  gap: 0;
}
#jm-calendar .fc-button-group.jm-fc-stateful::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--thumb-count));
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .05);
  transform: translateX(calc(var(--thumb-pos) * 100%));
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
#jm-calendar .fc-button-group.jm-fc-stateful .fc-button {
  position: relative;
  z-index: 1;
}
/* Active in stateful group: text colour only — thumb provides bg */
#jm-calendar .fc-button-group.jm-fc-stateful .fc-button.fc-button-active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--tblr-primary) !important;
}
[data-bs-theme=dark] #jm-calendar .fc-button-group.jm-fc-stateful::before {
  background: rgba(255, 255, 255, .15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
/* On phone: hide the right-side view-switcher (Month/Week/List) — we force listWeek
   and keep prev/next + Today + title on ONE row */
@media (max-width: 569.98px) {
  #jm-calendar .fc-toolbar-chunk:last-child { display: none !important; }
  #jm-calendar .fc-toolbar {
    flex-wrap: nowrap !important;
    gap: .35rem !important;
  }
  #jm-calendar .fc-toolbar-chunk {
    display: inline-flex !important;
    align-items: center;
  }
  /* Title takes remaining space and truncates if needed */
  #jm-calendar .fc-toolbar-chunk:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
  #jm-calendar .fc-toolbar-title {
    font-size: .95rem !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 !important;
  }
  /* Compact buttons — smaller padding, keep pill shape */
  #jm-calendar .fc-button-group,
  #jm-calendar .fc-today-button {
    padding: 2px !important;
  }
  #jm-calendar .fc-button,
  #jm-calendar .fc-today-button {
    padding: .3rem .65rem !important;
    font-size: .78rem !important;
  }
  #jm-calendar .fc-toolbar-chunk > .fc-today-button {
    margin-left: 4px;
  }
}
#jm-calendar .fc-button,
#jm-calendar .fc-button-primary,
#jm-calendar .fc-button-primary:not(:disabled):not(.fc-button-active):focus {
  font-size: .85rem !important;
  font-weight: 500 !important;
  padding: .4rem .9rem !important;
  border-radius: 999px !important;
  border: 0 !important;
  text-transform: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--tblr-secondary) !important;
  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease;
}
#jm-calendar .fc-button:hover:not(.fc-button-active):not(:disabled),
#jm-calendar .fc-button-primary:hover:not(.fc-button-active):not(:disabled) {
  color: var(--tblr-body-color) !important;
  background-color: transparent !important;
}
#jm-calendar .fc-button.fc-button-active,
#jm-calendar .fc-button-primary.fc-button-active,
#jm-calendar .fc-button-primary:not(:disabled).fc-button-active,
#jm-calendar .fc-button-primary:not(:disabled):active {
  background: var(--tblr-bg-surface) !important;
  background-color: var(--tblr-bg-surface) !important;
  color: var(--tblr-primary) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 1px rgba(var(--tblr-border-color-rgb, 220,220,230), .6) !important;
}

/* Standalone Today button — same pill look, its own container */
#jm-calendar .fc-today-button,
#jm-calendar .fc-today-button.fc-button-primary {
  background: rgba(var(--tblr-secondary-rgb), .08) !important;
  background-color: rgba(var(--tblr-secondary-rgb), .08) !important;
  padding: .4rem 1rem !important;
  border-radius: 999px !important;
  color: var(--tblr-secondary) !important;
}
#jm-calendar .fc-today-button:hover:not(:disabled) {
  background: rgba(var(--tblr-primary-rgb), .10) !important;
  background-color: rgba(var(--tblr-primary-rgb), .10) !important;
  color: var(--tblr-primary) !important;
}
#jm-calendar .fc-today-button:disabled {
  opacity: .55;
}

/* FC toolbar chunks — add gap between chunks (prev/next/today) via margin */
#jm-calendar .fc-toolbar-chunk > .fc-today-button {
  margin-left: 6px;
}

/* Prev/Next icon colour — FC native icon font */
#jm-calendar .fc-icon,
#jm-calendar .fc-icon {
  color: var(--tblr-body-color) !important;
  font-size: 1.05rem;
}
#jm-calendar .fc-button:hover .fc-icon {
  color: var(--tblr-primary) !important;
}

[data-bs-theme=dark] #jm-calendar .fc-button-group,
[data-bs-theme=dark] #jm-calendar .fc-today-button {
  background: rgba(255, 255, 255, .08) !important;
  background-color: rgba(255, 255, 255, .08) !important;
}
[data-bs-theme=dark] #jm-calendar .fc-button.fc-button-active,
[data-bs-theme=dark] #jm-calendar .fc-button-primary.fc-button-active {
  background: rgba(255, 255, 255, .15) !important;
  background-color: rgba(255, 255, 255, .15) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4) !important;
}
#jm-calendar .fc-event {
  border-radius: 6px;
  padding: 2px 6px;
  font-size: .8rem;
  font-weight: 500;
  border: 0 !important;
  cursor: pointer;
  color: #fff !important;          /* default on saturated hues */
}
#jm-calendar .fc-event:hover {
  filter: brightness(1.08);
}
#jm-calendar .fc-event-title,
#jm-calendar .fc-event-time {
  color: inherit !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .15);  /* keep text legible on busy backdrops */
}

/* Accent per-hue — chosen for ≥4.5:1 contrast on white text */
#jm-calendar .jm-cal-evt--blue    { background: #1e6cd6; }
#jm-calendar .jm-cal-evt--indigo  { background: #4263eb; }
#jm-calendar .jm-cal-evt--purple  { background: #8b5cf6; }
#jm-calendar .jm-cal-evt--pink    { background: #d6336c; }
#jm-calendar .jm-cal-evt--red     { background: #d63939; }
#jm-calendar .jm-cal-evt--orange  { background: #e06a18; }
#jm-calendar .jm-cal-evt--yellow  { background: #b58000; }  /* dark amber for white text */
#jm-calendar .jm-cal-evt--green   { background: #2fb344; }
#jm-calendar .jm-cal-evt--teal    { background: #0ca678; }
#jm-calendar .jm-cal-evt--cyan    { background: #0b8daa; }

/* Invited events — inset outline + slight transparency */
#jm-calendar .jm-cal-evt--invited { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }

/* Dark theme — lighten backgrounds so event bars aren't black-on-dark */
[data-bs-theme=dark] #jm-calendar .jm-cal-evt--blue    { background: #3b8ae6; }
[data-bs-theme=dark] #jm-calendar .jm-cal-evt--indigo  { background: #6b84ef; }
[data-bs-theme=dark] #jm-calendar .jm-cal-evt--purple  { background: #a47df7; }
[data-bs-theme=dark] #jm-calendar .jm-cal-evt--pink    { background: #e25b86; }
[data-bs-theme=dark] #jm-calendar .jm-cal-evt--red     { background: #e55858; }
[data-bs-theme=dark] #jm-calendar .jm-cal-evt--orange  { background: #f08547; }
[data-bs-theme=dark] #jm-calendar .jm-cal-evt--yellow  { background: #d4a017; color: #1a1a1a !important; }
[data-bs-theme=dark] #jm-calendar .jm-cal-evt--yellow .fc-event-title,
[data-bs-theme=dark] #jm-calendar .jm-cal-evt--yellow .fc-event-time { text-shadow: none; }
[data-bs-theme=dark] #jm-calendar .jm-cal-evt--green   { background: #48c05a; }
[data-bs-theme=dark] #jm-calendar .jm-cal-evt--teal    { background: #2ebc92; }
[data-bs-theme=dark] #jm-calendar .jm-cal-evt--cyan    { background: #2ea3bf; }

/* List-view rows — solid surface bg so nothing bleeds through */
#jm-calendar .fc-list,
#jm-calendar .fc-list-table {
  background: var(--tblr-bg-surface);
}
#jm-calendar .fc-list-event {
  background: var(--tblr-bg-surface) !important;
}
#jm-calendar .fc-list-event td {
  color: var(--tblr-body-color) !important;
}
/* Sticky day header in list view — OPAQUE bg so stacked headers don't bleed through */
#jm-calendar .fc-list-day,
#jm-calendar .fc-list-day > * {
  background: var(--tblr-bg-surface) !important;
  background-color: var(--tblr-bg-surface) !important;
}
#jm-calendar .fc-list-day-cushion {
  background: rgba(var(--tblr-primary-rgb), .06) !important;
  color: var(--tblr-body-color) !important;
  font-weight: 600;
  border-top: 1px solid var(--fc-border-color);
  border-bottom: 1px solid var(--fc-border-color);
}
[data-bs-theme=dark] #jm-calendar .fc-list,
[data-bs-theme=dark] #jm-calendar .fc-list-table,
[data-bs-theme=dark] #jm-calendar .fc-list-event,
[data-bs-theme=dark] #jm-calendar .fc-list-day,
[data-bs-theme=dark] #jm-calendar .fc-list-day > * {
  background: var(--tblr-bg-surface-dark, #1a2230) !important;
}
[data-bs-theme=dark] #jm-calendar .fc-list-day-cushion {
  background: rgba(var(--tblr-primary-rgb), .12) !important;
}

/* "+N more" popover: give it an opaque surface so events beneath don't show through */
#jm-calendar .fc-popover {
  background: var(--tblr-bg-surface) !important;
  border: 1px solid rgba(var(--tblr-border-color-rgb, 220,220,230), .8) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 0 0 1px rgba(var(--tblr-border-color-rgb, 220,220,230), .4);
  border-radius: 10px;
  z-index: 1500;
}
#jm-calendar .fc-popover-header {
  background: rgba(var(--tblr-primary-rgb), .08) !important;
  color: var(--tblr-body-color) !important;
  font-weight: 600;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: .5rem .75rem;
}
#jm-calendar .fc-popover-body {
  background: var(--tblr-bg-surface) !important;
  padding: .5rem;
}
#jm-calendar .fc-list-event .fc-list-event-dot {
  display: inline-block;
  border-width: 5px !important;
}
/* Dot border colour mirrors event accent so list view still reads colour */
#jm-calendar .jm-cal-evt--blue   .fc-list-event-dot { border-color: #1e6cd6 !important; }
#jm-calendar .jm-cal-evt--indigo .fc-list-event-dot { border-color: #4263eb !important; }
#jm-calendar .jm-cal-evt--purple .fc-list-event-dot { border-color: #8b5cf6 !important; }
#jm-calendar .jm-cal-evt--pink   .fc-list-event-dot { border-color: #d6336c !important; }
#jm-calendar .jm-cal-evt--red    .fc-list-event-dot { border-color: #d63939 !important; }
#jm-calendar .jm-cal-evt--orange .fc-list-event-dot { border-color: #e06a18 !important; }
#jm-calendar .jm-cal-evt--yellow .fc-list-event-dot { border-color: #b58000 !important; }
#jm-calendar .jm-cal-evt--green  .fc-list-event-dot { border-color: #2fb344 !important; }
#jm-calendar .jm-cal-evt--teal   .fc-list-event-dot { border-color: #0ca678 !important; }
#jm-calendar .jm-cal-evt--cyan   .fc-list-event-dot { border-color: #0b8daa !important; }
[data-bs-theme=dark] #jm-calendar .fc-list-event:hover td { background: rgba(var(--tblr-primary-rgb), .12) !important; }

/* Date cell numbers — respect theme color */
#jm-calendar .fc .fc-daygrid-day-number,
#jm-calendar .fc .fc-col-header-cell-cushion {
  color: var(--tblr-body-color);
  text-decoration: none;
}
#jm-calendar .fc .fc-day-other .fc-daygrid-day-number {
  opacity: .4;
}
#jm-calendar .fc .fc-day-today .fc-daygrid-day-number {
  color: var(--tblr-primary);
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .jm-cmdbar h1 { font-size: 1.25rem; }
  .jm-room-group > h2 { font-size: .95rem; }
  .jm-room-card__title { font-size: .95rem; }
  /* Denser 1-column cards on phone so 10 rooms don't require 2000px scroll */
  .jm-room-card .card-body { padding: .75rem .875rem .375rem; }
  .jm-room-card .card-footer { padding: .5rem .875rem; }
}

/* Room page hero */
.jm-room-hero__title {
  line-height: 1.2;
  word-break: break-word;
}

.jm-room-hero__desc {
  max-width: 64ch;
}

.jm-room-page .nav-tabs .nav-link {
  font-weight: 500;
}

.jm-room-page .nav-tabs .nav-link.active {
  font-weight: 600;
}

/* AI stub (per-room placeholder) */
.jm-ai-stub__icon {
  display: inline-flex;
  width: 88px;
  height: 88px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--tblr-primary-rgb), .12), rgba(var(--tblr-purple-rgb, 168,85,247), .12));
}

/* AI concierge bubble (floating) */
.jm-ai-bubble {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
}

.jm-ai-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(var(--tblr-primary-rgb), .35);
}

.jm-ai-panel {
  width: min(380px, calc(100vw - 2.5rem));
  max-height: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.jm-ai-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 160px;
}

@media (max-width: 575.98px) {
  .jm-ai-bubble {
    right: .75rem;
    bottom: .75rem;
  }
  .jm-ai-toggle {
    width: 48px;
    height: 48px;
  }
}


/*-- cookie consent banner — contrasting neutral, doesn't blend with blue hero / light-gray form / dark theme --*/
.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1045;
  background-color: #1f2937;          /* slate-800 */
  color: rgba(255, 255, 255, .92);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, .08);
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
  visibility: hidden;
}

.cookie.show {
  transform: none;
  visibility: visible;
}

.cookie a {
  color: #7cc4ff;                      /* readable light-blue on slate */
  text-decoration: underline;
}

.cookie .btn {
  background-color: #fff;
  color: #1f2937;
  border: none;
}
.cookie .btn:hover {
  background-color: #f3f4f6;
  color: #1f2937;
}

/* Dark theme: invert cookie — light panel on dark page */
[data-bs-theme=dark] .cookie {
  background-color: #f3f4f6;
  color: #1f2937;
  border-top-color: rgba(0, 0, 0, .08);
}
[data-bs-theme=dark] .cookie a {
  color: #0660b9;
}
[data-bs-theme=dark] .cookie .btn {
  background-color: #1f2937;
  color: #fff;
}
[data-bs-theme=dark] .cookie .btn:hover {
  background-color: #111827;
  color: #fff;
}

/*-- dashboard css end here --*/
/* fluid layout — use full screen width on wide monitors; keep gutters via Bootstrap padding */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  max-width: 100%;
}

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

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

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

/*-- Loader css starts here --*/
#cover-spin {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 9999;
  display: block;
}

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

  to {
    transform: rotate(360deg);
  }
}

.spinner-anim {
  display: inline-block;
  animation: spin 1.2s linear infinite;
}

#cover-spin::after {
  content: "";
  display: block;
  position: absolute;
  left: 48%;
  top: 40%;
  width: 40px;
  height: 40px;
  border-style: solid;
  border-color: var(--bs-primary);
  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:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:disabled,
.btn-primary:not(:disabled):not(.disabled):active {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1)) !important;
  border: 1px solid linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)) !important;
  background-color: var(--tblr-primary);
  border-color: var(--tblr-primary);
}

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

.navbar-expand-md .nav-item.active .nav-link,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: #fff;
}

.g-recaptcha {
  overflow: hidden;
  width: 298px;
  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 !important;
  height: 2.75rem !important;
}

.navbar-brand .logo-image,
.logo-image {
  max-height: 72px;           /* same ceiling as home.css */
  max-width: 230px;
  height: auto;
  width: auto;
  object-fit: contain;
  margin: -30px 0;
}

/* Home/landing page — make the brand a real presence */
.jm-homepage .navbar-brand .logo-image,
.jm-homepage .logo-image {
  height: 6rem !important;      /* 96px */
  max-width: 360px;
}

/* Make navbar itself tall enough to accommodate the logo without clipping */
.navbar.navbar-expand-md {
  min-height: 4rem;
}

.jm-homepage .navbar.navbar-expand-md {
  min-height: 7rem;
  padding-block: .25rem;
}

.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) {
  .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%;
  }

  .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: 13px;
  }

  .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: 110px;
  }

  .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%;
  }

  .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: 13px;
  }

  .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%;
  }

  /* .jm-join-meeting {
      width: 41%;
   } */

  .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;
  }
}

/* Items that appear ONLY inside the mobile drawer (Profile/Logout dupes).
   Hide whenever navbar is inline (≥768). */
@media (min-width: 768px) {
  .jm-drawer-only { display: none !important; }
}

/* ─────────── Mobile drawer menu for user pages (<768 = burger visible) ─────────── */
@media (max-width: 767.98px) {
  /* Transform Bootstrap navbar-collapse into a slide-in drawer from left */
  .navbar-collapse#navbar-menu {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: #fff;
    box-shadow: 2px 0 24px rgba(0, 0, 0, .25);
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1070;
    padding: 3.5rem 1rem 1rem;
    overflow-y: auto;
    display: block !important;
    visibility: visible;
    height: auto !important;
  }
  [data-bs-theme=dark] .navbar-collapse#navbar-menu {
    background: var(--tblr-bg-surface);
  }
  .navbar-collapse#navbar-menu.show,
  .navbar-collapse#navbar-menu.collapsing {
    transform: translateX(0);
  }
  .navbar-collapse#navbar-menu .navbar-nav,
  .navbar-collapse#navbar-menu .navbar-nav > .nav-item {
    list-style: none !important;
    padding-left: 0;
  }
  .navbar-collapse#navbar-menu .navbar-nav {
    gap: .125rem;
    display: flex;
    flex-direction: column;
  }
  .navbar-collapse#navbar-menu .navbar-nav > .nav-item {
    display: block;
  }
  .navbar-collapse#navbar-menu .nav-link,
  .navbar-collapse#navbar-menu .nav-link .nav-link-icon,
  .navbar-collapse#navbar-menu .nav-link .nav-link-icon svg,
  .navbar-collapse#navbar-menu .nav-link svg {
    color: var(--tblr-body-color) !important;
    stroke: currentColor;
  }
  .navbar-collapse#navbar-menu .nav-link {
    display: flex !important;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem !important;
    border-radius: .5rem;
    font-weight: 500;
    width: 100%;
    min-height: 2.5rem;
    background-color: transparent !important;
  }
  .navbar-collapse#navbar-menu .nav-link:hover,
  .navbar-collapse#navbar-menu .nav-link:focus {
    background: rgba(var(--tblr-primary-rgb), .1) !important;
    color: var(--tblr-primary) !important;
  }
  .navbar-collapse#navbar-menu .nav-link-icon {
    margin: 0 !important;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .navbar-collapse#navbar-menu .nav-link-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .navbar-collapse#navbar-menu .nav-link-title {
    color: inherit;
    line-height: 1.25;
  }
  /* Drawer header row: theme-toggle (left) + × close (right) */
  .jm-drawer-header {
    position: absolute;
    top: .5rem;
    left: .5rem;
    right: .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .jm-drawer-header > * {
    margin: 0;
  }
  .jm-drawer-header form {
    margin: 0;
  }
  .jm-drawer-close {
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    background: transparent;
    color: var(--tblr-body-color);
    font-size: 1.6rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .jm-drawer-close:hover {
    background: rgba(0, 0, 0, .06);
  }
  .jm-drawer-header .dark-theme-setting {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0 !important;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--tblr-body-color) !important;
  }
  .jm-drawer-header .dark-theme-setting:hover {
    background: rgba(0, 0, 0, .06) !important;
  }
  /* Backdrop (created by JS) */
  .jm-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1060;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .jm-drawer-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ─────────── Create-meeting modal polish ─────────── */
.jm-create-modal {
  border-radius: 16px;
  border: 0;
  background: var(--tblr-bg-surface) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .25);
}
.jm-create-modal .modal-body,
.jm-create-modal .modal-header,
.jm-create-modal .modal-footer {
  background: var(--tblr-bg-surface);
}
/* Fullscreen on phone — kill rounded corners + drop shadow so edges are clean */
@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down .jm-create-modal {
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 100vh;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
  }
}
.jm-create-modal .modal-header {
  border-bottom: 1px solid rgba(var(--tblr-border-color-rgb, 220,220,230), .5);
  padding: 1rem 1.25rem;
}
.jm-create-modal .modal-body {
  padding: 1.25rem;
}
.jm-create-modal .modal-footer {
  border-top: 1px solid rgba(var(--tblr-border-color-rgb, 220,220,230), .5);
}
.jm-create-modal code {
  background: rgba(var(--tblr-secondary-rgb), .1);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .78rem;
  color: var(--tblr-body-color);
}

/* Quick-time chips */
.jm-time-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.jm-time-chips .btn {
  border-radius: 999px;
  font-size: .82rem;
  padding: .3rem .8rem;
  font-weight: 500;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.jm-time-chips .btn.active {
  background: var(--tblr-primary) !important;
  color: #fff !important;
  border-color: var(--tblr-primary) !important;
}

/* Email-chip invites input */
.jm-invites-box {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  min-height: 2.75rem;
  padding: .4rem .55rem;
  cursor: text;
}
.jm-invites-box.is-invalid {
  animation: jmShake .4s ease;
  border-color: var(--tblr-danger) !important;
}
.jm-invites-box--pulse {
  animation: jmPulse .5s ease;
}
@keyframes jmPulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--tblr-primary-rgb), .3); }
  100% { box-shadow: 0 0 0 8px rgba(var(--tblr-primary-rgb), 0); }
}
@keyframes jmShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.jm-invites-chips {
  display: contents;
}
.jm-invite-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: rgba(var(--tblr-primary-rgb), .1);
  color: var(--tblr-primary);
  padding: .15rem .35rem .15rem .6rem;
  border-radius: 999px;
  font-size: .82rem;
  line-height: 1.2;
  max-width: 100%;
}
.jm-invite-chip > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.jm-invite-chip__x {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  opacity: .65;
}
.jm-invite-chip__x:hover {
  background: rgba(var(--tblr-primary-rgb), .2);
  opacity: 1;
}
.jm-invites-input {
  flex: 1 1 160px;
  min-width: 120px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: .92rem;
  padding: .15rem;
  color: var(--tblr-body-color);
}
.jm-invites-input:focus {
  outline: 0;
  box-shadow: none;
}

/* Drop-zone inside Create-meeting modal */
.jm-dropzone {
  position: relative;
  border: 2px dashed rgba(var(--tblr-border-color-rgb, 220,220,230), .9);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  background: rgba(var(--tblr-secondary-rgb), .04);
  transition: border-color .15s ease, background-color .15s ease;
  cursor: pointer;
}
.jm-dropzone:hover,
.jm-dropzone.is-dragging {
  border-color: var(--tblr-primary);
  background: rgba(var(--tblr-primary-rgb), .08);
}
.jm-dropzone__hint {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--tblr-secondary);
  flex-wrap: wrap;
}
.jm-dropzone__hint svg { color: var(--tblr-primary); flex-shrink: 0; }
.jm-dropzone__hint > span { flex: 1 1 auto; line-height: 1.3; }
.jm-dropzone__hint small { display: block; margin-top: .15rem; font-size: .75rem; }
.jm-dropzone__hint strong { color: var(--tblr-body-color); }

/* Upload-in-progress chip: spinner + faded state */
.jm-material-chip--uploading {
  opacity: .75;
}
.jm-material-chip--error {
  background: rgba(var(--tblr-danger-rgb), .12);
  border-color: rgba(var(--tblr-danger-rgb), .4);
  color: var(--tblr-danger);
}
.jm-material-chip__spin {
  width: .9rem;
  height: .9rem;
  border: 2px solid rgba(var(--tblr-primary-rgb), .25);
  border-top-color: var(--tblr-primary);
  border-radius: 50%;
  animation: jm-spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes jm-spin { to { transform: rotate(360deg); } }

/* Materials picker — selected chips + picker list + icons */
.jm-materials-pick .btn { font-weight: 500; }
.jm-materials-selected {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.jm-material-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(var(--tblr-secondary-rgb), .1);
  border: 1px solid rgba(var(--tblr-border-color-rgb, 220,220,230), .6);
  border-radius: 8px;
  padding: .25rem .55rem;
  font-size: .85rem;
  max-width: 100%;
}
.jm-material-chip > span:nth-of-type(2) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.jm-material-chip__x {
  border: 0; background: transparent; cursor: pointer;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1; opacity: .6; padding: 0;
}
.jm-material-chip__x:hover { background: rgba(var(--tblr-secondary-rgb), .2); opacity: 1; }

/* Picker list rows */
.jm-materials-list {
  max-height: 55vh;
  overflow-y: auto;
  border: 1px solid rgba(var(--tblr-border-color-rgb, 220,220,230), .5);
  border-radius: 10px;
}
.jm-material-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .85rem;
  border-bottom: 1px solid rgba(var(--tblr-border-color-rgb, 220,220,230), .3);
  cursor: pointer;
  transition: background-color .12s ease;
}
.jm-material-row:last-child { border-bottom: 0; }
.jm-material-row:hover { background: rgba(var(--tblr-primary-rgb), .06); }
.jm-material-row input[type="checkbox"] { margin: 0; flex-shrink: 0; }

/* File-type icon — simple square badge with letter */
.jm-material-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: .7rem;
  text-transform: uppercase;
  background: var(--tblr-secondary);
}
/* Image thumbnail — same footprint as the icon badge */
.jm-material-thumb {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(var(--tblr-secondary-rgb), .1);
}
.jm-material-thumb--sm { width: 2.25rem; height: 2.25rem; }
.jm-material-thumb--xs {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 4px;
}
.jm-material-icon--pdf    { background: #d63939; }
.jm-material-icon--doc    { background: #1e6cd6; }
.jm-material-icon--sheet  { background: #2fb344; }
.jm-material-icon--slides { background: #e06a18; }
.jm-material-icon--image  { background: #8b5cf6; }
.jm-material-icon--video  { background: #d6336c; }
.jm-material-icon--audio  { background: #0ca678; }
.jm-material-icon--zip    { background: #b58000; }
.jm-material-icon--file   { background: #6b7280; }
.jm-material-icon--pdf::after    { content: 'PDF'; }
.jm-material-icon--doc::after    { content: 'DOC'; }
.jm-material-icon--sheet::after  { content: 'XLS'; }
.jm-material-icon--slides::after { content: 'PPT'; }
.jm-material-icon--image::after  { content: 'IMG'; }
.jm-material-icon--video::after  { content: 'MP4'; }
.jm-material-icon--audio::after  { content: 'MP3'; }
.jm-material-icon--zip::after    { content: 'ZIP'; }
.jm-material-icon--file::after   { content: 'FILE'; font-size: .62rem; }

/* Material card on library page */
.jm-material-card {
  border-radius: 12px;
  border: 1px solid rgba(var(--tblr-border-color-rgb, 220,220,230), .6);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.jm-material-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--tblr-primary-rgb), .4);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}
.jm-material-card .card-body { padding: 1rem; }

/* Advanced toggle */
.jm-advanced-wrap {
  border-top: 1px dashed rgba(var(--tblr-border-color-rgb, 220,220,230), .8);
  padding-top: 1rem;
  margin-top: .5rem;
}
.jm-advanced-toggle {
  color: var(--tblr-secondary);
  font-size: .88rem;
}
.jm-advanced-toggle:hover {
  color: var(--tblr-primary);
}
.jm-advanced-toggle small {
  font-size: .78rem;
  margin-left: .35rem;
}
.jm-advanced-chevron {
  transition: transform .2s ease;
}
.jm-advanced-toggle[aria-expanded="true"] .jm-advanced-chevron {
  transform: rotate(180deg);
}

/* ─────────── Room page (/meetings/{id}/materials) polish ─────────── */
.jm-room-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid rgba(var(--tblr-border-color-rgb, 220,220,230), .8);
  scrollbar-width: thin;
}
.jm-room-tabs .nav-item { flex-shrink: 0; }
.jm-room-tabs .nav-link {
  color: var(--tblr-body-color) !important;   /* was invisibly light */
  font-weight: 500;
  white-space: nowrap;
  padding: .6rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent !important;
  opacity: .75;
  transition: color .15s ease, border-color .15s ease, opacity .15s ease;
}
.jm-room-tabs .nav-link:hover:not(.active) {
  color: var(--tblr-primary) !important;
  opacity: 1;
  border-bottom-color: rgba(var(--tblr-primary-rgb), .4);
}
.jm-room-tabs .nav-link.active {
  color: var(--tblr-primary) !important;
  opacity: 1;
  border-bottom-color: var(--tblr-primary);
  background: transparent !important;
}
.jm-room-tabs .nav-link .badge {
  font-size: .68rem;
  font-weight: 600;
  padding: .15em .5em;
  border-radius: 999px;
  background: rgba(var(--tblr-secondary-rgb), .18) !important;
  color: var(--tblr-body-color) !important;
  line-height: 1;
}
.jm-room-tabs .nav-link.active .badge {
  background: rgba(var(--tblr-primary-rgb), .15) !important;
  color: var(--tblr-primary) !important;
}
[data-bs-theme=dark] .jm-room-tabs .nav-link {
  color: var(--tblr-body-color) !important;
}
.jm-room-tabs::-webkit-scrollbar { height: 3px; }
.jm-room-tabs::-webkit-scrollbar-thumb { background: rgba(var(--tblr-secondary-rgb), .3); border-radius: 3px; }

/* Copied state for the meeting-ID chip in breadcrumb */
.jm-room-card__id-chip.jm-copied {
  background: rgba(var(--tblr-success-rgb), .12);
  color: var(--tblr-success);
  border-color: var(--tblr-success);
}

/* Room page — stable tabs layout: hero row wraps cleanly; non-active tab
   panes don't take layout space; overflow from long forms scrolls with
   the page, not the tab container. */
.jm-room-page .tab-content {
  position: relative;
  min-height: 0;
}
.jm-room-page .tab-pane:not(.active) { display: none; }
.jm-room-page .jm-room-hero { position: relative; z-index: 1; }
.jm-room-page .jm-room-tabs { position: relative; z-index: 2; }

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