/* =====================================================
   ERP GGN — User Manager Styles
   File: css/user-manager.css
   ===================================================== */

/* Search input */
.um-input-search{
  width:100%; padding:12px 14px 12px 44px;
  border:1.5px solid #E2E8F0; border-radius:12px;
  font-size:13.5px; font-family:inherit;
  color:#0A2540; background:#fff; outline:none;
  transition:border-color .2s, box-shadow .2s;
  box-sizing:border-box;
}
.um-input-search:focus{
  border-color:#3E7CB1;
  box-shadow:0 0 0 4px rgba(62,124,177,.12);
}

/* Filter row */
.um-filter-row{
  display:grid; grid-template-columns:1fr 1fr;
  gap:8px;
}
.um-select{
  padding:11px 36px 11px 14px;
  border:1.5px solid #E2E8F0; border-radius:11px;
  font-size:12.5px; font-family:inherit;
  color:#0A2540; background:#fff; outline:none;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  cursor:pointer;
  box-sizing:border-box;
  width:100%;
}
.um-select:focus{
  border-color:#3E7CB1;
  box-shadow:0 0 0 4px rgba(62,124,177,.12);
}

/* Action buttons di kartu user */
.um-btn-icon{
  padding:7px 11px;
  border:1.5px solid #E2E8F0; border-radius:9px;
  background:#fff; color:#0A2540;
  font-size:11px; font-weight:700;
  cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:5px;
  transition:all .15s;
}
.um-btn-icon svg{
  width:13px; height:13px;
  stroke:currentColor; fill:none;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
.um-btn-icon:hover{
  border-color:#3E7CB1;
  background:#F0F9FF;
  color:#1B4B7E;
}
.um-btn-icon.warn{ color:#92400E; border-color:#FED7AA; }
.um-btn-icon.warn:hover{ background:#FFFBEB; border-color:#F59E0B; }
.um-btn-icon.success{ color:#166534; border-color:#BBF7D0; }
.um-btn-icon.success:hover{ background:#F0FDF4; border-color:#16A34A; }
.um-btn-icon.um-btn-delete{ color:#991B1B; border-color:#FECACA; }
.um-btn-icon.um-btn-delete:hover{ background:#FEF2F2; border-color:#DC2626; }

/* Form fields (modal) */
.um-field{ margin-bottom:14px; }
.um-label{
  display:block; font-size:11.5px; font-weight:700;
  color:#0A2540; text-transform:uppercase; letter-spacing:.5px;
  margin-bottom:6px;
}
.um-input{
  width:100%; padding:11px 14px;
  border:1.5px solid #E2E8F0; border-radius:11px;
  font-size:13.5px; font-family:inherit;
  color:#0A2540; background:#F8FAFC; outline:none;
  transition:border-color .2s, background .2s, box-shadow .2s;
  box-sizing:border-box;
}
.um-input:focus{
  border-color:#3E7CB1; background:#fff;
  box-shadow:0 0 0 4px rgba(62,124,177,.12);
}
.um-input:disabled{
  background:#F1F5F9; color:#94A3B8; cursor:not-allowed;
}
.um-input-wrap{
  position:relative;
  display:flex; align-items:center;
}
.um-input-wrap .um-input{ padding-right:42px; }
.um-input-toggle{
  position:absolute; right:8px;
  width:32px; height:32px;
  border:none; background:transparent;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border-radius:8px;
  transition:background .2s;
}
.um-input-toggle:hover{ background:#F1F5F9; }
.um-input-toggle svg{
  width:16px; height:16px;
  stroke:#64748B; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.um-select-input{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px;
  cursor:pointer;
}
.um-hint{
  font-size:10.5px; color:#94A3B8;
  margin-top:4px; font-style:italic;
}

/* Radio status */
.um-radio-group{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.um-radio{
  display:flex; align-items:center; gap:8px;
  padding:11px 14px;
  border:1.5px solid #E2E8F0; border-radius:11px;
  background:#F8FAFC; cursor:pointer;
  transition:all .2s;
  font-size:12.5px; font-weight:600; color:#475569;
}
.um-radio input{ display:none; }
.um-radio-dot{
  width:16px; height:16px; border-radius:50%;
  border:2px solid #CBD5E1; background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; flex-shrink:0;
}
.um-radio-dot::after{
  content:''; width:6px; height:6px; border-radius:50%;
  background:#fff; transform:scale(0);
  transition:transform .15s;
}
.um-radio.active{
  border-color:#3E7CB1; background:#F0F9FF; color:#1B4B7E;
}
.um-radio.active .um-radio-dot{
  border-color:#3E7CB1; background:#3E7CB1;
}
.um-radio.active .um-radio-dot::after{
  transform:scale(1);
}

/* Responsive */
@media (max-width:480px){
  .um-filter-row{ grid-template-columns:1fr; }
  .um-radio-group{ grid-template-columns:1fr; }
}