/* profile_edit.css - mobile first */
:root{
  --avatar-size: 120px;
  --avatar-size-sm: 96px;
  --border-radius: 12px;
  --accent: #2563eb;
  --muted: #6c757d;
}

/* Card */
.card {
  border-radius: 14px;
}

/* Avatar preview (fixed size, always square) */
.avatar-preview-lg {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 999px; /* circle */
  overflow: hidden;
  display: inline-block;
  background: linear-gradient(180deg, #f8fafc, #fff);
  border: 1px solid rgba(2,6,23,0.06);
  box-shadow: 0 6px 18px rgba(18,38,63,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
}

.avatar-preview-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Upload area */
.upload-area {
  margin-top: .5rem;
  padding: 14px;
  border-radius: 10px;
  border: 1px dashed rgba(2,6,23,0.08);
  background: #fafafa;
  display:flex;
  align-items:center;
  gap:12px;
  cursor: pointer;
}

.upload-area:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.upload-area-drag {
  background: rgba(59,130,246,0.06);
  border-color: rgba(37,99,235,0.4);
}

/* Hide native file input visually but keep accessible */
.upload-area input[type=file] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Upload icon */
.upload-icon {
  width: 44px;
  height: 44px;
  color: var(--accent);
  flex: 0 0 44px;
}

/* small screens: slightly smaller avatar */
@media (max-width: 575.98px) {
  :root {
    --avatar-size: var(--avatar-size-sm);
  }
  .avatar-preview-lg { width: var(--avatar-size); height: var(--avatar-size); }
}

/* Form spacing */
.form-label { font-weight: 600; }
.form-text { color: var(--muted); }

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .card-body { padding: 1rem; }
  .upload-instructions p { margin-bottom: 0.25rem; }
}

/* Focus & accessibility */
input.form-control:focus, select.form-select:focus, textarea.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(37,99,235,0.12);
  border-color: var(--accent);
}