/*
 * hrappraisal-overrides.css
 * House palette and polish for the HR Appraisal System, layered on top of
 * the vendored RedStar Theme. Loaded last so it wins on equal specificity.
 * Colors are drawn from the real Tubman University crest (palm-tree green
 * and sunset gold).
 */

:root {
	--hr-green: #1c4d3a;
	--hr-green-dark: #123527;
	--hr-gold: #d9a441;
	--hr-gold-dark: #b8862f;

	/* RedStar Theme "custom" color hooks (see theme-color.css) */
	--sidebar-color: var(--hr-green);
	--sidebar-font-color: var(--hr-gold);
	--logo-color: var(--hr-green);
	--header-color: #ffffff;
}

/* Shared workspace: restrained surfaces, readable controls and consistent spacing. */
body.hr-workspace { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 14px; color: #263c35; background: #f5f7f6; }
body.hr-workspace .page-content { background: #f5f7f6; padding: 28px 30px 40px; min-height: calc(100vh - 110px); }
body.hr-workspace .page-bar { background: transparent; box-shadow: none; margin-bottom: 24px; padding: 0; }
body.hr-workspace .page-title { font-size: 26px; font-weight: 650; letter-spacing: -.6px; color: #193d30; line-height: 1.3; }
body.hr-workspace .page-breadcrumb { font-size: 12px; color: #687a72; }
body.hr-workspace .card, body.hr-workspace .card-box, body.hr-workspace .white-box { border: 1px solid #dde5e0 !important; border-radius: 12px; box-shadow: 0 2px 5px #173c2905 !important; background: white; margin-bottom: 22px; }
body.hr-workspace .card-body, body.hr-workspace .card .body, body.hr-workspace .white-box { padding: 24px; }
body.hr-workspace .card-head, body.hr-workspace .card-header { background: #fff; border-bottom: 1px solid #e6ece8; color: #244636; min-height: 54px; }
body.hr-workspace .card-head header { font-size: 16px; font-weight: 600; padding: 17px 24px; }
body.hr-workspace .form-control, body.hr-workspace .form-select { border: 1px solid #cbd7d0; border-radius: 7px; min-height: 42px; font-size: 14px; color: #263c35; box-shadow: none; background-color: white; }
body.hr-workspace .form-control:focus, body.hr-workspace .form-select:focus { border-color: #397c5e; box-shadow: 0 0 0 3px #397c5e20; }
body.hr-workspace .form-control[readonly], body.hr-workspace .form-control:disabled { background: #f2f5f3; color: #63776b; }
body.hr-workspace label { font-size: 13px; font-weight: 600; margin-bottom: 7px; }
body.hr-workspace textarea.form-control { min-height: 100px; line-height: 1.6; }
body.hr-workspace .btn { border-radius: 7px; padding: 10px 17px; font-size: 13px; font-weight: 600; box-shadow: none; text-transform: none; }
body.hr-workspace .btn-sm { padding: 6px 10px; }
body.hr-workspace .btn-primary { background: #245c43; border-color: #245c43; }
body.hr-workspace .btn-primary:hover { background: #194632; border-color: #194632; }
body.hr-workspace .table { font-size: 13px; color: #33483e; margin-bottom: 0; }
body.hr-workspace .table thead th { background: #edf3ef !important; color: #355443 !important; font-size: 12px; font-weight: 650; padding: 14px 16px; border-color: #dde6e0; vertical-align: middle; }
body.hr-workspace .table td { padding: 13px 16px; border-color: #e7ede9; vertical-align: middle; }
body.hr-workspace .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #fafcfb; }
body.hr-workspace .table-hover tbody tr:hover { background: #f3f8f5; }
body.hr-workspace .table-responsive { border-radius: 8px; }
body.hr-workspace .alert { border-radius: 8px; font-size: 14px; border: 1px solid; padding: 14px 18px; }
body.hr-workspace .alert-success { color: #245c43; background: #edf7f0; border-color: #c9e5d3; }
body.hr-workspace .alert-danger { color: #842f32; background: #fff2f1; border-color: #edc9c5; }
body.hr-workspace .alert-info { color: #345970; background: #f0f6fa; border-color: #d2e2ed; }
body.hr-workspace .page-header.navbar { box-shadow: 0 1px 0 #dce5df; background: white; }
body.hr-workspace .page-header.navbar .page-logo { height: 60px; display: flex; align-items: center; background: #193d30; padding: 10px 20px !important; }
body.hr-workspace .page-logo a { text-decoration: none; }
body.hr-workspace .page-logo .logo-default { font-size: 14px !important; letter-spacing: .1px; color: white; }
body.hr-workspace .sidebar-container, body.hr-workspace .sidemenu-container { background: #193d30; }
body.hr-workspace .sidemenu-container .sidemenu > li > a { margin: 3px 10px; border-radius: 6px; padding: 12px 14px; color: #d9e6df; font-size: 13px; }
body.hr-workspace .sidemenu-container .sidemenu > li.active > a { background: #315443; color: white; }
body.hr-workspace .sidemenu-container .sidemenu .sub-menu { background: transparent; }
body.hr-workspace .sidemenu-container .sidemenu .sub-menu > li > a { color: #c8d9ce; padding: 10px 18px 10px 48px; font-size: 13px; }
body.hr-workspace .sidemenu-container .sidemenu .sub-menu > li.active > a { color: #fff; background: #ffffff12; border-left: 3px solid #d9a441; }
body.hr-workspace .sidebar-user-panel { border-bottom: 1px solid #ffffff15; margin-bottom: 14px; }
body.hr-workspace .sidebar-user { padding: 16px 22px; text-align: left; }
body.hr-workspace .sidebar-user-picture, body.hr-workspace .sidebar-user .user-email { display: none; }
body.hr-workspace .sidebar-user .user-name { font-size: 14px; font-weight: 600; }
body.hr-workspace .sidebar-user .user-role { font-size: 11px; line-height: 1.6; }
body.hr-workspace .dash-hero { background: #fff; border: 1px solid #dde5e0; color: #193d30; box-shadow: none; padding: 25px; border-radius: 12px; }
body.hr-workspace .dash-hero p { color: #65776c; }
body.hr-workspace .dash-hero .avatar-circle { background: #edf4ef; border: 0; color: #245c43; }
body.hr-workspace .quick-link-card { border: 1px solid #dde5e0; box-shadow: none; border-radius: 10px; }
body.hr-workspace .quick-link-card:hover { border-color: #72a289; transform: none; box-shadow: none; }
body.hr-workspace .quick-link-card .quick-link-icon { background: #edf4ef; color: #397054; }
body.hr-workspace .pe-form .accordion-button { background: #fff; color: #244636; font-size: 15px; padding: 20px 24px; border-radius: 0 !important; box-shadow: none; }
body.hr-workspace .pe-form .accordion-button:not(.collapsed) { background: #edf4ef; color: #244636; }
body.hr-workspace .pe-form .accordion-button::after { filter: none; }
body.hr-workspace .pe-form .rating-select { width: 155px; }
body.hr-workspace .pe-form .table td:last-child { min-width: 210px; }
body.hr-workspace .appraisal-form .form-section-title { font-size: 17px; margin-top: 10px; border-bottom: 1px solid #e0e8e2; padding-bottom: 14px; }
body.hr-workspace .workflow-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
body.hr-workspace .workflow-steps > * { border: 1px solid #dde5e0; border-radius: 7px; background: white; color: #607468; padding: 10px 16px; font-size: 13px; text-decoration: none; }
body.hr-workspace .workflow-steps .current { color: #245c43; background: #eaf3ed; border-color: #a9c9b6; font-weight: 600; }
body.hr-workspace .page-footer { background: #f5f7f6; color: #718277; font-size: 12px; padding: 16px 30px; }
.hr-auth-page { background: #edf2ef !important; }
.hr-auth-card { border: 1px solid #dbe4de; box-shadow: 0 12px 45px #173c2910 !important; border-radius: 14px; }
.hr-auth-card-accent { background: #245c43 !important; height: 5px; }
body.hr-workspace :focus-visible { outline: 3px solid #b58b31; outline-offset: 3px; }
@media (max-width: 767px) {
    body.hr-workspace .page-content { padding: 20px 14px; }
    body.hr-workspace .page-title { font-size: 22px; }
    body.hr-workspace .card-body, body.hr-workspace .card .body { padding: 17px; }
    body.hr-workspace .page-breadcrumb { float: none !important; margin-top: 10px; }
    body.hr-workspace .workflow-steps > * { flex: 1 1 100%; }
    body.hr-workspace .dash-hero { padding: 20px; gap: 12px; }
    body.hr-workspace .dash-hero h2 { font-size: 20px; }
}
@media print {
    body.hr-workspace .page-header, body.hr-workspace .sidebar-container, body.hr-workspace .page-footer, body.hr-workspace .workflow-steps { display: none !important; }
    body.hr-workspace .page-content { margin: 0 !important; padding: 0 !important; background: white; }
    body.hr-workspace .card { box-shadow: none !important; }
}

/* ---- Sidebar logo box ----
   The vendor theme's .page-logo is a fixed 235x60px box sized for a short
   brand name or a logo image (see theme_style.css) - SITENAME here is the
   full "Appraisal Management System" string, which wraps to two lines at
   the vendor's 25px font-size (down to 16px via nav.php's own "fs-6" class,
   which still isn't enough) and gets clipped by the fixed height instead of
   just wrapping cleanly. Let the box grow to fit instead of clipping it. */
.page-header.navbar .page-logo {
	height: auto;
	min-height: 60px;
	padding: 10px 16px 10px 20px;
}
.page-header.navbar .page-logo .logo-default {
	display: block;
	height: auto;
	line-height: 1.2;
	font-size: 14px;
	font-weight: 700;
	white-space: normal;
}

/* ---- Sidebar contrast fixes ----
   The vendor theme's .custom-sidebar-color rules hardcode #555 text for
   default (non-active) links, tuned for a light custom color. Ours is a
   dark green, so those need to be light instead. */
.custom-sidebar-color .sidemenu-container .sidemenu > li > a,
.custom-sidebar-color .sidemenu-closed.sidemenu-container-fixed .sidemenu-container:hover .sidemenu > li > a {
	color: rgba(255, 255, 255, 0.82);
}
.custom-sidebar-color .sidemenu-container .sidemenu > li > a > i {
	color: rgba(255, 255, 255, 0.7);
}
.custom-sidebar-color .sidemenu-container .sidemenu > li.active > a,
.custom-sidebar-color .sidemenu-container .sidemenu > li.active.open > a {
	background-color: rgba(255, 255, 255, 0.08);
}
.custom-sidebar-color .sidemenu-container .sidemenu .sub-menu {
	background-color: rgba(0, 0, 0, 0.18);
}
.custom-sidebar-color .sidemenu-container .sidemenu .sub-menu > li > a {
	color: rgba(255, 255, 255, 0.68);
}
.custom-sidebar-color .sidemenu-container .sidemenu .sub-menu > li:hover > a,
.custom-sidebar-color .sidemenu-container .sidemenu .sub-menu > li.active > a,
.custom-sidebar-color .sidemenu-container .sidemenu .sub-menu > li.open > a {
	color: var(--hr-gold);
}
.custom-sidebar-color .user-panel,
.custom-sidebar-color .txtOnline {
	color: rgba(255, 255, 255, 0.85);
}
.custom-sidebar-color .sidebar-user .user-name {
	color: #fff;
}
.custom-sidebar-color .sidebar-user .user-email,
.custom-sidebar-color .sidebar-user .user-role {
	color: rgba(255, 255, 255, 0.65);
}

/* Brand mark used in place of the raster university logo in chrome/avatars */
.brand-mark {
	border-radius: 8px;
	background: var(--hr-green);
}
.avatar-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}
.custom-sidebar-color .avatar-circle {
	background: rgba(255, 255, 255, 0.12);
}
.avatar-circle-lg {
	width: 56px;
	height: 56px;
}
.avatar-circle-lg i {
	width: 26px;
	height: 26px;
}

/* ---- Dashboard stat tiles ---- */
.stat-tile {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(28, 77, 58, 0.08);
	padding: 20px 24px;
}
.stat-tile .stat-label {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #7a8699;
	margin-bottom: 6px;
}
.stat-tile .stat-value {
	font-size: 28px;
	font-weight: 700;
	color: var(--hr-green);
}

/* ---- Card/table polish ---- */
.card.shadow {
	border: none;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(28, 77, 58, 0.08) !important;
}

/* Functional styles (moved out of header.php's inline <style> block) */
button[disabled] {
	pointer-events: none;
	opacity: 0.6;
}

/* Fix Full Name column */
#departmentstaffstable th:first-child,
#departmentstaffstable td:first-child {
	white-space: nowrap;
	width: 200px;
	font-weight: 600;
}

/* Table beautification */
#departmentstaffstable {
	border-collapse: separate;
	border-spacing: 0 6px;
}
#departmentstaffstable tbody tr {
	background: #ffffff;
	border-radius: 6px;
}
#departmentstaffstable tbody tr td {
	padding: 12px 15px;
	background: #fff;
}
#departmentstaffstable tbody tr:hover {
	background: #f5f5f5;
}

/* Search bar style */
.table-search {
	border: 2px solid #0d6efd;
	border-radius: 8px;
	padding: 10px;
	font-size: 15px;
}

/* Pagination styling */
.custom-pagination .page-item.active .page-link {
	background: #0d6efd;
	border-color: #0d6efd;
	color: #fff;
}
.custom-pagination .page-link {
	border-radius: 6px;
	margin: 0 3px;
	font-weight: 600;
}

/* Force sidebar to overlay dashboard on mobile */
@media (max-width: 768px) {
	.sidebar-container {
		position: fixed;
		top: 0;
		left: -260px;
		width: 260px;
		height: 100vh;
		background: #fff;
		z-index: 1001;
		transition: left 0.3s ease;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.sidebar-container.open {
		left: 0;
	}
	.sidebar-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		z-index: 1000;
		display: none;
	}
	.sidebar-overlay.active {
		display: block;
	}
	body.menu-open {
		overflow: hidden;
	}
}

/* ---- Login / register card layout ---- */
.hr-auth-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 15% 15%, rgba(217, 164, 65, 0.14) 0%, transparent 45%),
		radial-gradient(circle at 85% 90%, rgba(217, 164, 65, 0.10) 0%, transparent 45%),
		linear-gradient(160deg, var(--hr-green) 0%, var(--hr-green-dark) 100%);
	padding: 24px;
}
.hr-auth-card {
	width: 100%;
	max-width: 410px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
	padding: 0 0 32px;
	overflow: hidden;
}
.hr-auth-card-accent {
	height: 6px;
	background: linear-gradient(90deg, var(--hr-gold) 0%, var(--hr-gold-dark) 100%);
}
.hr-auth-card-body {
	padding: 36px 36px 0;
}
.hr-auth-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 26px;
	text-align: center;
}
.hr-auth-brand img {
	width: 84px;
	height: 84px;
	margin-bottom: 16px;
	filter: drop-shadow(0 3px 6px rgba(28, 77, 58, 0.18));
}
.hr-auth-brand .hr-auth-org {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hr-gold-dark);
}
.hr-auth-brand .hr-auth-title {
	font-size: 21px;
	font-weight: 700;
	color: var(--hr-green);
	margin-top: 4px;
}
.hr-auth-brand .hr-auth-subtitle {
	font-size: 12.5px;
	color: #8a93a3;
	margin-top: 6px;
}
.hr-input-group {
	position: relative;
}
.hr-input-group .hr-input-icon {
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
	color: #9aa5b5;
	pointer-events: none;
}
.hr-input-group .form-control {
	padding-left: 42px;
}
.hr-auth-card .password-wrapper {
	position: relative;
}
.hr-auth-card .toggle-password {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	cursor: pointer;
	color: #888;
}
.hr-auth-card .form-control {
	border-color: #dde2ea;
	background: #f8f9fb;
}
.hr-auth-card .form-control:focus {
	background: #fff;
	border-color: var(--hr-gold);
	box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.18);
}
.hr-auth-card .btn-primary {
	background-color: var(--hr-green);
	border-color: var(--hr-green);
	letter-spacing: 0.02em;
	font-weight: 600;
}
.hr-auth-card .btn-primary:hover,
.hr-auth-card .btn-primary:focus {
	background-color: var(--hr-green-dark);
	border-color: var(--hr-green-dark);
}
.hr-auth-footer {
	text-align: center;
	margin-top: 22px;
	font-size: 11.5px;
	color: #9aa5b5;
}