/* Nice, light styling for forms and modals used in request flows */
:root{
  --primary:#2b8fd6;
  --primary-dark:#226a9e;
  --muted:#6b7280;
  --bg:#ffffff;
  --glass: rgba(255,255,255,0.8);
}

/* Make modal card a pleasant width and add gentle shadow */
#modal .modal-card, #modal .modal-content {
  width: min(820px, 96%);
  border-radius: 10px;
  overflow: visible;
}

#modal .modal-card-head .modal-card-title {
  font-weight: 600;
  font-size: 1.15rem;
  color: #0b2540;
}

#modal .modal-card-body {
  padding-top: 0.75rem;
}

/* Form layout improvements */
form .field {
  margin-bottom: 0.9rem;
}

form label {
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.25rem;
  display:block;
}

/* Make inputs stretch and more modern */
input[type="text"], input[type="date"], input[type="email"], input[type="number"], textarea, select {
  width: 100%;
  padding: 0.55rem 0.6rem;
  border-radius: 6px;
  border: 1px solid #dfe6ee;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  background: linear-gradient(180deg,#fff,#fcfdff);
}

textarea { min-height: 100px; }

.form-errors, .help.is-danger { color: #9b1c1c; background: #fff2f2; padding:0.5rem; border-radius:6px; border:1px solid #f1c0c0 }

/* Primary button styling */
.button.is-primary {
  background: linear-gradient(180deg,var(--primary),var(--primary-dark));
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(43,143,214,0.16);
}

.button.is-primary:hover{ background: linear-gradient(180deg,var(--primary-dark),#1b5a82); }

.button + .button { margin-left: 0.5rem; }

/* Small helpers for inline legend */
.legend-swatch { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:0.5rem; vertical-align:middle; border:1px solid #ddd }

/* Responsive tweaks */
@media (max-width: 640px){
  #modal .modal-card, #modal .modal-content { width: 96%; }
  .button.is-primary { width: 100%; }
}

/* Leave list styling */
#leave-list ul { list-style:none; padding:0; margin:0; }
#leave-list li { padding:0.6rem 0; border-bottom:1px solid #f3f6f9; display:flex; align-items:center; justify-content:space-between }
#leave-list li .leave-range { font-weight:600; color:#0b2540 }
#leave-list li em { color:var(--muted); margin-left:0.5rem }
#leave-list li form { margin-left:1rem }