/* STEP Dashboard v38.50 - refinamento visual do Portal do Cliente. */

body.client-mode {
  background:
    radial-gradient(circle at 88% 4%, rgba(37, 150, 220, .10), transparent 28%),
    linear-gradient(180deg, #f7fbfe 0%, #eef5fa 100%) !important;
}

body.client-mode .topbar {
  min-height: 78px !important;
  padding: 12px clamp(18px, 2.2vw, 38px) !important;
  border-bottom: 1px solid #d9e6ef !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 8px 28px rgba(31, 72, 118, .06) !important;
  backdrop-filter: blur(12px);
}

body.client-mode .title-block {
  width: 100%;
  text-align: center;
}

body.client-mode .title-block h1 {
  margin: 0 !important;
  color: #123f78 !important;
  font-size: clamp(22px, 2vw, 34px) !important;
  font-weight: 900 !important;
  letter-spacing: .035em !important;
}

body.client-mode .title-block .eyebrow,
body.client-mode .title-block .subtitle,
body.client-mode .clock-grid,
body.client-mode .session-card {
  display: none !important;
}

body.client-mode .client-dashboard {
  width: min(100%, 1680px) !important;
  margin: 0 auto !important;
  padding: clamp(18px, 2vw, 30px) clamp(16px, 2.2vw, 34px) 34px !important;
  box-sizing: border-box !important;
}

body.client-mode .client-hero {
  min-height: 132px;
  padding: 18px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  border: 1px solid rgba(38, 126, 185, .18) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(242,249,254,.98)) !important;
  box-shadow: 0 14px 36px rgba(32, 82, 126, .09) !important;
}

body.client-mode .client-identity {
  min-width: 0;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

body.client-mode .client-logo-box {
  flex: 0 0 184px;
  width: 184px !important;
  height: 108px !important;
  display: grid !important;
  place-items: center !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, #ffe500, #ffd600) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 24px rgba(185, 149, 0, .14) !important;
  overflow: hidden;
}

body.client-mode .client-logo-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

body.client-mode .client-kicker {
  margin: 0 0 7px !important;
  color: #53718e !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

body.client-mode #client-dashboard-name {
  margin: 0 0 6px !important;
  color: #123f78 !important;
  font-size: clamp(20px, 1.65vw, 29px) !important;
  font-weight: 900 !important;
}

body.client-mode #client-dashboard-meta {
  margin: 0 !important;
  color: #607b97 !important;
  font-size: 14px !important;
}

body.client-mode .client-hero-actions {
  flex: 0 0 auto;
  min-width: 190px;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 10px !important;
}

body.client-mode #client-dashboard-sync {
  color: #668099 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-align: right;
}

body.client-mode .client-refresh-button {
  min-width: 142px !important;
  min-height: 42px !important;
  padding: 10px 17px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid #0b7cc2 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #087aca, #0aa4e8) !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(8, 122, 202, .24) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

body.client-mode .client-refresh-button::before {
  content: '↻';
  font-size: 17px;
  line-height: 1;
}

body.client-mode .client-refresh-button:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  filter: brightness(1.03) !important;
  box-shadow: 0 12px 24px rgba(8, 122, 202, .30) !important;
}

body.client-mode .client-refresh-button:disabled {
  cursor: wait !important;
  opacity: .72 !important;
}

body.client-mode .client-refresh-button.is-loading::before {
  animation: client-refresh-spin .8s linear infinite;
}

@keyframes client-refresh-spin {
  to { transform: rotate(360deg); }
}

body.client-mode .client-summary-grid {
  margin-top: 16px !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}

