/**
 * User-uploaded logos: scale to fit layout slots without overflowing.
 * Loaded after assets/css/style.css
 */

/* —— Header (admin / client / staff) —— */
.header .header-left .logo,
.header .header-left .dark-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  vertical-align: middle;
}

.header .header-left .logo img,
.header .header-left .dark-logo img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-height: 40px !important;
  max-width: min(240px, 100%) !important;
  object-fit: contain !important;
  object-position: left center;
}

@media (max-width: 991.98px) {
  .header .header-left .logo img,
  .header .header-left .dark-logo img {
    max-width: min(200px, 78vw) !important;
    width: auto !important;
    max-height: 40px;
    object-fit: contain;
  }
}

/* Horizontal / alternate headers */
.menu-horizontal .header .header-left .logo img,
.menu-horizontal .header .header-left .dark-logo img {
  max-height: 40px;
  max-width: min(240px, 100%);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* —— Sidebar —— */
/*
 * Do NOT set display on .logo / .logo-small / .dark-logo here — the theme uses
 * display:none/block to show exactly one variant (light/dark/mini). Forcing flex
 * tied on all three caused the same tenant image to appear stacked down the sidebar.
 */
.sidebar .sidebar-logo .logo,
.sidebar .sidebar-logo .logo-small,
.sidebar .sidebar-logo .dark-logo {
  max-width: 100%;
  overflow: hidden;
  line-height: 0 !important;
}

/*
 * style.css sets .dark-logo img { width: 130px } and .logo-small img { width: 30px } without height,
 * which can squash wide tenant uploads in the fixed-height sidebar. Force contain + auto axes.
 */
.sidebar .sidebar-logo a img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-height: 40px !important;
  max-width: min(220px, calc(100% - 2px)) !important;
  object-fit: contain !important;
  object-position: left center;
}

.sidebar .sidebar-logo .logo-small img {
  max-width: 48px !important;
  max-height: 40px !important;
  object-position: center;
}

/* Tenant accounts: single logo in sidebar (no triple stack) */
.sidebar .sidebar-logo a.logo.logo-normal.d-block {
  display: block !important;
}

.sidebar .sidebar-logo a.logo.logo-normal.d-block img {
  max-height: 44px !important;
}

/* Two-column / stacked sidebars */
.sidebar-twocol.sidebar .sidebar-right .sidebar-logo .dark-logo img,
.sidebar-stacked.sidebar .sidebar-right .logo img {
  max-height: 40px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* —— Login (layouts using partials.head) —— */
.brand-logo-slot--login {
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand-logo-slot--login img {
  max-width: min(320px, 90vw);
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* —— Auth password pages —— */
.brand-logo-slot--auth img {
  max-width: min(280px, 85vw);
  max-height: 72px;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* —— Admin / settings previews —— */
img.brand-logo-preview,
.img-thumbnail.brand-logo-preview {
  max-width: 200px;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* —— Marketing / tenant landing navbar —— */
.navbar .navbar-brand .brand-logo-navbar {
  max-height: 40px;
  max-width: min(220px, 50vw);
  width: auto;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
}