/* === GLOBAL LAYOUT === */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

main {
  padding-top: 350px; /* Adjust if navbar height changes */
}

footer {
  flex-shrink: 0; /* Keeps footer at bottom */
}
.text-indent {
  text-align: justify;
  text-indent: 2em; /* adjust space as needed */
}
.text-justify {
  text-align: justify;
}


/* === NAVBAR === */
.navbar-rotc {
  background-color: #ffffff !important;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

@media (min-width: 992px) {
  .navbar-rotc {
    min-height: 110px; /* Controls tall navbar on desktop */
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

.lucena-logo {
  height: 120px; /* adjust as needed */
  width: auto;
}

/* === LOGO SIZING === */
.navbar-logo {
  height: 100px;
  width: auto;
}

@media (max-width: 768px) {
  .navbar-logo {
    height: 80px; /* Shrinks logo on mobile */
  }
}


/* === BRAND / TITLE === */
.navbar-brand {
  gap: 1rem;
  flex-wrap: wrap; /* Allow line break for title/logo */
}

.rotc-title {
  white-space: normal;
  line-height: 1.3;
  text-align: left;
  font-weight: bold;
  color: #000 !important;
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .rotc-title {
    font-size: 1.1rem;
    text-align: center; /* Centered title for mobile */
  }
}


/* === NAV LINKS === */
.navbar-rotc .nav-link {
  color: #000 !important;
  font-weight: 600;
  font-size: 1.1rem;
}


/* === HAMBURGER MENU === */
@media (min-width: 992px) {
  .navbar-toggler {
    display: none !important; /* Hide toggle on large screens */
  }
}


/* === MAIN SECTION === */
main.flex-grow-1 {
  padding-top: 300px; /* Adjust if navbar height changes */
}


/* === CAROUSEL === */
.carousel.slide {
  max-width: 1500px;
  border-radius: 12px;
  overflow: hidden; /* Ensures clean rounded corners */
}


/* === CAROUSEL CAPTION BOX === */
.carousel-caption-box {
  background: linear-gradient(to right, rgba(0, 55, 28, 0.85), rgba(12, 92, 51, 0.85)); /* ROTC colors */
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  display: inline-block;
}

.carousel-caption-box h5 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
  color: white;
}


/* === CARD SECTION === */
.card.text-center {
  width: 18rem; /* Fixed card width */
}


/* === CUSTOM WIDTHS FOR NAV BUTTONS === */
.w-180 {
  width: 200px !important; /* Used for dashboard buttons */
}

.w-150 {
  width: 150px !important; /* Used for login/signup */
}


/* === ABOUT SECTION === */
.about-section-heading {
  background: linear-gradient(to top, #00371c, #0c5c33); /* ROTC green gradient */
  border-radius: 8px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.about-section-heading h2 {
  margin-bottom: 0;
  color: white;
}

.about-section-paragraph {
  text-align: justify;
  text-indent: 2em;
  color: #6c757d;
  font-size: 1.05rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  padding-left: 1rem;
}

#about .card {
  max-width: 960px;
  margin: 0 auto; /* Centered within section */
}


/* === FOOTER === */
.footer-rotc {
  background: linear-gradient(to top, #00371c, #0c5c33); /* ROTC colors */
  color: #ffffff;
}
/* === SIGNUP PAGE === */
.signup-container {
  max-width: 700px;
}

.signup-card {
  background: linear-gradient(to bottom right, #0c5c33, #00371c);
  padding: 2rem;
  border-radius: 12px;
  color: white;
}

/* Toggle Password Eye Icon */
.toggle-password {
  cursor: pointer;
  padding: 0.5rem;
  font-size: 1.2rem;
}

/* Data Privacy Policy Link */
.privacy-link {
  color: #fff;
  text-decoration: underline;
}
/* === LOGIN PAGE === */
.login-container {
  margin-top: 5rem;
  max-width: 500px;
}

.login-card {
  background: linear-gradient(to top, #00371c, #0c5c33);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.login-header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.login-footer {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.is-invalid {
  border-color: #dc3545;
}

.invalid-feedback {
  color: #dc3545;
  font-size: 0.875em;
  margin-top: 0.25rem;
}
.newpassword-container {
  max-width: 500px; /* smaller width */
  margin: 40px auto; /* vertical spacing + horizontal centering */
  padding: 15px;
}
/* Responsive fix for verification tables */
@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table th,
  .table td {
    white-space: nowrap;
    font-size: 13px;
  }

  .table input.form-control-sm {
    width: 120px; /* Prevent form inputs from being too wide */
  }
}
.tab-content {
  min-height: 70vh; /* Makes tabs tall enough to keep footer low */
}
.cadet-card .card,
.graduate-card .card {
  transition: transform 0.2s ease;
}

.cadet-card .card:hover,
.graduate-card .card:hover {
  transform: scale(1.02);
}
/* Make pie chart taller */
.chart-container.pie-chart {
  height: 400px;
}

@media (max-width: 768px) {
  .chart-container.pie-chart {
    height: 320px;
  }
}

@media (max-width: 476px) {
  .chart-container.pie-chart {
    height: 350px;
  }
}



/* Scrollable legend if too many items */
.chart-legend-scroll {
  max-height: 200px;
  overflow-y: auto;
}