/* ==========================================================================
   Hengxin Cloud · Settings, personalization and preference overrides
   ========================================================================== */

/* Personal preference overrides */
html[data-density="compact"] .view { padding: 19px 24px 42px; }
html[data-density="compact"] .page-head { margin-bottom: 15px; }
html[data-density="compact"] .data-table td { padding-top: 9px; padding-bottom: 9px; }
html[data-density="compact"] .data-table th { height: 34px; }
html[data-chat-font="small"] .chat-bubble { font-size: 10px; }
html[data-chat-font="large"] .chat-bubble { font-size: 12px; }
html[data-chat-font="small"] .chat-input-shell textarea { font-size: 10px; }
html[data-chat-font="large"] .chat-input-shell textarea { font-size: 11.5px; }
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* Page header */
.settings-save-state {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: #dbeafe;
  font-size: 8.5px;
}
.settings-hero {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 18px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 15px;
  background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 16px 34px rgba(0, 0, 0, .12);
}
.settings-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d9e6f7;
  border-radius: 17px;
  background: #eef5ff;
  cursor: pointer;
}
.settings-avatar .avatar { width: 100%; height: 100%; border-radius: 0; font-size: 23px; }
.settings-avatar-edit {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 2px 5px rgba(15, 23, 42, .18);
}
.settings-avatar-edit .icon { width: 9px; height: 9px; }
.settings-hero-main { min-width: 0; flex: 1; }
.settings-hero-name { display: flex; align-items: center; gap: 7px; color: #05070b; font-size: 16px; font-weight: 650; letter-spacing: -.025em; }
.settings-hero-status {
  padding: 2px 5px;
  border: 1px solid #d7e6fa;
  border-radius: 4px;
  background: #f0f7ff;
  color: #1d4ed8;
  font-size: 7px;
  font-weight: 500;
}
.settings-hero-role { margin-top: 3px; color: #64788f; font-size: 9px; }
.settings-hero-bio { margin-top: 5px; color: #526983; font-size: 8.5px; line-height: 1.55; }
.settings-hero-meta { display: flex; gap: 24px; padding-left: 18px; border-left: 1px solid #edf2f9; }
.settings-hero-meta div { display: flex; flex-direction: column; gap: 3px; }
.settings-hero-meta span { color: #8294a9; font-size: 7.5px; }
.settings-hero-meta strong { color: #111827; font-size: 8.5px; font-weight: 500; }

.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.settings-card { padding: 17px 18px; min-width: 0; }
.settings-profile-card, .settings-security-card { grid-column: 1 / -1; }
.settings-card-head { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 13px; margin-bottom: 14px; border-bottom: 1px solid #eef3f9; }
.settings-card-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #dfeaf8;
  border-radius: 8px;
  background: #f1f7ff;
  color: #2563eb;
}
.settings-card-icon .icon { width: 14px; height: 14px; }
.settings-card-head h2 { color: #05070b; font-size: 12px; font-weight: 600; }
.settings-card-head p { margin-top: 3px; color: #7a8da3; font-size: 8.5px; }
.settings-profile-form .form-grid { gap: 11px 13px; }
.settings-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #eef3f9; flex-wrap: wrap; }
.settings-hint { display: inline-flex; align-items: center; gap: 5px; color: #8193a8; font-size: 8px; }
.settings-hint .icon { width: 11px; height: 11px; flex: 0 0 auto; }
.settings-section { margin-bottom: 13px; }
.settings-section-label { margin-bottom: 6px; color: #536980; font-size: 9px; font-weight: 500; }
.settings-choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.settings-choice-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid #e3ebf6;
  border-radius: 8px;
  background: #fbfdff;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.settings-choice:hover { border-color: #c4d8ee; background: #fff; }
.settings-choice.active { border-color: #93b9e8; background: #f0f7ff; box-shadow: 0 0 0 2px rgba(37, 99, 235, .07); }
.settings-choice strong { color: #334155; font-size: 9px; font-weight: 500; }
.settings-choice.active strong { color: #1d4ed8; }
.settings-choice span { color: #8a9bae; font-size: 7.5px; }
.settings-switches { display: flex; flex-direction: column; gap: 1px; }
.settings-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; }
.settings-switch-row + .settings-switch-row { border-top: 1px solid #f0f4f9; }
.settings-switch-row > div { display: flex; flex-direction: column; gap: 2px; }
.settings-switch-row strong { color: #111827; font-size: 9.5px; font-weight: 500; }
.settings-switch-row span { color: #8193a8; font-size: 8px; line-height: 1.55; }
.settings-switch-row .switch { flex: 0 0 auto; }
.settings-tip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 9px;
  border: 1px solid #e4edf8;
  border-radius: 7px;
  background: #f8fbff;
  color: #71859c;
  font-size: 8px;
  line-height: 1.6;
}
.settings-tip .icon { width: 11px; height: 11px; flex: 0 0 auto; margin-top: 1px; color: #2563eb; }
.settings-password-form { gap: 11px 13px; }
.settings-password-form .settings-card-footer { margin-top: 1px; }
.settings-permission-lock {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e3ebf6;
  border-radius: 9px;
  background: #f8fbff;
  color: #71859c;
}
.settings-permission-lock > .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #6f8fb5;
  margin-top: 1px;
}
.settings-permission-lock strong { display: block; color: #334155; font-size: 10px; font-weight: 600; }
.settings-permission-lock p { margin-top: 4px; font-size: 8.5px; line-height: 1.7; }
@media (max-width: 900px) {
  .settings-grid { grid-template-columns: 1fr; }
  .settings-profile-card, .settings-security-card { grid-column: auto; }
  .settings-hero { align-items: flex-start; flex-wrap: wrap; }
  .settings-hero-meta { width: 100%; padding: 10px 0 0; border-left: 0; border-top: 1px solid #edf2f9; }
  .settings-hero-meta div { flex: 1; }
}
@media (max-width: 600px) {
  .settings-hero { padding: 14px; }
  .settings-card { padding: 14px; }
  .settings-avatar { width: 55px; height: 55px; }
  .settings-hero-meta { gap: 12px; }
  .settings-card-footer { align-items: flex-start; flex-direction: column; }
}