/* HMZ Collection Boy App Shell V4 */
:root { --hmz-safe-top: env(safe-area-inset-top, 0px); --hmz-safe-bottom: env(safe-area-inset-bottom, 0px); }
html.hmz-pwa-standalone, html.hmz-pwa-standalone body { overscroll-behavior-y: contain; }
html.hmz-pwa-standalone .cb-topbar { padding-top: var(--hmz-safe-top); min-height: calc(68px + var(--hmz-safe-top)); }
html.hmz-pwa-standalone .cb-sidebar { top: calc(68px + var(--hmz-safe-top)); }
html.hmz-pwa-standalone .cb-main { padding-top: calc(92px + var(--hmz-safe-top)); padding-bottom: calc(90px + var(--hmz-safe-bottom)); }
html.hmz-pwa-standalone .cb-bottom { height: calc(66px + var(--hmz-safe-bottom)); padding-bottom: var(--hmz-safe-bottom); }
html.hmz-pwa-standalone .collection-pwa-tools #installCollectionApp { display:none!important; }
.hmz-install-panel { display:none; margin:14px 0; padding:15px; border:1px solid #bfdbfe; border-radius:16px; background:linear-gradient(135deg,#eff6ff,#ecfeff); color:#172033; }
.hmz-install-panel.show { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.hmz-install-panel-copy { display:flex; align-items:center; gap:12px; }
.hmz-install-panel-icon { width:44px; height:44px; display:grid; place-items:center; flex:0 0 44px; border-radius:13px; background:#2563eb; color:#fff; font-size:18px; }
.hmz-install-panel h3 { margin:0 0 3px; font-size:15px; font-weight:900; }
.hmz-install-panel p { margin:0; color:#64748b; font-size:11px; }
.hmz-install-help { display:none; position:fixed; inset:0; z-index:120; padding:18px; background:rgba(15,23,42,.72); }
.hmz-install-help.show { display:grid; place-items:center; }
.hmz-install-help-card { width:min(440px,100%); padding:22px; border-radius:20px; background:#fff; box-shadow:0 25px 70px rgba(15,23,42,.3); }
.hmz-install-help-card h2 { margin:0 0 9px; font-size:20px; font-weight:900; }
.hmz-install-help-card ol { margin:14px 0; padding-left:20px; color:#475569; }
.hmz-install-help-card li { margin:8px 0; }
@media (display-mode: standalone) { .hmz-browser-only { display:none!important; } }
@media (max-width:650px) {
  .cb-login-shell { min-height:100dvh; display:block; padding:18px; background:linear-gradient(160deg,#172033 0,#2563eb 34%,#eef6ff 34%,#fff 100%); }
  .cb-login-brand { min-height:auto; padding:18px 12px 28px; background:transparent; text-align:center; align-items:center; }
  .cb-login-brand>span { width:62px; height:62px; border-radius:19px; font-size:27px; }
  .cb-login-brand h1 { margin:12px 0 4px; font-size:25px; }
  .cb-login-brand p { margin:0; font-size:12px; }
  .cb-login-card { padding:24px 20px; border-radius:22px; box-shadow:0 20px 55px rgba(15,23,42,.18); }
  .cb-login-card h2 { font-size:27px; }
  .hmz-install-panel.show { align-items:stretch; flex-direction:column; }
  .hmz-install-panel .btn { width:100%; }
}

/* Collection Staff Login branding containment fix — V4.3 */
.cb-login-brand > .cb-login-logo-wrap {
  position: relative !important;
  width: min(220px, 70vw) !important;
  height: 94px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 220px !important;
  max-height: 94px !important;
  flex: 0 0 94px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 14px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 12px 35px rgba(15,23,42,.18) !important;
}

.cb-login-brand > .cb-login-logo-wrap > .cb-login-logo {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

.cb-login-brand h1 {
  max-width: 560px;
  margin: 18px 0 6px;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.15;
}

.cb-login-brand p {
  margin: 0;
  text-align: center;
}

@media (max-width:650px) {
  .cb-login-shell {
    min-height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) 16px 28px;
    background: linear-gradient(160deg,#172033 0,#2563eb 31%,#eef6ff 31%,#fff 100%);
  }

  .cb-login-brand {
    min-height: 268px !important;
    padding: 24px 12px 30px !important;
    justify-content: flex-start !important;
    overflow: hidden;
  }

  .cb-login-brand > .cb-login-logo-wrap {
    width: min(176px, 58vw) !important;
    height: 76px !important;
    max-width: 176px !important;
    max-height: 76px !important;
    flex-basis: 76px !important;
    padding: 8px 12px !important;
    border-radius: 17px !important;
  }

  .cb-login-brand h1 {
    width: 100%;
    max-width: 330px;
    margin: 15px auto 5px !important;
    color: #fff;
    font-size: clamp(23px, 6.7vw, 30px) !important;
    line-height: 1.12;
  }

  .cb-login-brand p {
    color: rgba(255,255,255,.88);
    font-size: 13px !important;
  }

  .cb-login-card {
    position: relative;
    z-index: 2;
    margin-top: -8px;
    padding: 24px 20px 26px !important;
    border-radius: 24px !important;
  }

  .cb-login-card .form-control {
    min-height: 52px;
    font-size: 16px;
  }

  .cb-login-card .btn-lg {
    min-height: 54px;
  }
}

@media (max-width:380px) {
  .cb-login-brand {
    min-height: 246px !important;
    padding-top: 18px !important;
  }

  .cb-login-brand > .cb-login-logo-wrap {
    width: 150px !important;
    height: 66px !important;
    flex-basis: 66px !important;
  }

  .cb-login-brand h1 {
    font-size: 22px !important;
  }

  .cb-login-card {
    padding-inline: 17px !important;
  }
}
