/* =========================================================
   USER-FORM.CSS — PREMIUM ADMIN USER FORMS
   Für: create_user.php + edit_user.php
========================================================= */

/* ---------- Hero ---------- */
.user-form-hero{
  border:1px solid rgba(0,0,0,.06) !important;
  border-radius:24px !important;
  overflow:hidden;
  background:
    radial-gradient(260px 120px at 8% 0%, rgba(13,110,253,.07), transparent 62%),
    radial-gradient(260px 120px at 92% 0%, rgba(31,139,36,.06), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.95));
  box-shadow:0 14px 34px rgba(0,0,0,.05);
}

body.dark .user-form-hero{
  border-color:rgba(255,255,255,.08) !important;
  background:
    radial-gradient(260px 120px at 8% 0%, rgba(13,110,253,.13), transparent 62%),
    radial-gradient(260px 120px at 92% 0%, rgba(31,139,36,.10), transparent 62%),
    linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.95));
  box-shadow:0 18px 42px rgba(0,0,0,.34);
}

.admin-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.38rem;
  font-size:.78rem;
  font-weight:850;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- Main cards ---------- */
.user-form-card,
.user-form-sidecard{
  border:1px solid rgba(0,0,0,.06) !important;
  border-radius:24px !important;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,255,255,.96));
  box-shadow:0 14px 34px rgba(0,0,0,.05);
}

body.dark .user-form-card,
body.dark .user-form-sidecard{
  border-color:rgba(255,255,255,.08) !important;
  background:linear-gradient(180deg, rgba(15,23,42,.99), rgba(15,23,42,.96));
  box-shadow:0 18px 40px rgba(0,0,0,.34);
}

/* ---------- Inputs ---------- */
.user-form-card .form-label{
  margin-bottom:.45rem;
  color:var(--text);
  font-weight:800;
}

.user-form-card .form-control,
.user-form-card .form-select{
  min-height:52px;
  border-radius:16px !important;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.92);
  color:var(--text);
  box-shadow:none;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    transform .16s ease;
}

.user-form-card .form-control:focus,
.user-form-card .form-select:focus{
  border-color:rgba(13,110,253,.42);
  background:#fff;
  box-shadow:0 0 0 .22rem rgba(13,110,253,.12);
}

body.dark .user-form-card .form-control,
body.dark .user-form-card .form-select{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:var(--text);
}

body.dark .user-form-card .form-control:focus,
body.dark .user-form-card .form-select:focus{
  border-color:rgba(144,202,249,.34);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 .22rem rgba(144,202,249,.10);
}

.user-form-card .form-control::placeholder{
  color:var(--muted);
  opacity:1;
}

.user-form-card .form-text{
  margin-top:.45rem;
  font-size:.84rem;
  line-height:1.55;
  color:var(--muted);
}

.user-form-card .form-control-lg,
.user-form-card .form-select-lg{
  font-size:1rem;
  padding:.85rem 1rem;
}

/* ---------- Password input groups ---------- */
.password-toggle-group{
  border-radius:16px;
}

.password-toggle-group .form-control{
  border-start-end-radius:0 !important;
  border-end-end-radius:0 !important;
}

.password-toggle-btn{
  min-width:54px;
  border-radius:0 16px 16px 0 !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-inline-start:0 !important;
  background:rgba(255,255,255,.88) !important;
  color:var(--muted) !important;
  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease;
}

.password-toggle-btn:hover{
  background:#fff !important;
  color:var(--text) !important;
}

body.dark .password-toggle-btn{
  border-color:rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.05) !important;
  color:#cbd5e1 !important;
}

body.dark .password-toggle-btn:hover{
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
}

html[dir="rtl"] .password-toggle-group .form-control{
  border-radius:0 16px 16px 0 !important;
}

html[dir="rtl"] .password-toggle-btn{
  border-radius:16px 0 0 16px !important;
  border-inline-start:1px solid rgba(0,0,0,.10) !important;
  border-inline-end:0 !important;
}

body.dark html[dir="rtl"] .password-toggle-btn{
  border-inline-start-color:rgba(255,255,255,.10) !important;
}

