/* Custom styles for FolpMembersV2 */

/* Use the same light blue for Bootstrap primary navbar/header */
.navbar.bg-primary {
  background-color: #e3f2fd !important;
  border-color: #e3f2fd !important;
  color: #000 !important; /* Ensure black text in navbar with bg-primary */
}

/* Ensure links and nav items in .navbar.bg-primary remain black */
.navbar.bg-primary .navbar-nav .nav-link,
.navbar.bg-primary .navbar-brand {
  color: #000 !important;
}

/* Light blue background for Bootstrap 5 offcanvas menu */
.offcanvas-start {
  background-color: #e3f2fd !important; /* Bootstrap 5 light blue */
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  margin-left: 0 !important;
  padding-left: 0.5rem;
  left: 0 !important;
  min-height: 100vh;
  height: 100vh !important;
  max-width: 260px;
  width: 220px !important; /* set preferred menu width */
  box-shadow: 2px 0 12px 0 rgba(33,37,41,0.14), 6px 0 24px 0 rgba(33,37,41,0.11);
}

/* Make navbar vertical and stretch to bottom of menu */
.offcanvas-start .navbar {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.offcanvas-start .navbar-nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Light blue background for page header */
header {
  background-color: #e3f2fd !important;
  color: #000 !important; /* Ensure black text in the header */
}

header a, header h1, header h2, header h3, header h4, header h5, header h6 {
  color: #000 !important;
}

/* Center login page form and set max-width for login only */
body#login .min-vh-100 {
  min-height: 100vh !important;
}

body#login form#login1 {
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
  background: var(--bs-body-bg);
  box-shadow: 0 2px 24px 0 rgba(33, 37, 41, 0.17), 0 12px 48px 0 rgba(33, 37, 41, 0.10);
  border-radius: 1.25rem;
  padding: 2.5rem 1.75rem 2rem 1.75rem;
  border: 1.5px solid var(--bs-primary);
  transition: box-shadow 0.25s cubic-bezier(.4,2,.6,1), border 0.25s cubic-bezier(.4,2,.6,1);
}
body#login form#login1:hover, body#login form#login1:focus-within {
  box-shadow: 0 4px 40px 0 rgba(33, 37, 41, 0.19), 0 16px 64px 0 rgba(33, 37, 41, 0.15);
  border: 2px solid var(--bs-primary);
}
body#login form#login1 h4 {
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.75rem;
  color: var(--bs-primary);
}
body#login form#login1 input.form-control {
  font-size: 1rem;
  padding: 0.85rem 1rem;
  background: var(--bs-body-bg);
  border-radius: 0.6rem;
  border: 1.2px solid #cfd8dc;
  transition: border-color 0.2s, box-shadow 0.2s;
}
body#login form#login1 input.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.12rem rgba(13,110,253,.11);
}
body#login form#login1 button {
  border-radius: 0.6rem;
  font-weight: 600;
  box-shadow: 0 2px 12px 0 rgba(13, 110, 253, 0.13);
  margin-top: 0.7rem;
  transition: box-shadow 0.2s, background 0.19s;
}
body#login form#login1 button:active {
  box-shadow: 0 1px 4px 0 rgba(33, 37, 41, 0.11);
}
@media (max-width: 400px) {
  body#login form#login1 {
    padding: 1.2rem 0.4rem;
  }
}

/* Wider modal forms for members page */
.modal-dialog.modal-dialog-centered,
.modal-dialog.modal-lg {
  max-width: 700px;
  width: 95vw;
}

/* Reduce vertical spacing in modal forms, labels always on one line */
form#serverconnectform1 .form-group.row,
form#frmAddNewMem .form-group {
  margin-bottom: 0.6rem !important;
}
form#serverconnectform1 label.col-form-label,
form#serverconnectform1 label.col-form-label-sm,
form#frmAddNewMem label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.01rem;
}
form#serverconnectform1 .col-sm-10,
form#serverconnectform1 .col-sm-2 {
  padding-right: 0.4rem;
  padding-left: 0.4rem;
}

/* Make modals fit above the fold on most screens */
.modal-content {
  max-height: 94vh;
  overflow-y: auto;
}