/**
 * Comercial — alinhamento visual ao Controle de Frota (carros.pieriniredutores.com.br).
 * Complementa pierini-*.css; escopo .comercial-app.
 */

.comercial-app .app-main {
  align-items: center;
}

.comercial-app .app-content,
.comercial-app .app-header__shell,
.comercial-app .app-footer__shell {
  width: 100%;
  max-width: var(--content-max, min(1320px, 100%));
  margin-inline: auto;
  box-sizing: border-box;
}

.comercial-app .app-content > * {
  min-width: 0;
  box-sizing: border-box;
}

.comercial-app .login-wrap {
  margin-inline: auto;
}

.comercial-app .card__header {
  align-items: center;
  text-align: center;
}

.comercial-app .card--form > .card__header {
  text-align: center;
  align-items: center;
}

.comercial-app .card--form .stack,
.comercial-app .card--form form.stack label,
.comercial-app .card--form .field {
  text-align: left;
}

.comercial-app .comercial-page-intro,
.comercial-app .comercial-scope-hint {
  text-align: center;
}

.comercial-app .atv-row > h2 {
  text-align: center;
}

/* Cards — contraste igual ao Carros */
.comercial-app .card,
.comercial-app .tile,
.comercial-app .tile-sector,
.comercial-app .dashboard-priority-card {
  border-color: color-mix(in srgb, var(--brand) 20%, var(--card-border));
  box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--text) 5%, transparent);
}

html[data-theme="dark"] .comercial-app .card,
html[data-theme="dark"] .comercial-app .tile,
html[data-theme="dark"] .comercial-app .tile-sector,
html[data-theme="dark"] .comercial-app .dashboard-priority-card {
  border-color: color-mix(in srgb, var(--brand) 38%, var(--card-border));
  box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, #fff 6%, transparent);
}

.comercial-app .muted,
.comercial-app .hint,
.comercial-app .sector-lead,
.comercial-app .sector-hint {
  color: var(--muted);
}

.comercial-app .card__header h2,
.comercial-app .card__header h3 {
  color: var(--text);
  font-weight: 700;
}

/* Logo no cabeçalho */
.app-header__brand-link {
  display: block;
  color: inherit;
  text-decoration: none;
  line-height: 0;
}

.app-header__brand-link:focus-visible {
  outline: 2px solid var(--brand-mid, #1a56a8);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Login — títulos e tema fixo (canto superior direito) */
.login-card__titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  text-align: center;
}

.login-card__titles .app-title,
.login-card__titles .app-title-brand {
  margin: 0;
  width: 100%;
}

.login-page__theme {
  position: fixed;
  top: clamp(0.65rem, 2vw, 1rem);
  right: clamp(0.65rem, 2vw, 1rem);
  z-index: 30;
}

.login-theme-select {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  margin: 0;
  padding: 0.55rem 0.65rem;
  min-width: 8.5rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--card-border));
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
}

.login-theme-select__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
}

.login-theme-select__control {
  width: 100%;
  min-width: 0;
  min-height: 2.55rem;
  height: 2.55rem;
  margin: 0;
  padding: 0.5rem 2rem 0.5rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--card-border));
  border-radius: calc(var(--radius) - 2px);
  color: var(--text);
  cursor: pointer;
  color-scheme: light;
  -webkit-text-fill-color: currentColor;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234a6288' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 10px 6px;
}

html[data-theme="dark"] .login-page__theme .login-theme-select {
  background: #001f52;
  border-color: #7eb8ff;
  color: #ffffff;
  box-shadow: 0 4px 18px #00000055, 0 0 0 1px #7eb8ff55;
}

html[data-theme="dark"] .login-page__theme .login-theme-select__label {
  color: #ffffff;
}

html[data-theme="dark"] .login-page__theme .login-theme-select__control {
  background-color: #0e2448;
  border-color: #7eb8ff;
  color: #ffffff;
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c0d4f0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}

.login-card .login-form,
.login-card form.stack.login-form {
  display: grid !important;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

.login-card .login-form .field {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
}

.login-card .login-form .field__label {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}

.login-card .login-form select.input,
.login-card .login-form input.input:not([type="checkbox"]),
.login-card form.stack.login-form select.input,
.login-card form.stack.login-form input.input:not([type="checkbox"]) {
  display: block !important;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.login-card .login-form .show-pass,
.login-card form.stack.login-form label.show-pass {
  display: flex !important;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
}

.login-card .login-form .btn-primary,
.login-card form.stack.login-form .btn-primary {
  width: 100%;
  margin-top: 0.15rem;
}