/* ---------- Side card ---------- */
.sidecard-kicker{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.78rem;
  font-weight:850;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.user-summary-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.user-summary-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  background:rgba(255,255,255,.72);
}

body.dark .user-summary-item{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}

.user-summary-label{
  font-size:.84rem;
  font-weight:800;
  color:var(--muted);
}

.user-summary-value{
  min-width:0;
  text-align:end;
  font-size:.96rem;
  font-weight:800;
  color:var(--text);
  word-break:break-word;
}

.user-summary-value .badge{
  font-size:.78rem;
  font-weight:800;
  border-radius:999px;
  padding:.45rem .72rem;
}

.user-form-tip{
  display:flex;
  align-items:flex-start;
  gap:.45rem;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(13,110,253,.12);
  background:rgba(13,110,253,.05);
  color:var(--text);
  font-size:.88rem;
  line-height:1.6;
}

body.dark .user-form-tip{
  border-color:rgba(144,202,249,.16);
  background:rgba(144,202,249,.08);
}

/* ---------- Buttons harmony ---------- */
.admin-action-btn{
  min-height:42px;
  border-radius:999px !important;
  padding:.62rem 1rem !important;
  font-weight:800;
  line-height:1.1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.25rem;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease,
    color .16s ease;
}

.admin-action-btn:hover{
  transform:translateY(-1px);
  opacity:1;
}

.admin-action-btn:active{
  transform:translateY(0);
}

.admin-action-btn-primary{
  border:0 !important;
  color:#fff !important;
  background:linear-gradient(135deg, #0d6efd, #2563eb) !important;
  box-shadow:0 10px 22px rgba(13,110,253,.20);
}

.admin-action-btn-primary:hover{
  background:linear-gradient(135deg, #0b5ed7, #1d4ed8) !important;
  box-shadow:0 14px 28px rgba(13,110,253,.24);
}

body.dark .admin-action-btn-primary{
  box-shadow:0 12px 26px rgba(13,110,253,.26);
}

.admin-action-btn-soft{
  border:1px solid rgba(0,0,0,.10) !important;
  color:var(--text) !important;
  background:rgba(255,255,255,.82) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
}

.admin-action-btn-soft:hover{
  background:rgba(255,255,255,.98) !important;
  border-color:rgba(0,0,0,.14) !important;
  box-shadow:0 12px 22px rgba(0,0,0,.08);
}

body.dark .admin-action-btn-soft{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.12) !important;
  color:var(--text) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}

body.dark .admin-action-btn-soft:hover{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.32);
}

/* ---------- Alerts ---------- */
#userFormClientError.alert,
.alert{
  border-radius:18px;
}

/* ---------- RTL ---------- */
html[dir="rtl"] .user-summary-value{
  text-align:start;
}

html[dir="rtl"] .user-summary-item{
  text-align:right;
}

html[dir="rtl"] .user-form-tip{
  text-align:right;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  .user-form-hero,
  .user-form-card,
  .user-form-sidecard{
    border-radius:22px !important;
  }
}

@media (max-width: 767.98px){
  .user-form-card .card-body,
  .user-form-sidecard .card-body{
    padding:1.1rem !important;
  }

  .user-summary-item{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }

  .user-summary-value{
    text-align:start;
  }
}

@media (max-width: 576px){
  .user-form-hero,
  .user-form-card,
  .user-form-sidecard{
    border-radius:18px !important;
  }

  .admin-action-btn{
    width:100%;
  }

  .password-toggle-btn{
    min-width:48px;
  }

  .user-form-card .form-control,
  .user-form-card .form-select{
    min-height:48px;
    border-radius:14px !important;
  }

  .password-toggle-group .form-control{
    border-start-end-radius:0 !important;
    border-end-end-radius:0 !important;
  }

  .password-toggle-btn{
    border-radius:0 14px 14px 0 !important;
  }

  html[dir="rtl"] .password-toggle-group .form-control{
    border-radius:0 14px 14px 0 !important;
  }

  html[dir="rtl"] .password-toggle-btn{
    border-radius:14px 0 0 14px !important;
  }
}