/* =========================================================
 * ELMS additions on top of the AppDashboard template
 * All colours use the template variables so light & dark themes both work.
 * ========================================================= */
:root {
	--cal-sun-bg: #fde4e8;      --cal-sun-fg: #c0283f;
	--cal-hol-bg: #ffe9cc;      --cal-hol-fg: #a35a00;
	--cal-app-bg: #d6f5e8;      --cal-app-fg: #0b7a5e;
	--cal-pen-bg: #fff3c2;      --cal-pen-fg: #8a6a00;
	--cal-full-bg: #e5e9f0;     --cal-full-fg: #6b7787;
	--cal-sel-bg: var(--accent-color);
}
[data-theme=dark] {
	--cal-sun-bg: rgb(251 113 133 / 0.20);  --cal-sun-fg: #fda4b2;
	--cal-hol-bg: rgb(244 185 91 / 0.22);   --cal-hol-fg: #f8cf8a;
	--cal-app-bg: rgb(52 211 153 / 0.20);   --cal-app-fg: #7ee8bd;
	--cal-pen-bg: rgb(250 204 21 / 0.18);   --cal-pen-fg: #fde68a;
	--cal-full-bg: rgb(148 163 184 / 0.20); --cal-full-fg: #9aa8b9;
}

/* ---------- general ---------- */
.form-label.required:after { content: " *"; color: var(--danger-color); }
.nowrap { white-space: nowrap; }
.small-dates { font-size: 12.5px; line-height: 1.35; }
.text-negative { color: var(--danger-color) !important; font-weight: 600; }
.ledger-pos { color: var(--success-color); }
.ledger-neg { color: var(--danger-color); }
.check-col { width: 34px; }
.table td, .table th { vertical-align: middle; }
.table th { white-space: nowrap; }
.card-body.pt-3 { padding-top: var(--spacing-lg) !important; }
.card-title.pt-0 { margin-bottom: var(--spacing-md); }
.card .card-title + .table-responsive, .card h6.fw-bold { margin-top: .25rem; }
h6.fw-bold { color: var(--heading-color); }
.filter-bar .form-control, .filter-bar .form-select { font-size: 14px; }
.section { margin-bottom: var(--spacing-lg); }
.pagination { margin-bottom: 0; }
.otp-input { letter-spacing: 8px; font-size: 22px; text-align: center; }
.legend-dot { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 5px; border: 1px solid var(--border-color); }

/* ---------- header / sidebar ---------- */
.header-logo-mark img, .sidebar-logo-mark img, .footer-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.avatar-initials { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
	background: color-mix(in srgb, var(--accent-color), transparent 85%); color: var(--accent-color); font-weight: 700; font-size: 14px; flex-shrink: 0; }
.avatar-initials.avatar-lg { width: 52px; height: 52px; font-size: 18px; margin-bottom: 6px; }
.dropdown-header .avatar-initials { margin: 0 auto 6px; }
.nav-badge { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; text-align: center;
	background: var(--warning-color-light); color: var(--warning-color); }
