/* AddPerson.css */

/* page wrapper for this component (we added 'addperson-page' class to root) */
.addperson-page {
  background-color: #efefef; /* page grey background */
  padding: 28px 34px; /* space around the white box */
  min-height: calc(100vh - 80px); /* keep it full-height under header (adjust if needed) */
}

/* style the central row that acts like the card (your markup uses .row.border) */
.addperson-page .row.border {
  background-color: #f3f3f3; /* slightly different from page so inner area pops */
  border: 1px solid rgba(255,255,255,0.95); /* thin white outline */
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  padding: 24px; /* extra padding inside to make it roomy */
}

/* Keep inner paddings consistent with your bootstrap classes */
.addperson-page .tabs {
  margin-bottom: 12px;
}

/* Center the page title like screenshot */
.addperson-page h1, .addperson-page h2 {
  text-align: center;
  font-weight: 500;
  color: #222;
  margin-bottom: 18px;
}

/* Make the upload button smaller and same style as screenshot */
.addperson-page .btn.btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
  color: white;
}

/* Adjust Save / Cancel sizing to match screenshot spacing */
.addperson-page .btn-success, 
.addperson-page .btn-secondary {
  min-width: 130px;
  border-radius: 6px;
}

/* Tweak form-control look slightly */
.addperson-page .form-control {
  border-radius: 6px;
  border: 1px solid #d0d0d0;
  background-color: #fff;
}

/* Tab buttons spacing */
.addperson-page .tabs .btn {
  border-radius: 8px;
  min-width: 140px;
}

/* make sure left sidebar (if present) keeps its own color */

/* small responsive tweak - reduces padding on smaller screens */
@media (max-width: 768px) {
  .addperson-page {
    padding: 16px;
    min-height: auto;
  }
  .addperson-page .tabs .btn {
    min-width: auto;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Custom Checkbox Styling: Load this CSS AFTER Bootstrap's CSS */

/* 1. HIDE THE NATIVE CHECKBOX (essential for clean custom styling) */
.add-person .form-check-input {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    text-align: center;
}

/* 2. Style the Label's ::before pseudo-element (This is the VISIBLE circle/icon) */
.add-person .form-check-input + .form-check-label::before {
    content: '';
    /* Base size and position for the visible element */
    width: 2.25em;       
    height: 2.25em;
    border-radius: 50%;
    position: absolute; /* Allows for easy alignment within the label */
    left: 0;
    top: 0;
    text-align: center;
    /* Used for centering the icon content */
    line-height: 2.25em;
    font-size: 1.5em;
    font-family: "Poppins", sans-serif; /* Ensure symbol is rendered */
}

/* 3. UNCHECKED STATE: Gold/Brown Circle with White Cross (❌) */
.add-person .form-check-input:not(:checked) + .form-check-label::before {
    background-color: #BFA253; /* Gold/Brown background */
    color: white; /* Icon color */
    content: "✕"; /* Cross symbol */
    font-weight: bold;
}

/* 4. CHECKED STATE: Dark Green Circle with White Checkmark (✔) */
.add-person .form-check-input:checked + .form-check-label::before {
    background-color: #00573C; /* Dark Green background */
    color: white; /* Icon color */
    content: "✔"; /* Checkmark symbol */
    font-weight: bold;
}

/* 5. FIX Label Padding (Moves the text over to make room for the custom icon) */
.add-person .form-check-label {
    position: relative; 
    padding-left: 3.5em;
    padding-top: 0.53em;
    text-align: center; /* Create space equal to the icon size + margin */
    min-height: 3.5em; /* Ensure enough space for the large icon */
}