@charset "utf-8";
/* CSS Document */

.badge {
			font-weight: 600;
			text-transform: uppercase;
			padding: 0.4em 0.75em;
		}

		.btn-outline-primary {
			border-radius: 0.5rem;
			transition: all 0.3s ease;
		}

		.btn-outline-primary:hover {
			background-color: #007bff;
			color: #fff;
			transform: scale(1.05);
		}
						
		.btn-outline-dark {
			border-radius: 0.5rem;
			transition: all 0.3s ease;
		}

		.btn-outline-dark:hover {
			background-color: #343a40;
			color: #fff;
			transform: scale(1.05);
		}
		
		.btn-outline-danger {
			border-radius: 0.5rem;
			transition: all 0.3s ease;
		}

		.btn-outline-danger:hover {
			background-color: #b02a37;
			color: #fff;
			transform: scale(1.05);
		}

		.card-header {
			font-weight: 600;
			letter-spacing: 0.5px;
		}
		
		.no-arrow {
			background-image: none !important;
		}
		
		.bg-success-subtle {
		  background-color: #e6f4ea !important;
		}
		.bg-warning-subtle {
		  background-color: #fff3cd !important;
		}
		.bg-danger-subtle {
		  background-color: #fdecea !important;
		}
		.bg-info-subtle {
		  background-color: #e8f4fd !important;
		}
		.bg-secondary-subtle {
		  background-color: #f2f2f2 !important;
		}
		
		/* Icon inside badge */
		.attendance-badge i {
			font-size: 1rem;
		}

		/* Colors */
		.badge-success { background-color: #1cc88a; color: #fff; }
		.badge-warning { background-color: #f6c23e; color: #fff; }
		.badge-danger  { background-color: #e74a3b; color: #fff; }
		.badge-dark    { background-color: #5a5c69; color: #fff; }
		
		.badge-present { background-color: #28a745; color: #fff; }
		.badge-late    { background-color: #ffc107; color: #212529; }
		.badge-absent  { background-color: #dc3545; color: #fff; }
	
		.badge-danger {
			background-color:#F9070B; important; /* Bootstrap danger red */
			color: white;
		}
	
		/* Base tab styles */
		.custom-pills .nav-link {
			border: none;
			background: none;
			color: #000;
			position: relative;
			padding-bottom: 8px;
			margin-right: 20px;
			border-radius: 0;
			transition: color 0.3s ease;
		}

		/* Remove blue background from active tab */
		.custom-pills .nav-link.active {
			background-color: transparent !important;
			color: #007bff;
			font-weight: 500;
		}

		/* Add bottom blue line to active tab */
		.custom-pills .nav-link.active::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			height: 3px;
			width: 100%;
			background-color: #007bff;
			border-radius: 2px;
		}
		
		.badge {
			font-weight: 600;
			border-radius: 12px;
			font-size: 0.85rem;
		}
		.progress {
			border-radius: 5px;
			overflow: hidden;
		}
		.progress-bar {
			transition: width 0.5s;
		}
		
		.chart-card {
								background: #ffffff;
								border-radius: 18px;
								padding: 18px;
								box-shadow: 0 4px 20px rgba(0,0,0,0.06);
								height: 100%;
							}

							.chart-container {
								height: 250px;
								align-content: center;
							}

							.chart-title {
								text-align: center;
								font-weight: 600;
								margin-bottom: 15px;
								color: #495057;
							}

							.chart-label {
								display: inline-block;
								padding: 6px 18px;
								border-radius: 50px;
								font-weight: 600;
								font-size: 14px;
								margin-bottom: 15px;
							}

							.chart-wrapper {
								display: flex;
								justify-content: center;
								align-items: center;
								height: 250px;
							}

							.chart-wrapper canvas {
								width: 250px !important;
								height: 250px !important;
							}

							/* Soft background colors */
							.bg-success-soft {
								background: rgba(25,135,84,0.12);
							}

							.bg-warning-soft {
								background: rgba(255,193,7,0.15);
							}

							.bg-primary-soft {
								background: rgba(0, 123, 255, 0.15);
							}

.latest-update-card .update-icon {
															font-size: 1.3rem;
															width: 36px;
															height: 36px;
															display: inline-flex;
															align-items: center;
															justify-content: center;
														}
														.reminder-item:hover {
															background: #f8f9fa;
															transition: 0.3s;
															border-radius: 6px;
														}
														.card-header {
															border-bottom: 2px solid #0d6efd;
														}



/* Teaching Load Encoding */
#AddNewTeaching table td {
					  white-space: normal !important;   /* allow wrapping */
					  word-break: break-word !important;
					  vertical-align: middle;
					  text-align: left;
					  font-size: 14px;
					  line-height: 1.4;
					}
					
					.subject-cell {
						cursor: pointer;
						text-align: center;
						vertical-align: middle;
					}

					.td-card {
						border: 1px solid #ccc;
						border-radius: 6px;
						padding: 4px 6px;
						transition: background 0.2s, transform 0.2s;
					}

					.td-card:hover {
						background-color: #f8f9fa;
						transform: scale(1.03);
					}

					.td-level-section {
						font-weight: bold;
						font-size: 0.9rem;
					}

					.td-subject {
						margin-top: 2px;
						font-size: 0.95rem;
					}

					.td-major {
						margin-top: 2px;
						font-size: 0.8rem;
						color: #555;
					}


.bg-gradient-warning {
			background: linear-gradient(135deg, #007bff, #0056b3);
		}
		.table td a:hover {
			background-color: #fff6e0;
			transform: scale(1.02);
		}
		.hover-shadow:hover {
			box-shadow: 0 3px 8px rgba(0,0,0,0.1);
		}
		
		./* Make table horizontally scrollable with sticky first column */
		.table td {
			white-space: normal;
			word-wrap: break-word;
		}

		.table tbody td a {
			display: block;
			padding: 0.5rem;
			border-radius: 0.375rem;
			transition: background-color 0.2s, box-shadow 0.2s;
			max-width: 100%;
		}

		.table tbody td a .fw-bold,
		.table tbody td a small {
			white-space: normal;
			word-break: break-word;
		}
		/* Responsive stacked table for very small screens (<576px) */
		@media (max-width: 575.98px) {
		  .table-responsive {
			overflow-x: visible;
		  }
		  table.table {
			border: 0;
		  }
		  table.table thead {
			display: none;
		  }
		  table.table tbody tr {
			display: block;
			margin-bottom: 1rem;
			border-bottom: 2px solid #dee2e6;
			padding-bottom: 1rem;
		  }
		  table.table tbody td {
			display: flex;
			justify-content: space-between;
			padding: 0.5rem 0;
			border: 0;
			border-bottom: 1px solid #dee2e6;
			position: relative;
		  }
		  table.table tbody td:last-child {
			border-bottom: 0;
		  }
		  table.table tbody td::before {
			content: attr(data-label);
			font-weight: 700;
			color: #212529;
		  }
		  /* Make the time column bold & color on small screens */
		  table.table tbody td:first-child {
			color: #0d6efd;
			font-weight: 700;
		  }
		  /* Schedule links inside cells become block again */
		  table.table tbody td a {
			padding: 0;
		  }
		}

/* ===== Learner List ===== */
								.learner-list {
									display: flex;
									flex-direction: column;
									gap: 1rem;
									overflow: visible; /* allows dropdowns to escape the container */
									position: relative;
								}

								/* ===== Learner Card ===== */
								.learner-card {
									display: flex;
									align-items: center;
									background: #fff;
									border-radius: 1rem;
									box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
									padding: 1rem;
									position: relative;
									min-height: 100px;
									transition: all 0.25s ease;
									overflow: visible;
									z-index: 1; /* baseline stacking context */
								}

								/* Card accent bar */
								.learner-card::before {
									content: '';
									position: absolute;
									left: 0;
									top: 0;
									bottom: 0;
									width: 6px;
									border-radius: 1rem 0 0 1rem;
									background: linear-gradient(180deg, var(--accent-start, #2196f3), var(--accent-end, #64b5f6));
									z-index: 0;
								}

								/* Ensures all child content stays above accent bar */
								.learner-card > * {
									position: relative;
									z-index: 2;
								}

								/* Hover effect */
								.learner-card:hover {
									transform: translateY(-4px);
									box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
									z-index: 100; /* bring card above others */
								}

								/* Profile image */
								.learner-profile {
									width: 55px;
									height: 55px;
									border-radius: 50%;
									object-fit: cover;
									border: 2px solid #e0e0e0;
									flex-shrink: 0;
								}

								/* Info block (name + meta + dropdown) */
								.learner-info-block {
									flex: 1;
									display: flex;
									flex-direction: column;
									margin-left: 0.75rem;
								}

								/* Row: name + dropdown */
								.learner-info {
									display: flex;
									justify-content: space-between;
									align-items: flex-start;
								}

								/* Learner name */
								.learner-info p {
									margin: 0;
									font-weight: 600;
									text-transform: capitalize;
									font-size: 1rem;
									color: #212529;
									line-height: 1.3;
								}

								/* Dropdown toggle */
								.dropdown {
									flex-shrink: 0;
									position: relative;
									z-index: 5000; /* ensure toggle sits above cards */
								}

								.dropdown a {
									text-decoration: none;
								}

								/* Dropdown menu fix */
								.dropdown-menu {
									position: absolute !important;
									right: 0;
									top: 100%;
									margin-top: 0.25rem;
									z-index: 9999 !important; /* ensures it is above all cards */
									box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
									border-radius: 0.5rem;
									overflow: visible;
								}

								/* Meta info */
								.learner-meta {
									font-size: 0.85rem;
									color: #6c757d;
									display: flex;
									align-items: center;
									gap: 0.5rem;
									margin-top: 0.3rem;
									flex-wrap: wrap;
								}

								.learner-meta i {
									font-size: 1rem;
								}

								/* Card hover highlight */
								.learner-card:hover .learner-info p {
									color: #000;
								}

								/* Responsive */
								@media (max-width: 768px) {
									.learner-card {
										flex-direction: column;
										align-items: flex-start;
									}

									.learner-info {
										width: 100%;
									}

									.dropdown-menu {
										left: 0;
										right: auto;
									}
								}


/* ===== Modern Minimal Dashboard Cards ===== */
								.dashboard-cards {
									display: flex;
									flex-wrap: wrap;
									gap: 1rem;
								}

								.dashboard-card {
									flex: 1 1 calc(25% - 1rem);
									background: #ffffff;
									border-radius: 1rem;
									padding: 1.5rem 1.2rem;
									box-shadow: 0 6px 15px rgba(0,0,0,0.08);
									transition: transform 0.3s ease, box-shadow 0.3s ease;
									display: flex;
									flex-direction: column;
									justify-content: space-between;
								}

								.dashboard-card:hover {
									transform: translateY(-5px);
									box-shadow: 0 12px 25px rgba(0,0,0,0.12);
								}

								.card-header {
									display: flex;
									align-items: center;
									gap: 0.8rem;
								}

								.card-header i {
									font-size: 2rem;
									padding: 0.5rem;
									border-radius: 0.5rem;
									color: #fff;
								}

								.card-title {
									font-size: 0.9rem;
									font-weight: 600;
									color: #6c757d;
									text-transform: uppercase;
								}

								.card-value {
									font-size: 2rem;
									font-weight: 700;
									color: #343a40;
									margin-top: 1rem;
								}

								/* Category Colors */
								.card-regular i { background: #0d6efd; }
								.card-transfer i { background: #fd7e14; }
								.card-balik i { background: #e83e8c; }
								.card-total i { background: #28a745; }

								/* Responsive */
								@media (max-width: 992px) {
									.dashboard-card { flex: 1 1 calc(50% - 1rem); }
								}
								@media (max-width: 576px) {
									.dashboard-card { flex: 1 1 100%; }
								}


.zoom-overlay {
									position: fixed;
									top: 0; left: 0;
									width: 100%; height: 100%;
									background-color: rgba(0,0,0,0.8);
									display: flex;
									justify-content: center;
									align-items: center;
									z-index: 9999;
								}
								.zoom-overlay img {
									max-width: 90%;
									max-height: 90%;
									border-radius: 8px;
								}

								.zoomable-image {
								  cursor: zoom-in;
								}