.nav-link.active .nav-badge { background: rgb(255 255 255 / 0.25); color: #fff; }
body.sidebar-collapsed .nav-badge { display: none; }
.notification-item { text-decoration: none; color: inherit; }
.header-actions-mobile .mobile-menu-toggle { position: relative; }
.header-actions-mobile .mobile-menu-toggle .badge { position: absolute; top: 2px; right: 0; font-size: 10px; background: var(--danger-color); }

/* ---------- auth pages ---------- */
.auth-college-banner { margin-bottom: var(--spacing-md); }
.auth-college-banner img { width: 100%; max-height: 84px; object-fit: contain; border-radius: var(--radius-md); }
.auth-logo img { width: 36px; height: 36px; object-fit: contain; background: #fff; border-radius: 8px; padding: 2px; }
.auth-form .form-group { margin-bottom: var(--spacing-md); }
.auth-theme { color: var(--muted-color); text-decoration: none; }

/* ---------- stat & balance cards ---------- */
.widget-stat a.stretched-link { color: inherit; }
.bal-card { border-left: 4px solid var(--accent-color); }
.bal-card .big { font-size: 30px; font-weight: 700; color: var(--heading-color); line-height: 1; }
.bal-card.neg { border-left-color: var(--danger-color); }
.bal-card.neg .big { color: var(--danger-color); }
.bal-card .meta { font-size: 13px; color: var(--muted-color); text-align: right; line-height: 1.5; }
.year-heading { font-size: 1rem; font-weight: 600; color: var(--heading-color); margin: 0 0 var(--spacing-md); display: flex; align-items: center; gap: 8px; }

/* ---------- timeline / chips ---------- */
.timeline-mini { list-style: none; padding-left: 0; margin: 0; }
.timeline-mini li { padding: 4px 0 4px 22px; position: relative; font-size: 14px; }
.timeline-mini li:before { content: ""; position: absolute; left: 6px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--light-color); }
.timeline-mini li.done:before { background: var(--success-color); }
.timeline-mini li.bad:before { background: var(--danger-color); }
.timeline-mini li.wait:before { background: var(--warning-color); }
.date-chip { display: inline-block; background: var(--accent-color); color: #fff; border-radius: 14px; padding: 2px 10px; margin: 2px; font-size: 13px; }
.date-chip.cancel { background: var(--danger-color); text-decoration: line-through; }

/* ---------- colourful leave calendar (bootstrap-datepicker) ---------- */
.leave-cal .datepicker-inline { width: 100%; max-width: 440px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 10px; background: var(--card-bg); }
.leave-cal .datepicker table { width: 100%; }
.datepicker, .datepicker table tr td, .datepicker table tr th { color: var(--default-color); }
.datepicker table tr td, .datepicker table tr th { border-radius: 8px; }
.leave-cal .datepicker table tr td, .leave-cal .datepicker table tr th { height: 40px; font-size: 14px; }
.datepicker table tr td.day:hover, .datepicker table tr td.focused, .datepicker .datepicker-switch:hover,
.datepicker .prev:hover, .datepicker .next:hover, .datepicker tfoot tr th:hover { background: var(--table-hover-bg) !important; }
.datepicker table tr td.old, .datepicker table tr td.new, .datepicker table tr td.disabled, .datepicker table tr td.disabled:hover { color: var(--light-color) !important; background: transparent; }
.datepicker table tr td.today, .datepicker table tr td.today:hover { background: transparent !important; box-shadow: inset 0 0 0 2px var(--accent-color); color: var(--heading-color) !important; }
.datepicker table tr td.dp-sunday, .datepicker table tr td.dp-sunday:hover { background: var(--cal-sun-bg) !important; color: var(--cal-sun-fg) !important; font-weight: 600; cursor: not-allowed; }
.datepicker table tr td.dp-holiday, .datepicker table tr td.dp-holiday:hover { background: var(--cal-hol-bg) !important; color: var(--cal-hol-fg) !important; font-weight: 600; cursor: not-allowed; }
.datepicker table tr td.dp-approved, .datepicker table tr td.dp-approved:hover { background: var(--cal-app-bg) !important; color: var(--cal-app-fg) !important; font-weight: 600; }
.datepicker table tr td.dp-pending, .datepicker table tr td.dp-pending:hover { background: var(--cal-pen-bg) !important; color: var(--cal-pen-fg) !important; font-weight: 600; }
.datepicker table tr td.dp-full, .datepicker table tr td.dp-full:hover { background: var(--cal-full-bg) !important; color: var(--cal-full-fg) !important; text-decoration: line-through; cursor: not-allowed; }
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.highlighted,
.datepicker table tr td.active.active, .datepicker table tr td.active.highlighted:hover { background: var(--cal-sel-bg) !important; background-image: none !important; color: #fff !important; text-decoration: none; box-shadow: none; text-shadow: none; }
.datepicker-dropdown { background: var(--card-bg); border-color: var(--border-color); }
.cal-legend span { display: inline-block; margin: 0 12px 6px 0; font-size: 13px; color: var(--muted-color); }
.lg-sunday { background: var(--cal-sun-bg); } .lg-holiday { background: var(--cal-hol-bg); } .lg-approved { background: var(--cal-app-bg); }
.lg-pending { background: var(--cal-pen-bg); } .lg-full { background: var(--cal-full-bg); } .lg-selected { background: var(--cal-sel-bg); }

/* apply form: leave type | calendar on the right; phones: type, calendar, rest */
.apply-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "type cal" "rest cal"; grid-template-rows: auto 1fr; column-gap: 28px; align-items: start; }
.apply-grid .ag-type { grid-area: type; }
.apply-grid .ag-cal { grid-area: cal; }
.apply-grid .ag-rest { grid-area: rest; }
#chips { background: var(--input-bg); border-color: var(--input-border) !important; }
@media (max-width: 991px) {
	.apply-grid { grid-template-columns: 1fr; grid-template-areas: "type" "cal" "rest"; }
	.apply-grid .ag-cal { margin-bottom: 16px; }
}

/* ---------- admin month calendar ---------- */
.month-grid { table-layout: fixed; width: 100%; }
.month-grid th { text-align: center; }
.month-grid td { height: 110px; vertical-align: top; padding: 4px; font-size: 12px; overflow: hidden; }
.month-grid td .dnum { font-weight: 700; font-size: 13px; color: var(--heading-color); }
.month-grid td.sun { background: var(--cal-sun-bg); }
.month-grid td.hol { background: var(--cal-hol-bg); }
.month-grid td.other { background: var(--background-color); }
.month-grid td.today { box-shadow: inset 0 0 0 2px var(--accent-color); }
.month-grid .who { display: block; border-radius: 4px; padding: 0 4px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.month-grid .who.ap { background: var(--cal-app-bg); color: var(--cal-app-fg); }
.month-grid .who.pe { background: var(--cal-pen-bg); color: var(--cal-pen-fg); }
.month-grid .hname { display: block; color: var(--cal-hol-fg); font-weight: 600; }

/* ---------- year wizard preview ---------- */
.sticky-head thead { position: sticky; top: 0; z-index: 1; background: var(--table-header-bg); }
.confirm-box { background: var(--background-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--spacing-md); }

/* ---------- print ---------- */
@media print {
	.header, .sidebar, .sidebar-overlay, .footer, .back-to-top, .no-print, .mobile-header-menu, .page-header .btn { display: none !important; }
	.main { margin: 0 !important; padding: 0 !important; }
	.main-content { padding: 0 !important; }
	.card { box-shadow: none !important; border: none !important; }
}
@media (max-width: 576px) {
	.month-grid td { height: 70px; font-size: 10px; }
}
.card-body .card-title { margin-bottom: var(--spacing-md); }
.card-header .card-title { margin-bottom: 0; }

/* ---------- simple-datatables: compact rows, visible sort arrows in both themes ---------- */
.datatable-wrapper .datatable-table.table-sm thead th,
.datatable-wrapper .datatable-table.table-sm tbody td { padding: .5rem .65rem; }
.datatable-wrapper .datatable-table thead th .datatable-sorter { padding-right: 16px; color: inherit; }
.datatable-sorter::before { border-top-color: currentColor; }
.datatable-sorter::after { border-bottom-color: currentColor; }
.datatable-wrapper .datatable-table thead th.datatable-ascending::after,
.datatable-wrapper .datatable-table thead th.datatable-descending::after { display: none; }
.datatable-top, .datatable-bottom { padding: 0 0 var(--spacing-sm); }
.datatable-bottom { padding-top: var(--spacing-sm); }
/* template sets .no-print{display:block} on screen; keep rows and buttons in their normal layout */
@media screen {
	.row.no-print { display: flex; }
	.btn.no-print { display: inline-block; }
}
.table td .btn-sm { padding: .2rem .45rem; }
/* striped / hover rows keep readable text in dark mode */
.table { --bs-table-color: var(--default-color); --bs-table-striped-color: var(--default-color); --bs-table-hover-color: var(--default-color); --bs-table-active-color: var(--default-color); }
/* show / hide password button */
.pw-group .form-control { border-right: 0; }
.pw-group .pw-eye { border-color: var(--input-border); background: var(--input-bg); color: var(--muted-color); border-left: 0; padding: 0 .85rem; }
.pw-group .pw-eye:hover, .pw-group .pw-eye:focus { color: var(--accent-color); background: var(--input-bg); }
.pw-group .form-control:focus + .pw-eye { border-color: var(--input-focus-border); }
/* forgot password tabs */
.forgot-tabs .nav-link { font-size: 14px; font-weight: 500; }
.table.wrap-head th { white-space: normal; vertical-align: middle; }
@media (max-width: 576px) { .table.wrap-head th, .table.wrap-head td { font-size: 12px; padding: .35rem .3rem; } }