/* ============================================================
   CBIT B-Category Admissions – Main Stylesheet
   Bootstrap 5.3 compatible
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Open+Sans:wght@400;500;600&display=swap');


/* ---- Base Typography ---- */
html, body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #2a303b;
}



/* ---- Utility overrides ---- */
.text-custom  { color: #1cc3b2 !important; }
.bg-custom    { background-color: #0e2737 !important; }

/* ---- Navigation ---- */
.navbar-nav a {
  font-size: 16px;
  color: #404c62;
  font-weight: 600;
  padding: 5px 20px;
  letter-spacing: 0.01em;
  transition: color 0.3s;
  text-decoration: none;
}
.navbar-nav a:hover,
.navbar-nav a:focus { color: #1abc9c; }

@media (min-width: 768px) {
  .navbar-nav li { padding: 0 0.25em; }
}

.dropdown-menu a {
  font-size: 15px;
  color: #000;
  padding: 0 20px;
  letter-spacing: 0.01em;
  font-weight: 500;
}

/* ---- Table helpers ---- */
.table-responsive td,
.table-responsive th { white-space: nowrap; }

td:first-child,
th:first-child { padding-left: 15px; }

/* ---- Preview content ---- */
#content_preview {
  color: #000 !important;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

/* ---- A4 print container ---- */
#a4-container {
  width: 210mm;
  min-height: 200mm;
  margin: 20px auto;
  background: #fff;
  box-shadow: 0 0 15px rgba(0,0,0,.06);
  padding: 26px 22px 32px 22px;
  font-size: 13px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

#a4-container .table { width: 100%; table-layout: auto; }

#a4-container td,
#a4-container th {
  word-break: break-word;
  white-space: normal;
  padding-left: 7px !important;
}

@media (max-width: 900px) {
  #a4-container {
    width: 100vw;
    min-width: unset;
    border-radius: 0;
    margin: 0;
    padding: 8px;
  }
}

/* ---- Custom table style for print view ---- */
.table_cs td,
.table_cs th {
  font-size: 12.5px;
  padding: 4px 7px !important;
}

/* ---- Print styles ---- */
@media print {
  body, html {
    width: 210mm;
    height: 297mm;
    margin: 0;
    background: #fff !important;
    font-size: 10pt;
    color: #000;
  }

  #a4-container {
    width: 210mm !important;
    min-height: 297mm !important;
    background: #fff !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
  }

  .no-print,
  .btn,
  nav,
  footer,
  header { display: none !important; }

	.container,
	  .container-fluid {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 2mm !important; 
		margin: 0 auto !important;
	  }

	.card {
		page-break-inside: avoid;
		break-inside: avoid;
		box-shadow: none !important;
		/*border: 0.5pt solid #666 !important; */
		margin-bottom: 1rem;
	  }
	  
	 body.modal-open {
    visibility: hidden;
  }
  
  /* Make only the modal visible and reset positioning for multi-page printing */
  body.modal-open .modal {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    overflow: visible !important;
    visibility: visible;
  }
  
  /* Strip out modal constraints */
  body.modal-open .modal-dialog,
  body.modal-open .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Hide the dark background overlay */
  .modal-backdrop {
    display: none !important;
  }
}

/* ---- Form feedback helpers ---- */
.form-control.is-valid,
.form-select.is-valid {
  border-color: #198754;
  background-image: none; /* remove bootstrap tick icon for cleaner look */
}

/* ---- Spinner inside button ---- */
.spinner-border-sm {
  width: 0.85rem;
  height: 0.85rem;
  border-width: 0.15em;
}

/* ---- Responsive card max-width for check / print forms ---- */
@media (min-width: 768px) {
  .card.mx-auto { max-width: 860px; }
}