:root{
  --sq-blue:#066BFA;
  --sq-panel-bg:#f6fbff;
  --sq-panel-border:#dbeeff;
}
/* Panel inside modal body */
.sq-modal-panel{
  background: var(--sq-panel-bg);
  border: 1px solid var(--sq-panel-border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 2px 12px rgba(6,107,250,0.08);
}
.sq-modal-panel label{ 
  display:block;
  color:var(--sq-blue);
  text-align:center;
  font-size:18px;
  margin-bottom:8px;
}
.sq-modal-panel input[type="text"], .sq-modal-panel input[type="date"], .sq-modal-panel select, .sq-modal-panel textarea, .sq-modal-panel .form-control{
  border:1px solid var(--sq-blue) !important;
  border-radius:6px !important;
  padding:8px !important;
}
/* Error box */
.sq-modal-panel .sq-error{ color:#b94a48; background:#f8d7da; padding:8px 10px; border-radius:6px; display:none; }
/* Footer and save button */
.modal-footer.sq-modal-footer{ display:block; border-top:none; padding-top:18px; background:transparent; }
.sq-save-btn{
  display:block;
  margin:16px auto 0;
  background:var(--sq-blue);
  color:#fff !important;
  border:none;
  border-radius:10px;
  padding:12px 28px;
  font-weight:700;
  box-shadow:0 4px 10px rgba(6,107,250,0.18);
}
/* Close button using BS5 btn-close adjustments */
.modal-header .btn-close{ margin-left:auto; }
@media (max-width:600px){
  .sq-modal-panel{ padding:12px; }
  .sq-modal-panel label{ font-size:16px; }
}

/* Align modal footer actions to the right and keep consistent spacing */
.modal-footer.sq-modal-footer{ display:flex; justify-content:flex-end; gap:12px; align-items:center; padding:18px 24px; }
.sq-modal-footer .btn{ padding:8px 14px; border-radius:6px; }
.sq-save-btn{ display:inline-block; margin:0; }

/* Right-align common form submit buttons across pages */
form button[type="submit"], form .sq-save-btn, .sq-form-actions .sq-save-btn { float:right; margin-top:18px; }

/* Ensure modal panel labels keep visual style (fine-tuning) */
.sq-modal-panel label{ text-align:center; font-size:16px; }

/* Action pill used for edit/delete icons in tables */
.sq-action-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:10px;
  background:#eaf4ff;
  box-shadow:0 4px 12px rgba(6,107,250,0.06);
  border:1px solid rgba(6,107,250,0.06);
  cursor:pointer;
}
.sq-action-pill i{ font-size:18px; }
.sq-action-pill .fa-trash{ color:#fa066b; }
.sq-action-pill .fa-edit{ color:var(--sq-blue); }

/* Container for form actions to ensure consistent alignment and clearing floats */
.sq-form-actions{ clear:both; display:block; }
.sq-form-actions .sq-save-btn{ float:right; }

/* Icon-only buttons without borders (used in tables for edit/delete) */
.sq-icon-btn{
  background:transparent;
  border:0;
  padding:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  line-height:1;
}
.sq-icon-btn .fa{ font-size:18px; }
.sq-icon-btn:focus{ outline:0; box-shadow:none; }
.sq-icon-btn:hover{ background:transparent; }