body.client-mode .client-summary-grid > article {
  min-height: 112px !important;
  padding: 17px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border: 1px solid #d9e5ee !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 8px 22px rgba(40, 78, 112, .055) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

body.client-mode .client-summary-grid > article:hover {
  transform: translateY(-2px);
  border-color: #b8d8ec !important;
  box-shadow: 0 13px 28px rgba(40, 78, 112, .10) !important;
}

body.client-mode .client-summary-grid > article > span {
  color: #607991 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
}

body.client-mode .client-summary-grid > article > strong {
  color: #0e427e !important;
  font-size: clamp(24px, 1.8vw, 32px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body.client-mode .client-summary-grid > article > small {
  color: #6f879d !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
}

body.client-mode .client-search-row {
  margin-top: 16px !important;
  padding: 15px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 12px !important;
  border: 1px solid #d9e5ee !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 8px 22px rgba(40, 78, 112, .05) !important;
}

body.client-mode .client-search-row .search-box {
  min-width: 0;
}

body.client-mode .client-search-row .search-label {
  display: block !important;
  margin-bottom: 7px !important;
  color: #54718d !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
}

body.client-mode #client-project-search {
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  border: 1px solid #cfdce7 !important;
  border-radius: 11px !important;
  background: #fbfdff !important;
  color: #183c62 !important;
  font-size: 13px !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

body.client-mode #client-project-search:focus {
  border-color: #0b8ed7 !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(11, 142, 215, .12) !important;
}

body.client-mode #client-clear-search {
  min-width: 128px !important;
  min-height: 44px !important;
  padding: 10px 15px !important;
  border: 1px solid #cddce8 !important;
  border-radius: 11px !important;
  background: #f7fafc !important;
  color: #24527d !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
}

body.client-mode #client-clear-search:hover {
  transform: translateY(-1px);
  border-color: #a9cde3 !important;
  background: #edf7fc !important;
}

body.client-mode .client-section-head {
  margin-top: 26px !important;
  padding: 0 2px 12px !important;
  align-items: end !important;
  border-bottom: 1px solid #dbe7ef !important;
}

body.client-mode .client-section-head h3 {
  margin: 0 !important;
  color: #103f77 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

body.client-mode .client-section-head > p {
  max-width: 560px;
  color: #6c8298 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  text-align: right !important;
}

.client-sidebar[data-client-sidebar-owner='portal-v2'] .client-sidebar-footer {
  padding: 14px 12px 16px !important;
  display: grid !important;
  gap: 10px !important;
  border-top: 1px solid #e2ebf2 !important;
  background: linear-gradient(180deg, rgba(248,251,253,.70), #fff) !important;
}

.client-sidebar[data-client-sidebar-owner='portal-v2'] .client-sidebar-logout {
  min-height: 46px !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  border: 1px solid #d9e4ec !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  color: #38556f !important;
  box-shadow: none !important;
}

.client-sidebar[data-client-sidebar-owner='portal-v2'] .client-sidebar-logout:hover {
  transform: none !important;
  border-color: #f1b7b7 !important;
  background: #fff4f4 !important;
  color: #a83232 !important;
}

.client-sidebar[data-client-sidebar-owner='portal-v2'] .client-sidebar-logout .client-sidebar-icon {
  flex: 0 0 22px !important;
}

.client-sidebar[data-client-sidebar-owner='portal-v2'] .client-sidebar-copy {
  margin: 0 10px !important;
  line-height: 1.2 !important;
}

body.client-sidebar-collapsed .client-sidebar[data-client-sidebar-owner='portal-v2'] .client-sidebar-logout {
  justify-content: center !important;
  padding-inline: 0 !important;
}

@media (max-width: 1250px) {
  body.client-mode .client-summary-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.client-mode .client-hero {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body.client-mode .client-identity {
    align-items: flex-start !important;
  }

  body.client-mode .client-logo-box {
    flex-basis: 118px;
    width: 118px !important;
    height: 82px !important;
  }

  body.client-mode .client-hero-actions {
    width: 100%;
    align-items: stretch !important;
  }

  body.client-mode .client-refresh-button {
    width: 100% !important;
  }

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

  body.client-mode .client-search-row {
    grid-template-columns: 1fr !important;
  }

  body.client-mode #client-clear-search {
    width: 100% !important;
  }

  body.client-mode .client-section-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  body.client-mode .client-section-head > p {
    text-align: left !important;
  }
}

@media (max-width: 480px) {
  body.client-mode .client-summary-grid {
    grid-template-columns: 1fr !important;
  }
}

/* O CSS de links usa display:flex e nao pode sobrescrever o atributo hidden. */
.client-sidebar [hidden],
#client-under-dev-button[hidden] {
  display: none !important;
}