/* ===============================
   Device Form — Modal (scoped)
   =============================== */
.device-form{
  --bg:#ffffff;
  --card:#ffffff;
  --line:#e6e8ee;
  --line-strong:#dfe3ea;
  --text:#111827;
  --muted:#6b7280;
  --hint:#9aa3af;
  --placeholder:#9ca3af;
  --focus:#007bff;
  --focus-ring:#e0f2fe;
  --primary:#007bff;          /* Save button */
  --primary-press:#007bff;
  --ghost:#f3f4f6;            /* Cancel button bg */
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(17,24,39,.06);
  --inset:inset 0 1px 0 rgba(255,255,255,.5);
  color:var(--text);
}

.device-form .modal-body{
  background:var(--bg);
  padding:18px 24px 24px;
}

/* -------- Form layout -------- */
.device-form__form{
  max-width: 520px;  /* matches centered card feel in screenshot */
  margin: 0 auto;
}

.device-form__field{ margin-bottom:14px; }

/* two-column rows (Groups|Config and IMEI|Phone) */
.device-form__row{
  display:grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom:14px;
}
.device-form__col{ display:flex; flex-direction:column; gap:6px; }

/* responsive: stack on small screens */
@media (max-width:640px){
  .device-form__row{ grid-template-columns: 1fr; }
}

/* -------- Labels & hints -------- */
.device-form__label{
  font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px;
}
.device-form__hint,
.device-form__label small{
  font-weight:400; color:var(--hint); font-size:11.5px;
}

/* -------- Inputs / selects / textarea -------- */
.device-form__input,
.device-form__select,
.device-form__textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  border-radius:8px;
  color:var(--text);
  outline:none;
  box-shadow:var(--inset), var(--shadow);
  transition:border-color .15s ease, box-shadow .15s ease;
}

.device-form__input,
.device-form__select{ height:40px; padding:0 12px; }

.device-form__textarea{
  min-height:140px; padding:10px 12px; resize:vertical;
}

.device-form__input::placeholder{ color:var(--placeholder); }

/* focus ring */
.device-form__input:focus,
.device-form__select:focus,
.device-form__textarea:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 3px var(--focus-ring), var(--shadow);
}

/* disabled */
.device-form__input[disabled],
.device-form__select[disabled],
.device-form__textarea[disabled]{
  background:#f5f6f8; color:#9aa3af; cursor:not-allowed;
}

/* -------- Select with chevron -------- */
.device-form__selectwrap{ position:relative; }
.device-form__select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:36px;
}
.device-form__chev{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  color:#94a3b8; pointer-events:none;
}

/* -------- Multiselect (ng-dropdown-multiselect) look -------- */
.device-form__multiselect .btn,
.device-form__multiselect .dropdown-toggle{
  width:100%; text-align:left;
  border:1px solid var(--line);
  background:#fff;
  height:40px; padding:0 36px 0 12px;
  border-radius:8px;
  color:var(--text);
  box-shadow:var(--inset), var(--shadow);
}
.device-form__multiselect .caret{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  border-top-color:#94a3b8;
}
.device-form__multiselect .dropdown-menu{
  width:100%; max-height:220px; overflow:auto;
  border:1px solid var(--line-strong); border-radius:10px; padding:8px;
  box-shadow:var(--shadow);
}

/* -------- Footer buttons -------- */
.device-form__footer{
  display:flex; justify-content:flex-end; gap:12px;
  margin-top:18px;
}

.device-form__btn{
  min-width:104px; height:40px; border-radius:8px;
  font-weight:600; border:1px solid var(--line);
  transition:filter .15s ease, transform .02s ease, background .15s ease, color .15s ease;
}

.device-form__btn--ghost{
  background:var(--ghost); color:#111827;
}
.device-form__btn--ghost:hover{ filter:brightness(1.02); }

.device-form__btn--primary{
  background:var(--primary); color:#fff; border-color:transparent;
}
.device-form__btn--primary:hover{ background:var(--primary-press); }
.device-form__btn:active{ transform:translateY(1px); }

/* -------- Error banner -------- */
.modal-header .error,
.device-form .error{
  background:#fff1f0; border:1px solid #ffccc7; color:#cf1322;
  padding:10px 12px; border-radius:8px; box-shadow:var(--shadow);
}

/* -------- Optional: mimic the IMEI underline preview from mock -------- */
/* Apply to the IMEI input only if you want the subtle baseline decoration */
#imei.device-form__input{
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(to right, #111 60%, #ddd 60%) 0 100%/100% 2px no-repeat border-box;
}