/* ===== Base / Typography ================================================== */
:root{
  --brand-primary:#140079;
  --brand-accent:#0c65e8;
}

html, body { height: 100%; }
body{
  background:#fffbfb;
  color:#2a2e33;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15.25px;
  line-height:1.45;
}

/* Headings slightly bolder, clean */
h1,h2,h3,.h1,.h2,.h3{
  font-family:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.2px;
}

.form-label{ font-weight:600 }

/* ===== Layout: one screen, no page scrollbar ============================= */
/* Grid puts: header | breadcrumb | main | footer — footer never overlaps */
body.fit-desktop{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  overflow:hidden;                 /* no page scroll bar */
}

/* Main uses remaining space; if content barely exceeds, only main scrolls */
body.fit-desktop main.container-xl{
  min-height:0;                    /* allow grid child to shrink */
  overflow:auto;                   /* internal scroll only if truly needed */
  margin-top:1rem !important;
  margin-bottom:0 !important;
  padding-bottom:12px;             /* breathing room above footer */
}

/* Footer is in normal flow (NOT fixed) */
body.fit-desktop footer{
  position:static !important;
  background:#f8f9fa;
  padding:10px 0 !important;
  text-align:center;
  border-top:1px solid #eaecef;
}

/* Old “fixed footer” styles — neutralized just in case */
footer{ position:static; left:auto; right:auto; bottom:auto; }

/* ===== UI polish ========================================================== */
.btn{ border-radius:10px; padding:.46rem .88rem }
.form-control,.form-select{ border-radius:10px; padding:.5rem .7rem }
.form-control:focus,.form-select:focus{
  border-color:var(--brand-accent);
  box-shadow:0 0 0 .2rem rgba(12,101,232,.12)
}

/* Cards */
.card-elevated{
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.06)
}
.card-header{ padding:10px 14px }
.card-body{ padding:12px 14px }

/* Header/Breadcrumb compaction */
.app-header .container-xl{ padding-top:.55rem !important; padding-bottom:.55rem !important; }
.bg-light.border-bottom .container-xl{ padding-top:.35rem !important; padding-bottom:.35rem !important; }

/* Fields trimmed to fit one screen comfortably */
#description{ min-height:80px; }
.h-captcha{ transform:scale(.9); transform-origin:center; }
.available-personnels li{ margin-bottom:.25rem; }

/* Compact personnel list */
.available-personnels.compact { 
  font-size: .82rem;      /* ~13px */
  line-height: 1.2; 
}
.available-personnels.compact li { 
  margin-bottom: .15rem;  /* tighter spacing */
}
.available-personnels.compact .status-available-icon,
.available-personnels.compact .status-unavailable-icon {
  font-size: .9em;        /* smaller icons to match text */
  margin-right: .35rem;
}

.btn-compact {
  padding: .2rem .45rem;
  font-size: .78rem;
  line-height: 1;
  border-radius: .4rem;
}


/* ===== FullCalendar (modal) ============================================== */
#calendar{
  margin:10px auto;
  padding:10px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 0 10px #2966a2;
  max-width:100%;
  overflow-x:auto;
  height:520px;
}
.fc{ max-width:100%; height:60%; margin:0 auto; }
.fc-toolbar-title{ color:#0c65e8 !important; font-weight:700 !important; margin-left:10px !important; }
.fc-button-primary{
  background:none !important;
  border:1px solid #0c65e8 !important;
  color:#0c65e8 !important;
  box-shadow:none !important;
  text-transform:uppercase !important;
  font-weight:700 !important;
}
.fc-button-primary:hover{ background:#0c65e8 !important; color:#fff !important; }
.fc-event{ cursor:pointer; padding:5px; margin:2px 0; border-radius:2px; }

/* Status dots */
.status-available-icon{ color:#02d300; margin-right:8px; }
.status-unavailable-icon{ color:#eb0028; margin-right:8px; }

/* Responsive toolbar safety */
@media (max-width: 768px){
  .fc-toolbar{ flex-direction:column; align-items:flex-start; }
  .fc-toolbar .fc-left,.fc-toolbar .fc-center,.fc-toolbar .fc-right{ width:100%; }
  .fc-button{ width:100%; margin:5px 0; }
}

/* Small-height screens (e.g., 1280×720) — shave a bit of height */
@media (max-height: 740px){
  #description{ min-height:92px; }
}