/**
 * Admin + Advisor panel responsive polish
 * Layout / CSS only — does not change any logic or functionality.
 */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

img,
video,
canvas {
  max-width: 100%;
  height: auto;
}

/* Admin logo in top / mobile bars — override theme .mainLogo { width: 33% } */
.mobile-menu .mainLogo,
.mobile-menu-bar img.mainLogo,
img.mainLogo {
  width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  padding: 2px !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  display: block !important;
}

.mobile-menu-bar .logo__image,
.logo__image,
.side-nav .logo img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

/* -------------------------------------------------------
   Mobile sidebar / drawer
   Hide ONLY the desktop .side-nav (page layout).
   The mobile drawer also contains .side-nav — that must stay visible.
   ------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Desktop sidebar beside content */
  body > .flex.overflow-hidden > .side-nav,
  .flex.overflow-hidden > nav.side-nav {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Content uses full width when desktop nav is hidden */
  .flex.overflow-hidden {
    display: block !important;
  }

  .content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Mobile drawer’s own .side-nav (menu items live here) */
  .mobile-menu .side-nav,
  .mobile-menu nav.side-nav {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: calc(100vh - 56px) !important;
    padding: 1rem 0.75rem 2rem !important;
    margin: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    z-index: 1 !important;
  }

  .mobile-menu .side-nav .side-menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    width: 100% !important;
    color: #ffffff !important;
  }

  .mobile-menu .side-nav .side-menu__title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 1 1 auto !important;
    white-space: normal !important;
    color: #ffffff !important;
  }

  .mobile-menu .side-nav .side-menu__icon {
    display: flex !important;
    color: #ffffff !important;
  }

  .mobile-menu .side-nav .side-menu svg,
  .mobile-menu .side-nav .side-menu__icon svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* Active / hover: white pill — use dark text so labels stay readable */
  .mobile-menu .side-nav .side-menu.side-menu--active,
  .mobile-menu .side-nav .side-menu:hover,
  .mobile-menu .side-nav a.side-menu.side-menu--active,
  .mobile-menu .side-nav a.side-menu:hover {
    background-color: #ffffff !important;
    color: #0f172a !important;
  }

  .mobile-menu .side-nav .side-menu.side-menu--active .side-menu__title,
  .mobile-menu .side-nav .side-menu:hover .side-menu__title,
  .mobile-menu .side-nav .side-menu.side-menu--active .side-menu__icon,
  .mobile-menu .side-nav .side-menu:hover .side-menu__icon {
    color: #0f172a !important;
  }

  .mobile-menu .side-nav .side-menu.side-menu--active svg,
  .mobile-menu .side-nav .side-menu:hover svg,
  .mobile-menu .side-nav .side-menu.side-menu--active .side-menu__icon svg,
  .mobile-menu .side-nav .side-menu:hover .side-menu__icon svg {
    color: #0f172a !important;
    stroke: #0f172a !important;
  }
}

/* Mobile header bar: logo left, hamburger right, vertically centered */
.mobile-menu {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  left: 0;
  right: 0;
}

/* Drawer panel fills the viewport */
.mobile-menu .scrollable {
  height: 100vh !important;
  max-height: 100vh !important;
  width: min(280px, 85vw) !important;
  background-color: #0fa3c8 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-top: 56px !important;
  padding-bottom: 24px !important;
  box-sizing: border-box !important;
}

.mobile-menu.mobile-menu--active .scrollable {
  margin-left: 0 !important;
}

/* Dim overlay behind open drawer */
.mobile-menu.mobile-menu--active:before {
  visibility: visible !important;
  opacity: 1 !important;
  background: rgba(15, 23, 42, 0.55) !important;
  inset: 0 !important;
  z-index: 10 !important;
}

.mobile-menu .mobile-menu-bar {
  height: 56px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 12px !important;
  box-sizing: border-box;
}

.mobile-menu .mobile-menu-bar > a.flex {
  flex: 0 0 auto;
  margin-right: auto !important;
  display: flex !important;
  align-items: center !important;
}

