.user-info,.multi-field-item input,.multi-field-item select,.event-details{
 flex:1;
}
.section.active,.form-container.active{
 display:block;
}
.btn-icon:focus-visible,
.form-group label:has(input[type="radio"]:focus-visible){
 outline:3px solid rgba(67,97,238,0.25);
 outline-offset:2px;
}
.form-container{
 background:white;
 border-radius:10px;
 padding:25px;
 margin-top:20px;
 box-shadow:var(--card-shadow);
 display:none;
 position:relative;
}
.form-close-x{
 position:absolute;
 top:12px;
 right:16px;
 background:none;
 border:none;
 font-size:24px;
 line-height:1;
 color:#999;
 cursor:pointer;
 z-index:10;
 padding:4px 8px;
 border-radius:4px;
 transition:color .15s,background .15s;
}
.form-close-x:hover{
 color:#dc3545;
 background:rgba(220,53,69,.08);
}
.form-title{
 font-size:var(--header-font-size);
 margin-bottom:20px;
 color:var(--dark);
 padding-bottom:10px;
 border-bottom:1px solid var(--border);
}
.form-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
 gap:20px;
}

/* Placement forms: ensure monthly-details container starts a new row and aligns left */
.form-grid .form-group:has(#tempGroupMonthlyDetailsWrapper),
.form-grid .form-group:has(#groupMonthlyDetailsWrapper){
  grid-column: 1 / -1;
}

/* Preferred: semantic class to force a form-group to span all columns */
.form-grid .form-group.full-row{
  grid-column: 1 / -1;
}

/* Ensure wrappers fill their grid column */
#tempGroupMonthlyDetailsWrapper,
#groupMonthlyDetailsWrapper{
  width: 100%;
}
.form-group{
 margin-bottom:20px;
 position:relative;
}
.form-group label{
 display:block;
 margin-bottom:8px;
 font-weight:500;
 color:var(--dark);
}
.form-group div:has(input[type="radio"]){
 display:inline-flex;
 border:1px solid var(--border);
 border-radius:8px;
 overflow:hidden;
 background:#fff;
}
.form-group label:has(input[type="radio"]){
 margin:0;
 display:inline-flex;
 align-items:center;
 gap:8px;
 padding:8px 14px;
 cursor:pointer;
 color:var(--dark);
 border-right:1px solid var(--border);
 user-select:none;
}
.form-group label:has(input[type="radio"]) input[type="radio"]{
 position:absolute;
 inline-size:1px;
 block-size:1px;
 margin:-1px;
 padding:0;
 overflow:hidden;
 clip:rect(0 0 0 0);
 white-space:nowrap;
 border:0;
}
.form-group label:has(input[type="radio"]:checked){
 background:var(--dark);
 color:#fff;
}
.form-group input,
.form-group select,
.form-group textarea{
 width:100%;
 padding:12px;
 border:1px solid var(--border);
 border-radius:6px;
 font-size:var(--base-font-size);
 transition:border 0.2s;
 background:#f8f9fa;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
 border-color:var(--primary);
 outline:none;
 background:white;
}
/* Global, sleek input styling to replace default black borders/outlines */
input[type="text"],
input[type="date"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="tel"],
select,
textarea{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border:1px solid var(--border);
  background:#f8f9fa;
  color:var(--dark);
  border-radius:8px;
  outline:none;
  box-shadow:inset 0 1px 1px rgba(0,0,0,0.02);
  transition:border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(67,97,238,0.12);
  background:#fff;
}

input:hover,
select:hover,
textarea:hover{
  border-color:#cbd5e1; /* slightly darker than var(--border) */
}

/* Make selects look modern with a custom chevron */
select{
  padding-right:36px; /* space for chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right 12px center;
  background-size:16px 16px;
}

/* Modernize date inputs and indicator */
input[type="date"]{
  padding-right:36px; /* space for calendar icon */
}
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0.75;
  filter: grayscale(20%) brightness(0.6) sepia(60%) hue-rotate(200deg) saturate(250%);
  cursor:pointer;
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper{ padding:0; }
input[type="date"]::-webkit-datetime-edit{ color:var(--dark); }
input[type="date"]::-webkit-clear-button{ display:none; }

/* Disabled/read-only state */
input:disabled,
select:disabled,
textarea:disabled{
  background:#f1f5f9;
  color:#94a3b8;
  cursor:not-allowed;
}
.group-slot-item .slot-inputs{
 display:flex;
 flex-wrap:wrap;
 gap:10px;
}
.group-slot-item .group-candidate-input,.group-slot-item .slot-job-title-input{
 flex-grow:1;
}
.form-actions{
 margin-top:20px;
 display:flex;
 gap:10px;
}
/* Compact the inline remove (trash) button inside group placement slot rows */
.group-slot-item .btn.btn-danger{
  /* make the trash button compact and square */
  padding: 6px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  line-height: 1;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.group-slot-item .btn.btn-danger i{
  font-size: 0.95rem;
}

/* Reusable compact trash button utility for standard sizing */
.btn.btn-danger.icon-trash-compact{
  padding: 6px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  line-height: 1;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.btn-danger.icon-trash-compact i{
  font-size: 0.95rem;
}
.login-box input{width:100%;padding:12px;margin-bottom:15px;border:1px solid var(--border);border-radius:6px;}
.login-box button{width:100%;padding:12px;background:var(--primary);color:white;border:none;border-radius:6px;cursor:pointer;font-weight:500;}
.login-box .google-btn{
 background:#000 !important;
 color:#fff !important;
 border:1px solid #000;
}
.free-text-editor:focus,.add-note-section textarea:focus{
 border-color:var(--primary);
 box-shadow:0 0 0 2px rgba(67,97,238,0.2);
}
.comment-input-area textarea:focus{
 outline:none;
 border-color:#007bff;
}
.info-row .label{
 font-size:0.75rem;
 font-weight:500;
 color:#64748b;
 text-transform:uppercase;
 letter-spacing:0.5px;
}
.add-note-section textarea{
 width:100%;
 padding:12px;
 border:1px solid #dee2e6;
 border-radius:6px;
 font-size:var(--base-font-size);
 font-family:inherit;
 line-height:1.5;
 resize:vertical;
 min-height:80px;
 outline:none;
 transition:border-color 0.2s ease,box-shadow 0.2s ease;
}
.add-note-section textarea:focus{
 outline:none;
 border-color:#3b82f6;
 box-shadow:0 0 0 3px rgba(59,130,246,0.1);
}
#profileNotesSection .note-input-area{
 margin-top:12px;
 display:flex;
 gap:8px;
}
#profileNotesSection .note-input{
 flex:1;
 min-height:44px;
}
/* Tweak delete button sizing in form action rows to a more compact, standard size */
.form-actions .form-delete-button{
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.form-actions .form-delete-button i{
  font-size: 0.95rem;
}