/* EHUB UI layer: design tokens + refinements on top of AdminLTE/Bootstrap 4.
   Loaded after the theme, so it only overrides what it needs to. */

:root {
	--eh-primary: #2a327d;
	--eh-primary-soft: #eef0fb;
	--eh-accent: #007bff;
	--eh-surface: #ffffff;
	--eh-bg: #f4f6fb;
	--eh-border: #e3e7ef;
	--eh-text: #2b3040;
	--eh-muted: #6b7385;
	--eh-radius: 10px;
	--eh-radius-sm: 6px;
	--eh-shadow-sm: 0 1px 2px rgba(20, 30, 70, .06), 0 1px 3px rgba(20, 30, 70, .08);
	--eh-shadow-md: 0 4px 14px rgba(20, 30, 70, .10);
	--eh-ease: .18s ease;
}

body { color: var(--eh-text); -webkit-font-smoothing: antialiased; }
.content-wrapper { background: var(--eh-bg); }

/* Header */
.main-header.navbar { border-bottom: 1px solid var(--eh-border); box-shadow: var(--eh-shadow-sm); }
.main-header .navbar-nav > span { font-weight: 600; color: var(--eh-primary); font-size: 1.05rem; }
.user-menu .user-image { width: 2rem; height: 2rem; object-fit: cover; }

/* Sidebar */
.main-sidebar { box-shadow: var(--eh-shadow-md) !important; }
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link { border-radius: var(--eh-radius-sm); margin: 1px 6px; transition: background-color var(--eh-ease), color var(--eh-ease); }
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active { background: var(--eh-primary-soft); color: var(--eh-primary); font-weight: 600; box-shadow: none; }
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link:hover:not(.active) { background: #f5f6fa; }

/* Cards */
.card { border: 1px solid var(--eh-border); border-radius: var(--eh-radius); box-shadow: var(--eh-shadow-sm); transition: box-shadow var(--eh-ease); }
.card:hover { box-shadow: var(--eh-shadow-md); }
.card-header { background: var(--eh-surface); border-bottom: 1px solid var(--eh-border); border-radius: var(--eh-radius) var(--eh-radius) 0 0; }
.card-title { font-weight: 600; color: var(--eh-text); }
.small-box, .info-box { border-radius: var(--eh-radius); box-shadow: var(--eh-shadow-sm); }

/* Buttons & forms */
.btn { border-radius: var(--eh-radius-sm); font-weight: 500; transition: transform var(--eh-ease), box-shadow var(--eh-ease), background-color var(--eh-ease); }
.btn:not(:disabled):hover { box-shadow: var(--eh-shadow-sm); transform: translateY(-1px); }
.form-control, .custom-select, .select2-container--default .select2-selection--single { border-radius: var(--eh-radius-sm); border-color: var(--eh-border); }
.form-control:focus, .custom-select:focus { border-color: var(--eh-accent); box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .15); }
label { font-weight: 600; color: var(--eh-text); }
:focus-visible { outline: 2px solid var(--eh-accent); outline-offset: 2px; }