.mobile-menu .mobile-menu-toggler {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.mobile-menu .mobile-menu-toggler svg,
.mobile-menu .mobile-menu-toggler i,
.mobile-menu .mobile-menu-toggler [data-lucide] {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
  margin: 0 !important;
}

/* Top bar under mobile header: breadcrumb + profile icon aligned */
@media (max-width: 767.98px) {
  .top-bar-boxed {
    margin-top: 56px !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
  }

  .top-bar-boxed > .h-full.flex.items-center {
    width: 100% !important;
    height: auto !important;
    min-height: 44px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .top-bar-boxed nav.breadcrumb,
  .top-bar-boxed nav[aria-label="breadcrumb"],
  .top-bar-boxed .-intro-x.h-\[45px\] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin-right: 8px !important;
    overflow: hidden;
  }

  .top-bar-boxed .breadcrumb {
    flex-wrap: nowrap !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0 !important;
  }

  /* Profile / account icon — keep size stable, no float */
  .top-bar-boxed .intro-x.dropdown,
  .top-bar-boxed .dropdown.w-8.h-8 {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    float: none !important;
    position: relative !important;
  }

  .top-bar-boxed .dropdown-toggle.w-8.h-8,
  .top-bar-boxed .intro-x.dropdown .dropdown-toggle {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: #f1f5f9;
  }

  .top-bar-boxed .dropdown-toggle img,
  .top-bar-boxed .intro-x.dropdown img {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    object-fit: cover !important;
    border-radius: 999px !important;
    display: block !important;
  }

  /* Lucide icons inside top bar stay consistent size */
  .top-bar-boxed svg,
  .top-bar-boxed [data-lucide] {
    max-width: 20px;
    max-height: 20px;
  }
}

/* Tables: allow horizontal scroll without breaking page width */
.intro-y.overflow-auto,
.overflow-auto,
.overflow-x-auto,
.table-responsive,
.box .overflow-x-auto,
.list-table {
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.form-control,
.select2-container,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
  max-width: 100%;
}

.modal-dialog {
  max-width: min(640px, calc(100vw - 24px));
  margin-left: auto;
  margin-right: auto;
}

.modal-body {
  max-height: min(70vh, 640px);
  overflow-y: auto;
}

.videoChatButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

/* Customers / list pages toolbar (desktop keeps right-aligned actions) */
.admin-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 1.5rem;
}

.admin-list-toolbar h2.intro-y {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.admin-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.admin-list-actions .addbtn {
  float: none !important;
  margin: 0 !important;
}

.admin-list-search form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.local-player,
.remote-playerlist,
#remote-playerlist,
#local-player {
  max-width: 100%;
}

/* -------------------------------------------------------
   Tablet + phone — fix float:right .addbtn collisions
   (Customers / Advisors / other list pages)
   ------------------------------------------------------- */
