/* Reduce width of the Receipt No column in the History tab table */
		#history .table th:nth-child(1),
		#history .table td:nth-child(1) {
			width: 70px;
			/* Adjust this value to your preference */
			min-width: 80px;
			/* Ensure it doesn't shrink too much */
			max-width: 80px;
			/* Prevent it from expanding too much */
			white-space: nowrap;
			/* Prevent text wrapping */
			overflow: hidden;
			/* Hide overflow text */
			text-overflow: ellipsis;
			/* Add ellipsis for overflow text */
		}

		/* Reduce width of the Student No column in the History tab table */
		#history .table th:nth-child(2),
		#history .table td:nth-child(2) {
			width: 100px;
			/* Adjust this value to your preference */
			min-width: 110px;
			/* Ensure it doesn't shrink too much */
			max-width: 110px;
			/* Prevent it from expanding too much */
			white-space: nowrap;
			/* Prevent text wrapping */
			overflow: hidden;
			/* Hide overflow text */
			text-overflow: ellipsis;
			/* Add ellipsis for overflow text */
		}

		/* Reduce width of the Remaining column in the History tab table */
		#history .table th:nth-child(7),
		#history .table td:nth-child(7) {
			width: 80px !important;
			min-width: 90px;
			/* Ensure it doesn't shrink too much */
			max-width: 90px;
			/* Prevent it from expanding too much */
			white-space: nowrap;
			/* Prevent text wrapping */
			overflow: hidden;
			text-overflow: ellipsis;
		}

		/* Reduce width of the Payment Status column in the History tab table */
		#history .table th:nth-child(8),
		#history .table td:nth-child(8) {
			width: 80px;
			/* Adjust this value to your preference */
			min-width: 90px;
			/* Ensure it doesn't shrink too much */
			max-width: 90px;
			/* Prevent it from expanding too much */
			white-space: nowrap;
			/* Prevent text wrapping */
			overflow: hidden;
			/* Hide overflow text */
			text-overflow: ellipsis;
			/* Add ellipsis for overflow text */
		}
	
	
		/* Students tab */
		#students .table-container {
			max-height: 70vh;
			overflow-y: auto;
			border: 1px solid #dee2e6;
			border-radius: 0.375rem;
			padding: 0;
			/* Remove padding from container */
			background-color: white;
			margin-top: 15px;
			position: relative;
		}

		/* History tab */
		#history .table-container {
			max-height: 70vh;
			overflow-y: auto;
			border: 1px solid #dee2e6;
			border-radius: 0.375rem;
			padding: 0;
			/* Remove padding from container */
			background-color: white;
			margin-top: 15px;
			position: relative;
		}

		/* Sticky table headers - position at top of container */
		#students .table thead th,
		#history .table thead th {
			position: sticky;
			top: 0;
			/* Stick to top of scroll container */
			background-color: #f8f9fa !important;
			z-index: 100;
			border-bottom: 2px solid #dee2e6 !important;
			vertical-align: middle;
			font-weight: 600;
		}

		/* Add padding to table instead of container */
		#students .table,
		#history .table {
			margin-bottom: 0;
			border-collapse: separate;
			border-spacing: 0;
		}

		/* Add padding to table cells instead of container */
		#students .table th,
		#students .table td,
		#history .table th,
		#history .table td {
			padding: 12px 8px;
			/* Adjust padding as needed */
		}

		/* Optional: Add some padding to the first row for better spacing */
		#students .table tbody tr:first-child td,
		#history .table tbody tr:first-child td {
			border-top: none;
		}

		/* Keep search containers with proper spacing */
		#students .search-container,
		#history .search-container {
			margin-bottom: 15px;
			padding: 15px;
			/* Add padding to search container instead */
			background-color: white;
			border: 1px solid #dee2e6;
			border-radius: 0.375rem;
		}
	

	
		#messageModalBody>div {
			white-space: normal;
			/* no preserved spaces or line breaks */
			padding: 8px 5px;
			/* small, even padding */
			margin: 0;
			/* no top space */
			background-color: #f8f9fa;
			border: 1px solid #dee2e6;
			border-radius: 8px;
			color: #222;
			font-size: 16px;
			line-height: 1.8;
			text-align: center;
			direction: rtl;
			box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
		}

		/* optional scrollbar styling */
		#messageModalBody>div::-webkit-scrollbar {
			width: 8px;
		}

		#messageModalBody>div::-webkit-scrollbar-thumb {
			background-color: #bbb;
			border-radius: 4px;
		}

		#messageModalBody>div::-webkit-scrollbar-thumb:hover {
			background-color: #999;
		}

		/* Make ALL message modals wider */
		.message-modal .modal-dialog {
			max-width: 600px;
		}

		.student-notes-box {
			max-height: 400px;
			overflow-y: auto;
			padding: 15px;
			background-color: #f8f9fa;
			border: 1px solid #dee2e6;
			border-radius: 8px;
			white-space: pre-wrap;
			line-height: 1.6;
		}

		/* Custom tooltip styles */
		.action-buttons .btn {
			position: relative;
		}

		.action-buttons .btn::after {
			content: attr(data-tooltip);
			position: absolute;
			bottom: 100%;
			left: 50%;
			transform: translateX(-50%);
			background: #333;
			color: white;
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 12px;
			white-space: nowrap;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s, visibility 0.3s;
			z-index: 1000;
			pointer-events: none;
		}

		.action-buttons .btn:hover::after {
			opacity: 1;
			visibility: visible;
		}
	
	
		/* Try this for fully paid students */
		option[data-fully-paid="true"] {
			color: red !important;
			font-weight: bold;
		}

		/* Regular students - different color */
		option[data-fully-paid="false"] {
			color: blue !important;
		}