/* Tables */
.table thead th { background: #f8f9fc; color: var(--eh-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--eh-border); border-top: 0; white-space: nowrap; }
.table td { vertical-align: middle; border-color: var(--eh-border); }
.table-hover tbody tr:hover { background: var(--eh-primary-soft); }
.dataTables_wrapper .dataTables_filter input { border-radius: var(--eh-radius-sm); }
.page-item.active .page-link { background: var(--eh-primary); border-color: var(--eh-primary); }

/* Modals, badges, alerts */
.modal-content { border: 0; border-radius: var(--eh-radius); box-shadow: var(--eh-shadow-md); }
.modal-header { border-bottom: 1px solid var(--eh-border); }
.badge { font-weight: 600; letter-spacing: .02em; }
.alert { border-radius: var(--eh-radius-sm); border: 0; box-shadow: var(--eh-shadow-sm); }

/* Password strength message (change-password dialog) */
.strength-message { color: red; }

/* Notification dropdown (low session alerts) */
.notification-dropdown { width: 420px; max-height: 600px; overflow-y: auto; padding: 0; border: 1px solid var(--eh-border); border-radius: var(--eh-radius); box-shadow: var(--eh-shadow-md); }
.notification-dropdown .dropdown-header { padding: 8px; font-size: 14px; font-weight: 600; background: #f8f9fa; border-bottom: 1px solid #dee2e6; }
.notification-card { padding: 14px 16px; background: #fff; transition: background-color .2s ease; }
.notification-card:hover { background-color: #f8f9fa; }
.notification-icon { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; margin-right: 12px; }
.notification-icon.bg-warning { background-color: #ffc107; }
.notification-content { flex: 1; min-width: 0; }
.student-name { font-size: 15px; font-weight: 600; color: #343a40; margin-bottom: 4px; }
.notification-content .small { line-height: 1.4; }
.session-warning { display: inline-block; background: #fff3cd; color: #856404; border: 1px solid #ffeeba; border-radius: 4px; padding: 4px 8px; font-size: 12px; font-weight: 500; }
.notification-actions { display: flex; gap: 8px; }
.notification-actions .btn { font-size: 12px; }
.notification-dropdown .dropdown-footer { padding: 12px; text-align: center; font-weight: 500; color: #007bff; background: #f8f9fa; }
.notification-dropdown .dropdown-footer:hover { background: #e9ecef; }
.navbar-badge { font-size: 10px; font-weight: 600; }

@media (max-width: 576px) {
	.notification-dropdown { width: 320px; max-width: calc(100vw - 20px); }
	.notification-actions { padding-left: 0; flex-direction: column; }
	.notification-actions .btn { width: 100%; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------
   Dashboard (Home/Index)
   --------------------------------------------------------- */

/* KPI summary cards */
.eh-kpis { margin: 4px -7px 6px; }
.eh-kpis > [class*="col-"] { padding: 0 7px; margin-bottom: 12px; }
.eh-kpi { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 16px; background: var(--eh-surface); border: 1px solid var(--eh-border); border-radius: var(--eh-radius); box-shadow: var(--eh-shadow-sm); transition: box-shadow var(--eh-ease), transform var(--eh-ease); }
.eh-kpi:hover { box-shadow: var(--eh-shadow-md); transform: translateY(-1px); }
.eh-kpi-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; font-size: 1.15rem; }
.eh-kpi-value { font-size: 1.65rem; font-weight: 700; line-height: 1.1; color: var(--eh-text); }
.eh-kpi-label { font-size: .8rem; font-weight: 600; color: var(--eh-muted); text-transform: uppercase; letter-spacing: .04em; }
.eh-kpi-sub { font-size: .74rem; color: var(--eh-muted); }
.bg-soft-primary { background: #e8ecff; color: #2a327d; }
.bg-soft-success { background: #dff5ea; color: #0f8a5f; }
.bg-soft-info    { background: #e0f2fe; color: #0369a1; }
.bg-soft-danger  { background: #fde8ea; color: #c0283a; }

/* Collapsible widget headers (invoices, hours, reports) */
.card-header.eh-card-header { background: linear-gradient(135deg, var(--eh-primary), #3d49a8); color: #fff; padding: 8px 14px; border-bottom: 0; }
.eh-card-header .card-title { color: #fff; font-size: 1rem; }
.eh-card-header .btn-tool { color: rgba(255, 255, 255, .85); }

/* Section titles */
.view-header-title { color: var(--eh-primary); font-size: 1.15rem !important; font-variant-caps: normal !important; font-weight: 700; text-shadow: none !important; letter-spacing: .01em; }

/* Calendar */
.calend { border-radius: var(--eh-radius); overflow: hidden; box-shadow: var(--eh-shadow-sm); background: var(--eh-surface); }
.calend th { background: var(--eh-primary) !important; font-size: .74rem; letter-spacing: .08em; padding: 9px !important; }
.calendar-desktop th, .calendar-desktop td { border-color: var(--eh-border) !important; }
.calendar-day { transition: background-color var(--eh-ease); }
.calendar-day:hover { background: var(--eh-primary-soft) !important; }
.day-number { background: var(--eh-primary); box-shadow: none; }
.calendar-event { border: 1px solid var(--eh-border); border-radius: 8px; }
.calendar-week-header { border-radius: 8px; background: #f1f4fb; }

/* Day view: one card per session, status shown as a coloured edge */
.day-view .event-list li { list-style: none; background: var(--eh-surface) !important; color: var(--eh-text); border: 1px solid var(--eh-border); border-left: 4px solid var(--eh-muted); border-radius: var(--eh-radius-sm); padding: 9px 12px; margin: 8px 0; box-shadow: var(--eh-shadow-sm); transition: box-shadow var(--eh-ease); }
.day-view .event-list li:hover { box-shadow: var(--eh-shadow-md); }
.day-view .event-list li.bg-primary { border-left-color: #007bff; }
.day-view .event-list li.bg-success { border-left-color: #10b981; }
.day-view .event-list li.bg-danger  { border-left-color: #dc3545; }
.day-view .event-list li.eh-empty { border-left-color: var(--eh-border); text-align: center; padding: 28px 12px; color: var(--eh-muted); box-shadow: none; }
.day-view .event-list li.eh-empty i { display: block; margin-bottom: 8px; font-size: 1.8rem; opacity: .6; }

/* Filter row */
.small-input-group .input-group-text { background: #f1f4fb; border-color: var(--eh-border); color: var(--eh-muted); font-weight: 600; }

@media (max-width: 575px) {
	.eh-kpi { padding: 10px 12px; gap: 10px; }
	.eh-kpi-icon { flex-basis: 38px; width: 38px; height: 38px; font-size: 1rem; }
	.eh-kpi-value { font-size: 1.3rem; }
}
/* ---------------------------------------------------------
   Login page
   --------------------------------------------------------- */
.eh-login-bg {
	background: linear-gradient(135deg, #2a326b00, rgba(0, 123, 255, .75)), url('/dist/img/bg.svg') center / cover no-repeat;
	min-height: 100vh;
}
.eh-login { width: 400px; max-width: 92vw; }
.eh-login-card { border: 0; border-radius: 16px; box-shadow: 0 18px 50px rgba(10, 15, 50, .35); }
.eh-login-card .card-body { padding: 2rem 2rem 1.5rem; border-radius: 16px; }
.eh-login-logo { width: 150px; max-width: 60%; }
.eh-login-title { font-size: 1.5rem; font-weight: 700; text-align: center; margin: 0; color: var(--eh-text); }
.eh-login-sub { text-align: center; color: var(--eh-muted); margin-bottom: 1.25rem; }
.eh-login .input-group-text { background: #f1f4fb; border-color: var(--eh-border); color: var(--eh-muted); }
.eh-login .form-control { height: calc(2.4rem + 2px); }
.eh-login-btn { height: 2.6rem; font-weight: 600; margin-top: .5rem; background: var(--eh-primary); border-color: var(--eh-primary); }
.eh-login-btn:hover:not(:disabled) { background: #1f2666; border-color: #1f2666; }
.eh-login-help { margin: 1.1rem 0 0; font-size: .8rem; color: var(--eh-muted); text-align: center; }

/* ---------------------------------------------------------
   Shared polish for list / form pages (staff, leave, attendance, student, session)
   --------------------------------------------------------- */

/* Row actions are revealed on hover; touch screens have no hover, so keep them visible there */
@media (hover: none) {
	.btnsh { opacity: 1 !important; }
}
.btnsh { transition: opacity var(--eh-ease); }

/* Filter ("Search Parameters") cards get a quiet accent instead of a plain white bar */
.card.card-default > .card-header { border-left: 4px solid var(--eh-primary); }
.card.card-default > .card-header.eh-card-header { border-left: 0; }
.card-header[data-card-widget="collapse"] { cursor: pointer; }

/* Tables */
.table-striped tbody tr:nth-of-type(odd) { background-color: #fafbfe; }
.table-sm td, .table-sm th { padding: .5rem .6rem; }
table.dataTable thead th { border-bottom: 1px solid var(--eh-border) !important; }
.dataTables_wrapper .dataTables_info { color: var(--eh-muted); font-size: .8rem; }
.dataTables_wrapper .dt-buttons .btn { border-radius: var(--eh-radius-sm); margin-right: 4px; }
.dataTables_wrapper .dataTables_paginate .page-link { border-radius: var(--eh-radius-sm); margin: 0 2px; border-color: var(--eh-border); }

/* Status labels (approvals, requests, sessions) read as pills */
.badge.ft16 { font-size: .8rem !important; padding: .35em .75em; border-radius: 999px; }

/* Select2 matches the inputs */
.select2-container--default .select2-selection--single { height: calc(2.25rem + 2px); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 2.1rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 2.1rem; }

/* Dialogs and alerts */
.swal2-popup { border-radius: var(--eh-radius) !important; }
.modal-footer { border-top: 1px solid var(--eh-border); }

/* Sidebar user panel: tidy spacing instead of the inline overrides */
.user-panel .info span:first-child { font-weight: 600; }

/* Printing: hide navigation chrome */
@media print {
	.main-header, .main-sidebar, .btn-tool, .card-tools, .dt-buttons { display: none !important; }
	.content-wrapper { margin-left: 0 !important; background: #fff; }
	.card { box-shadow: none; border: 0; }
}
/* ---------------------------------------------------------
   Dark mode (body.dark-mode, toggled from the navbar)
   AdminLTE restyles its own components; this re-points the EHUB tokens
   and the few places that used fixed light colours.
   --------------------------------------------------------- */
.dark-mode {
	--eh-primary: #8f9bff;
	--eh-primary-soft: #262d4d;
	--eh-surface: #232a36;
	--eh-bg: #161b24;
	--eh-border: #343d4d;
	--eh-text: #e6e9f0;
	--eh-muted: #a0a9bb;
	--eh-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
	--eh-shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
}
.dark-mode .content-wrapper { background: var(--eh-bg); }
.dark-mode .main-header.navbar { background: var(--eh-surface); border-bottom-color: var(--eh-border); }
.dark-mode .main-header .navbar-nav > span { color: var(--eh-text); }
.dark-mode .main-header .nav-link { color: var(--eh-text); }
.dark-mode .main-sidebar { background: #1b212c; }
.dark-mode .brand-link { }
.dark-mode .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link { color: var(--eh-text); }
.dark-mode .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active { background: var(--eh-primary-soft); color: #fff; }
.dark-mode .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link:hover:not(.active) { background: #262e3b; }
.dark-mode .user-panel { background: var(--eh-surface) !important; border-bottom-color: var(--eh-border); }
.dark-mode .user-panel .info span:first-child { color: var(--eh-text) !important; }
.dark-mode .user-panel .info span { color: var(--eh-muted); }
.dark-mode .preloader { background: rgba(22, 27, 36, .9) !important; }

/* Cards, tables, forms */
.dark-mode .card, .dark-mode .card-header, .dark-mode .modal-content, .dark-mode .dropdown-menu { background-color: var(--eh-surface); color: var(--eh-text); border-color: var(--eh-border); }
.dark-mode .card.bg-transparent { background: transparent; }
.dark-mode .table thead th { background: #1d2430; color: var(--eh-muted); border-color: var(--eh-border); }
.dark-mode .table td, .dark-mode .table th { border-color: var(--eh-border); }
.dark-mode .table-striped tbody tr:nth-of-type(odd) { background-color: #202733; }
.dark-mode .table-hover tbody tr:hover { background: var(--eh-primary-soft); color: var(--eh-text); }
.dark-mode .form-control, .dark-mode .custom-select, .dark-mode .select2-container--default .select2-selection--single { background-color: #1b212c; color: var(--eh-text); border-color: var(--eh-border); }
.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--eh-text); }
.dark-mode .small-input-group .input-group-text, .dark-mode .input-group-text { background: #1d2430; color: var(--eh-muted); border-color: var(--eh-border); }
.dark-mode label { color: var(--eh-text); }
.dark-mode .card-header.eh-card-header { background: linear-gradient(135deg, #2c3570, #3b4694); }
.dark-mode .swal2-popup { background: var(--eh-surface); color: var(--eh-text); }

/* KPI tiles */
.dark-mode .bg-soft-primary { background: #272f55; color: #aab3ff; }
.dark-mode .bg-soft-success { background: #173a2e; color: #5fd8a6; }
.dark-mode .bg-soft-info    { background: #123a52; color: #6cc4f0; }
.dark-mode .bg-soft-danger  { background: #45222a; color: #ff8d9a; }

/* Notification dropdown */
.dark-mode .notification-dropdown .dropdown-header, .dark-mode .notification-dropdown .dropdown-footer { background: #1d2430; border-color: var(--eh-border); color: var(--eh-text); }
.dark-mode .notification-card { background: var(--eh-surface); }
.dark-mode .notification-card:hover { background: #2a3240; }
.dark-mode .student-name { color: var(--eh-text); }
.dark-mode .session-warning { background: #4a3d12; color: #ffd966; border-color: #6b5a1c; }

/* Dashboard calendar (colours were fixed light in Home/Index) */
.dark-mode .calend th { background: #2c3570 !important; }
.dark-mode .calendar-desktop th { background: #1d2430; color: var(--eh-muted); }
.dark-mode .calendar-desktop th, .dark-mode .calendar-desktop td { border-color: var(--eh-border) !important; }
.dark-mode .calendar-day, .dark-mode .calendar-day:nth-child(even) { background: var(--eh-surface) !important; }
.dark-mode .calendar-day:hover { background: var(--eh-primary-soft) !important; }
.dark-mode .calendar-event, .dark-mode .agenda-week, .dark-mode .agenda-week-content { background: #1b212c; border-color: var(--eh-border); color: var(--eh-text); }
.dark-mode .calendar-week-header, .dark-mode .agenda-week-header { background: #1d2430; color: var(--eh-muted); border-color: var(--eh-border); }
.dark-mode .agenda-day { border-color: var(--eh-border); }
.dark-mode .day-view .event-list li { color: var(--eh-text); }
.dark-mode .day-number { background: #3b4694; color: #fff; }

/* Login page stays as designed; charts keep their own palette */
/* Short pages: no grey strip under the content */
body.dark-mode, .dark-mode .wrapper, .dark-mode .main-footer { background-color: var(--eh-bg); }
.dark-mode .main-footer { border-top-color: var(--eh-border); color: var(--eh-muted); }

/* Day Schedule: the bg-primary/success/danger classes force white text (!important); the cards are light, so force readable text */
.day-view .event-list li,
.day-view .event-list li.bg-primary,
.day-view .event-list li.bg-success,
.day-view .event-list li.bg-danger { color: var(--eh-text) !important; }
.day-view .event-list li strong { color: var(--eh-text); font-weight: 700; }
.day-view .event-list li.bg-primary strong { color: #0b5ed7; }
.day-view .event-list li.bg-success strong { color: #0f8a5f; }
.day-view .event-list li.bg-danger strong  { color: #c0283a; }
.dark-mode .day-view .event-list li.bg-primary strong { color: #6cb2ff; }
.dark-mode .day-view .event-list li.bg-success strong { color: #5fd8a6; }
.dark-mode .day-view .event-list li.bg-danger strong  { color: #ff8d9a; }
/* ---------------------------------------------------------
   Page titles (moved out of inline styles so dark mode can recolour them)
   --------------------------------------------------------- */
.eh-page-title { font-size: 24px; font-variant-caps: petite-caps; color: var(--eh-primary); text-shadow: 0 0 10px rgba(42, 116, 182, .35); }
.dark-mode .eh-page-title { text-shadow: none; }
.dark-mode .view-header-title { color: var(--eh-primary) !important; }
.dark-mode .breadcrumb { background: transparent; }
.dark-mode .breadcrumb-item.active { color: var(--eh-muted); }

/* Dashboard calendar: tutor / subject / time use the tutor's palette colour inline, which can be too dark on a dark card.
   The coloured student bar still identifies the tutor. */
.dark-mode .calendar-event .event-tutor,
.dark-mode .calendar-event .event-subject,
.dark-mode .calendar-event .event-time { color: var(--eh-text) !important; }
.dark-mode .calendar-event .event-subject, .dark-mode .calendar-event .event-time { color: var(--eh-muted) !important; opacity: 1; }

/* Feedback page: session details panel and chat bubbles (inline light colours in the view) */
.dark-mode .eh-detail-panel { background: var(--eh-surface) !important; border-color: var(--eh-border) !important; box-shadow: var(--eh-shadow-sm) !important; }
.dark-mode .eh-detail-panel label { color: var(--eh-muted) !important; }
.dark-mode .eh-detail-panel div[style*="color"], .dark-mode .eh-detail-panel span[style*="color: #64748B"] { color: var(--eh-text) !important; }
.dark-mode .eh-detail-panel .form-control { background: #1b212c !important; color: var(--eh-text) !important; border-color: var(--eh-border) !important; }
.dark-mode .eh-detail-panel .form-control:disabled, .dark-mode .eh-detail-panel .form-control[readonly] { opacity: .85; }
.dark-mode .eh-detail-panel span[style*="#EFF6FF"] { background: #22305a !important; color: #9db8ff !important; }
.dark-mode .direct-chat-text { background: #1d2430 !important; border-color: var(--eh-border) !important; color: var(--eh-text) !important; }
.dark-mode .direct-chat-text::before, .dark-mode .direct-chat-text::after { border-right-color: var(--eh-border) !important; border-left-color: var(--eh-border) !important; }
.dark-mode .direct-chat-name { color: var(--eh-text); }
.dark-mode .btn-msg:hover { background: #2a3240 !important; }
.dark-mode .note-editor.note-frame, .dark-mode .note-editor .note-editing-area .note-editable { background: #1b212c; color: var(--eh-text); border-color: var(--eh-border); }
.dark-mode .note-editor .note-statusbar { background: #1d2430; border-top-color: var(--eh-border); }

/* Safety net: inline light backgrounds and dark slate/navy text used by individual pages */
.dark-mode [style*="background: #FFFFFF"], .dark-mode [style*="background:#FFFFFF"], .dark-mode [style*="background: #fff;"], .dark-mode [style*="background:#fff;"],
.dark-mode [style*="background: white"], .dark-mode [style*="background-color: white"], .dark-mode [style*="background-color:#fff"] { background-color: var(--eh-surface) !important; }
.dark-mode [style*="color: #0F172A"], .dark-mode [style*="color:#0F172A"], .dark-mode [style*="color: #1E293B"], .dark-mode [style*="color:#1E293B"],
.dark-mode [style*="color: #334155"], .dark-mode [style*="color:#334155"], .dark-mode [style*="color: #2a327d"], .dark-mode [style*="color:#2a327d"],
.dark-mode [style*="color: #2A327D"], .dark-mode [style*="color:#2A327D"], .dark-mode [style*="color: #475569"] { color: var(--eh-text) !important; }
/* Forgot / reset password pages */
.eh-login-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: .75rem; border-radius: 50%; background: #e8ecff; color: #2a327d; font-size: 1.6rem; }
.eh-login-icon-warn { background: #fff3cd; color: #a06a00; }
.eh-pw-rules { list-style: none; margin: -.25rem 0 1rem; padding: 0; font-size: .8rem; color: var(--eh-muted); }
.eh-pw-rules li { margin: 2px 0; }
.eh-pw-rules li i { width: 1.1rem; }
.eh-pw-rules li.met { color: #0f8a5f; }