@media (max-width: 991.98px) {
  .content {
    padding-left: 12px !important;
    padding-right: 12px !important;
    min-width: 0;
    max-width: 100%;
  }

  /* Do not restyle desktop .side-nav above the mobile breakpoint —
     Midone already collapses it; phones hide it entirely below. */

  /* Title: full width, not inline next to floated buttons */
  h2.intro-y,
  h2.d-inline.intro-y,
  .intro-y.text-lg.font-medium.d-inline {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin-top: 1rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Action buttons (PDF / CSV / Add …) — stack, no float overlap */
  .addbtn,
  a.addbtn,
  button.addbtn,
  .btn.addbtn,
  a.btn.btn-primary.addbtn,
  a.btn.btn-primary.d-inline.addbtn {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
    clear: both !important;
  }

  .admin-list-toolbar {
    flex-direction: column;
    align-items: stretch;
    margin-top: 1rem;
  }

  .admin-list-actions {
    margin-left: 0;
    flex-direction: column;
    width: 100%;
  }

  .admin-list-actions .addbtn {
    width: 100% !important;
    margin: 0 0 8px 0 !important;
  }

  .admin-list-search,
  .admin-list-search form {
    width: 100% !important;
    display: block !important;
  }

  .admin-search-field {
    width: 100% !important;
    display: block !important;
    margin-bottom: 8px !important;
  }

  .admin-search-field .form-control {
    width: 100% !important;
  }

  /* Search row */
  .grid.grid-cols-12 {
    width: 100%;
    max-width: 100%;
  }

  .intro-y.col-span-12.flex {
    display: block !important;
    width: 100% !important;
  }

  .intro-y.col-span-12.flex > div,
  .w-full.sm\:w-auto {
    width: 100% !important;
    max-width: 100% !important;
  }

  form {
    width: 100%;
  }

  form .w-56,
  form .w-56.relative,
  .w-56.relative.text-slate-500 {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-bottom: 8px !important;
  }

  form .form-control.w-56,
  form input.w-56,
  .form-control.w-56.box {
    width: 100% !important;
    max-width: 100% !important;
  }

  form .btn.btn-primary,
  form button.btn {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    float: none !important;
  }

  /* List tables: one scroll area (avoid nested page + table scrollbars) */
  .list-table,
  .setting-page,
  .grid-table,
  .grid-table-without-search,
  .daily,
  .withoutsearch,
  .intro-y.col-span-12.overflow-auto,
  .intro-y.overflow-auto.lg\:overflow-visible {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    display: block !important;
    clear: both !important;
  }

  body,
  .content {
    overflow-x: hidden !important;
  }

  /* Search field icon stays inside the input */
  .admin-search-field,
  form .w-56.relative {
    position: relative !important;
  }

  .admin-search-field .form-control,
  form .w-56.relative .form-control {
    padding-right: 2.25rem !important;
  }

  .admin-search-field [data-lucide],
  .admin-search-field svg,
  form .w-56.relative [data-lucide],
  form .w-56.relative svg,
  form .w-56.relative i {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    pointer-events: none;
  }

  form .w-56.relative a {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    pointer-events: auto;
  }

  table.table,
  .table,
  .table-report {
    min-width: 720px;
    width: max-content;
    max-width: none;
  }

  .box {
    max-width: 100%;
  }

  .box.p-5 {
    padding: 1rem !important;
  }

  .breadcrumb {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .top-bar,
  .mobile-menu-bar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .pagination {
    flex-wrap: wrap !important;
    justify-content: center;
  }

  .pagecount,
  .d-inline.text-slate-500.pagecount {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 8px 0 !important;
    text-align: center;
  }

  .d-inline.intro-y.col-span-12.addbtn {
    float: none !important;
    display: block !important;
    width: 100% !important;
  }

  .nav-link-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .video-group .col-lg-6 {
    width: 100%;
    max-width: 100%;
  }

  #remote-playerlist {
    height: min(360px, 50vh) !important;
  }

  /* Clear floats after header button groups */
  h2.intro-y + a.addbtn,
  h2.intro-y ~ a.addbtn {
    position: static !important;
  }
}

@media (max-width: 767.98px) {
  body.pt-5 {
    padding-top: 3.5rem !important;
  }

  .content {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 24px !important;
  }

  .mobile-menu-bar img,
  .mobile-menu .mainLogo {
    max-height: 34px;
  }

  .list-table,
  .setting-page,
  .grid-table,
  .withoutsearch,
  .daily {
    max-height: calc(100vh - 180px) !important;
  }

  table.table,
  .table,
  .table-report {
    min-width: 640px;
    font-size: 13px;
  }

  th,
  td {
    white-space: nowrap;
  }

  /* Action links in last column stay readable when scrolled */
  .table-report__action .flex {
    flex-wrap: nowrap;
    gap: 6px;
  }

  #incoming-call-modal > div,
  #advisor-notify-ask-modal > div {
    width: min(92vw, 420px) !important;
    margin: 12px;
  }

  .videoChatButtons .joinBtn,
  .videoChatButtons .videoBtn {
    min-width: 48px;
  }

  #time {
    display: block;
    text-align: center;
  }

  .grid.grid-cols-12 {
    gap: 0.75rem;
  }
}

@media (max-width: 575.98px) {
  .content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .box.p-5,
  .box.p-3 {
    padding: 0.75rem !important;
  }

  .modal-dialog {
    margin: 8px;
    max-width: calc(100vw - 16px);
  }

  .dropdown-menu {
    max-width: calc(100vw - 24px);
  }

  table.table,
  .table,
  .table-report {
    min-width: 580px;
  }

  .advisor-pagination-list .page-link {
    min-width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }
}