/* HostlyMail Premium UI/UX Polish */

/* 1. Header Branding & Alignment */
.gm-brand .gm-brand-name {
  display: none !important;
}

.gm-brand #logo {
  height: 38px !important;
  max-width: 200px !important;
  margin-right: 12px !important;
  transition: transform 0.2s ease !important;
}

.gm-brand #logo:hover {
  transform: scale(1.02) !important;
}

/* 2. Login Card Polish */
.gm-login-card {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html.dark-mode .gm-login-card {
  box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.gm-login-card #logo {
  height: 48px !important;
  max-width: 210px !important;
  margin: 0 auto 18px !important;
}

.gm-login-title {
  font-weight: 500 !important;
  letter-spacing: -0.3px !important;
}

.gm-login-subtitle {
  font-size: 13px !important;
  margin: 4px 0 24px !important;
  opacity: 0.85 !important;
}

.gm-security-note {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid rgba(100, 116, 139, 0.15);
  font-size: 11px;
  color: var(--color-on-surface-variant);
  opacity: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
  letter-spacing: 0.25px;
}

/* 3. Inputs & Focus Effects */
.gm-login-card input.form-control:focus {
  box-shadow: 0 0 0 3px rgba(11, 87, 208, 0.2) !important;
}

/* 4. Modern Font Rendering */
body, input, button, select, textarea {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* 5. Hide Interface Skin selector from Settings (User doesn't need to see or change skin) */
tr.skin,
tr[data-target="skin"],
select[name="_skin"],
#preferences-details tr:has(select[name="_skin"]) {
  display: none !important;
}