/* ========= Modal form styling: sentinel modal look ========= */
.app-modal {
  --border:#E6E8EE;
  --text:#111827;
  --muted:#151616;
  --field:#FFFFFF;
  --bg:#F7F8FB;
  --primary:#0C8CE9;
  --primary-press:#0C8CE9;
  --radius:6px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(17,24,39,.06);
  padding: 8px 12px 20px;
}

/* Head messages (error/success) keep default, just spacing */
.app-modal .modal-header { border:0; padding:0 0 8px; }

/* Form rows */
.app-modal .form-horizontal .form-group {
  margin-left: 3rem;
  padding: 4px 0 14px;
  border: 0;
  display: flex;
  width: 100%;
}
.app-modal .control-label {
  color: var(--muted);
  font-weight: 600;
  padding-top: 10px;
  text-align: start;
  width: fit-content;
  margin-bottom: 6px;
}

/* Inputs / selects */
.app-modal .form-control {
    width: 130%;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--text);
  box-shadow: var(--shadow);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.app-modal .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(12,140,233,.12), var(--shadow);
}
.app-modal select.form-control {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #9AA3AF 50%),
    linear-gradient(135deg, #9AA3AF 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 17px,
    calc(100% - 12px) 17px,
    calc(100% - 42px) 0.5em;
  background-size: 6px 6px, 6px 6px, 1px 40px;
  background-repeat: no-repeat;
}

/* Textarea (description fields you may have elsewhere) */
.app-modal textarea.form-control {
  height: 120px;
  resize: vertical;
}

/* Field hints */
.app-modal .field-hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  width: 100%;
  margin-top: -4rem;
}

/* File uploader “Browse…” row */
.app-modal .btn-upload {
  height: 40px !important;
  width: 130%;
  border-radius: var(--radius) !important;
  background: #FAFBFF !important;
  color: #374151 !important;
  box-shadow: none !important;
  text-align: left !important;
  padding-top: 8px !important;
}
.modal-body > form.form-horizontal .col-sm-offset-4.col-sm-8 .btn[ng-click="manageConfigurations()"] {
  background: transparent;
  border: 1px solid #1677ff;
  color: #1677ff;
}
/* ===== Checkboxes: blue when checked (#0C8CE9) ===== */
.app-modal input[type="checkbox"].form-control {
   height: 20px;
  padding: 0;
  box-shadow: none;
  border-radius: 6px;
  display: inline-block;
  vertical-align: middle;
  /* modern browsers */
  accent-color: var(--primary);
}

/* Cross-browser custom check (fallback) */
@supports not (accent-color: red) {
  .app-modal input[type="checkbox"].form-control {
    appearance: none;
    border: 1.5px solid var(--border);
    background: #fff;
    position: relative;
  }
  .app-modal input[type="checkbox"].form-control:checked {
    background: var(--primary);
    border-color: var(--primary);
  }
  .app-modal input[type="checkbox"].form-control:checked::after {
    content: "";
    position: absolute; inset: 0;
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")
      center/14px 14px no-repeat;
  }
}

/* Inline checkbox rows (like the four toggles in the screenshot) */
.app-modal .form-group .col-sm-2,
.app-modal .form-group .col-sm-4.control-label + .col-sm-2 {
  display: flex; align-items: center; gap: 8px; width: 40%;
}

/* Buttons */
.app-modal .btn {
     height: 40px; 
     border-radius: 10px; 
     padding: 5px 16px; 
    }
.app-modal .btn.btn-default {
  background: #0C8CE9; 
  border: 1px solid var(--border); 
  color: #fff;
  padding: 0 19px;
  font-weight: 600;
  font-size: 14px;
}

.app-modal .btn.btn-action {
  background: #fdfdfd; 
  border: 1px solid var(--border); 
  color: #0f0e16;
  padding: 0 19px;
  font-weight: 600;
  font-size: 14px;

}
.app-modal .btn.btn-default:hover { background: #054674; }
.app-modal .btn.btn-default.primary {
  background: var(--primary); 
  color: #fff; 
  border-color: var(--primary);
}
.app-modal .btn.btn-default.primary:hover { background: var(--primary-press); }


/* Action row alignment (Cancel left | Save right feeling) */
.app-modal .form-group:last-child .col-sm-8 {
  display: flex; 
  justify-content: flex-end; 
  gap: 10px; 
  flex-wrap: wrap;
  margin-right: 3rem;
}

/* Small fix for the dangling “dic” typo if present elsewhere */
.app-modal dic.col-sm-3 { display:inline-block; margin-left: 10rem; }