/* V22 — larger identity, larger sidebar, and uniform KPI cards */

.login-page {
  grid-template-columns: minmax(400px, 1.08fr) minmax(420px, 1fr) !important;
}

.login-brand-panel {
  padding: clamp(34px, 4.5vw, 64px) !important;
}

.login-brand-top {
  gap: 18px !important;
  font-size: 23px !important;
  font-weight: 800 !important;
}

.login-brand-top .brand-mark {
  width: 72px !important;
  height: 72px !important;
}

.login-brand-top .brand-mark i {
  width: 55px !important;
  height: 55px !important;
  right: -6px !important;
  top: 2px !important;
}

.login-brand-top .brand-mark b {
  width: 13px !important;
  height: 13px !important;
  left: 17px !important;
  bottom: 12px !important;
}

.login-hero-copy > span {
  font-size: 22px !important;
  font-weight: 800 !important;
}

.login-hero-copy h1 {
  margin-top: 18px !important;
  font-size: clamp(48px, 4.3vw, 62px) !important;
  font-weight: 800 !important;
  line-height: 1.24 !important;
}

.brand-values {
  gap: 30px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

.login-kicker {
  font-size: 17px !important;
}

.login-form-wrap h2 {
  font-size: 38px !important;
}

.login-form label {
  font-size: 17px !important;
}

.login-form input {
  min-height: 60px !important;
  font-size: 18px !important;
}

.login-submit {
  min-height: 60px !important;
  font-size: 17px !important;
}

.app-shell {
  grid-template-columns: 350px minmax(0, 1fr) !important;
}

.side-head {
  height: 112px !important;
  padding: 24px !important;
  gap: 15px !important;
}

.side-head .brand-mark {
  width: 54px !important;
  height: 54px !important;
}

.side-head .brand-mark i {
  width: 40px !important;
  height: 40px !important;
}

.side-head strong {
  font-size: 22px !important;
}

.side-head span {
  margin-top: 5px !important;
  font-size: 15px !important;
}

.side-nav {
  padding: 20px 16px !important;
}

.side-nav .nav-home,
.side-nav .nav-week,
.nav-administration {
  min-height: 54px !important;
  padding: 14px 15px !important;
  gap: 12px !important;
  font-size: 18px !important;
}

.nav-label {
  margin: 24px 15px 11px !important;
  font-size: 15px !important;
}

.metric-nav-list {
  gap: 7px !important;
}

.metric-nav {
  min-height: 60px !important;
  grid-template-columns: 8px 30px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 11px 13px !important;
}

.metric-nav i {
  width: 8px !important;
  height: 8px !important;
}

.metric-nav span {
  font-size: 14px !important;
}

.metric-nav b {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.side-user {
  min-height: 118px !important;
  grid-template-columns: 46px minmax(0, 1fr) 20px !important;
  padding: 16px 22px !important;
  gap: 12px !important;
}

.side-user > span {
  width: 44px !important;
  height: 44px !important;
  font-size: 18px !important;
}

.side-user strong {
  font-size: 18px !important;
}

.side-user small {
  font-size: 15px !important;
}

.side-sync-status {
  margin-top: 8px !important;
  font-size: 13px !important;
}

.side-sync-status > i {
  width: 10px !important;
  height: 10px !important;
}

.side-user-dropdown > button {
  min-height: 58px !important;
}

.side-user-dropdown > button strong {
  font-size: 15px !important;
}

.side-user-dropdown > button small {
  font-size: 12px !important;
}

.metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 390px !important;
  align-items: stretch !important;
  gap: 18px !important;
}

.metric-card,
.metric-card:first-child,
.metric-card:last-child {
  grid-column: auto !important;
  width: 100% !important;
  height: 390px !important;
  min-height: 390px !important;
  padding: 22px !important;
  display: grid !important;
  grid-template-rows: auto 78px 108px minmax(76px, 1fr) auto !important;
  align-content: stretch !important;
}

.metric-card h3 {
  min-height: 0 !important;
  margin: 14px 0 10px !important;
  align-self: center !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
}

.metric-card .current-block {
  min-height: 108px !important;
  margin: 0 -7px !important;
  align-self: stretch !important;
}

.metric-card .comparison-grid {
  align-self: stretch !important;
  padding-top: 12px !important;
}

.metric-card .open-card {
  align-self: end !important;
  margin-top: 8px !important;
}

@media (max-width: 1180px) and (min-width: 841px) {
  .app-shell {
    grid-template-columns: 300px minmax(0, 1fr) !important;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 840px) {
  .app-shell {
    display: block !important;
  }

  .metric-grid {
    grid-template-columns: 1fr !important;
  }

  .metric-card,
  .metric-card:first-child,
  .metric-card:last-child {
    height: 390px !important;
  }
}