/* ============================================================================
 * adminlte-compat.css
 * Maps the app's legacy class vocabulary (.portlet box, .operation, .btn green,
 * CGridView table.items, CActiveForm .row, .submit, .detail-view, flash) onto
 * the AdminLTE 3 / Bootstrap 4 look. Loaded AFTER adminlte.min.css.
 * The legacy css/form.css and css/main.css are NOT loaded on authenticated
 * pages, so we mostly style up from AdminLTE defaults.
 * Accent: blue (#007bff primary, matches the old #4B8DF8).
 * ==========================================================================*/

/* ---- Portlet box -> SmartHR-style card ----------------------------------- */
.portlet.box {
	background: #fff;
	border: 0;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
	margin-bottom: 1.25rem;
	width: auto;
	float: none;
	overflow: hidden;
}
.portlet.box > .portlet-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem;
	background: #fff;
	border-bottom: 1px solid #eef0f2;
	color: #1f2937;
	font-size: 1.05rem;
	font-weight: 600;
	padding: .9rem 1.25rem;
	margin: 0;
}
.portlet.box > .portlet-title .box-title { font-size: 1.05rem; font-weight: 600; }
.portlet.box > .portlet-title > i { color: #3b82f6; margin-right: .4rem; }
.portlet.box.green > .portlet-title > i { color: #22c55e; }

/* portlet body padding: anything after the title/operation gets spacing */
.portlet.box > .form,
.portlet.box > .detail-content,
.portlet.box > .grid-view,
.portlet.box > table { padding: 1.25rem; }
.portlet.box > .grid-view { padding: .75rem 1.25rem 1.25rem; }

/* ---- Operation toolbar (action links in the card header) ----------------- */
.operation { float: none; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.portlet.box > .operation { padding: .6rem 1.25rem; background: #f8f9fa; border-bottom: 1px solid rgba(0,0,0,.08); }

/* ---- Buttons: legacy classes -> AdminLTE .btn looks ----------------------- */
.btn.green, .btnblue, .btnyellow, .btnCan, .btnback, .submit,
.operation a, .grid-view a.update, .grid-view a.delete, .grid-view a.view {
	display: inline-block;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid transparent;
	padding: .375rem .75rem;
	font-size: .9rem;
	line-height: 1.5;
	border-radius: .25rem;
	text-decoration: none;
	color: #fff;
	float: none;
	margin: 0;
	width: auto;
	height: auto;
	text-shadow: none;
}
.btn.green:hover, .btnblue:hover, .btnyellow:hover, .btnCan:hover, .btnback:hover,
.submit:hover, .operation a:hover, .grid-view a.update:hover, .grid-view a.delete:hover { text-decoration: none; opacity: .9; color: #fff; }

.btn.green { background-color: #28a745; border-color: #28a745; }   /* success */
.btnblue, .submit, .operation a.btn.green ~ a { }                  /* (specificity helpers) */
.btnblue { background-color: #007bff; border-color: #007bff; }     /* primary */
.submit  { background-color: #007bff; border-color: #007bff; }     /* primary */
.btnyellow { background-color: #ffc107; border-color: #ffc107; color: #212529; } /* warning */
.btnyellow:hover { color: #212529; }
.btnCan, .btnback { background-color: #6c757d; border-color: #6c757d; } /* secondary */
.operation a { background-color: #007bff; border-color: #007bff; }     /* default action = primary */
.operation a.btn.green { background-color: #28a745; border-color: #28a745; }
.operation a.btnyellow { background-color: #ffc107; border-color: #ffc107; color: #212529; }
.operation a.btnblue { background-color: #007bff; border-color: #007bff; }

/* CGridView row action buttons (MyCButtonColumn) */
.grid-view a.update { background-color: #17a2b8; border-color: #17a2b8; padding: .2rem .45rem; } /* info */
.grid-view a.delete { background-color: #dc3545; border-color: #dc3545; padding: .2rem .45rem; } /* danger */
.grid-view a.view   { background-color: #6c757d; border-color: #6c757d; padding: .2rem .45rem; }

/* ---- Forms (CActiveForm) -------------------------------------------------- */
.form { margin: 0; }
/* Horizontal forms (app-wide): label to the LEFT of the field.
   The form is capped so fields don't stretch across very wide screens. */
.portlet .form { max-width: 1180px; }
.portlet .form .nav-tabs { display: flex !important; flex-wrap: wrap; justify-content: flex-start !important; width: 100%; padding-left: 0; margin-left: 0; text-align: left; }
.portlet .form .nav-tabs .nav-item { float: none !important; }
.portlet .form .row, .portlet .row { display: flex; flex-wrap: wrap; align-items: baseline; float: none; width: auto; margin: 0 0 .9rem 0; column-gap: .85rem; }
.portlet .form .row:has(.row-left) { display: flex; column-gap: 1.75rem; align-items: baseline; }
.portlet .form .row > label, .portlet .row > label {
	flex: 0 0 190px; max-width: 190px;
	text-align: right;
	padding-top: .4rem;
	font-weight: 600;
	margin-bottom: 0;
	color: #495057;
}
/* employee-style two-column form: two horizontal label/field pairs per row.
   inline-block (not flex) here — robust against the legacy float rules. */
.portlet .form .row-left, .portlet .form .row-right { display: block !important; float: none !important; flex: 1 1 0; width: auto !important; min-width: 0; vertical-align: top; margin: 0; box-sizing: border-box; }
.portlet .form .row-left > label, .portlet .form .row-right > label { display: inline-block !important; width: 110px !important; max-width: 110px; text-align: right; padding-right: .6rem; vertical-align: middle; float: none !important; margin: 0 !important; font-weight: 600; color: #495057; }
.portlet .form .row-left > input, .portlet .form .row-left > select, .portlet .form .row-left > textarea,
.portlet .form .row-right > input, .portlet .form .row-right > select, .portlet .form .row-right > textarea {
	display: inline-block !important; width: calc(100% - 120px) !important; float: none !important; vertical-align: middle; min-width: 0; }
.portlet .form input[type=text],
.portlet .form input[type=password],
.portlet .form input[type=email],
.portlet .form input[type=number],
.portlet .form input[type=date],
.portlet .form textarea,
.portlet .form select,
.portlet .row input[type=text],
.portlet .row input[type=password],
.portlet .row input[type=email],
.portlet .row input[type=date],
.portlet .row textarea,
.portlet .row select {
	display: block;
	width: 100%;
	max-width: 520px;
	padding: .375rem .75rem;
	font-size: .9rem;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	box-sizing: border-box;
}
.portlet .form input[type=checkbox], .portlet .form input[type=radio] { width: auto; display: inline-block; }
.portlet .form .row.buttons, .portlet .row.buttons {
	border-top: 1px solid rgba(0,0,0,.08);
	padding-top: 1rem;
	margin-top: .5rem;
}
.portlet .row.buttons .submit, .portlet .row.buttons .btnCan { margin-right: .5rem; }
.note { color: #6c757d; font-size: .85rem; margin-bottom: 1rem; }
.required, span.required { color: #dc3545; }
.errorMessage, div.errorMessage { color: #dc3545; font-size: .82rem; margin-top: .25rem; }
.error input, .error textarea, .error select, input.error, textarea.error, select.error { border-color: #dc3545 !important; }
.status { display: none; }
/* horizontal-form field sizing: fields take the remaining width beside their label.
   min-width:0 + width:auto lets the field shrink to sit on the same line as the label. */
.portlet .form .row > input[type=text], .portlet .form .row > input[type=password], .portlet .form .row > input[type=email],
.portlet .form .row > input[type=number], .portlet .form .row > input[type=date], .portlet .form .row > select, .portlet .form .row > textarea { flex: 1 1 240px; width: auto; min-width: 0; }
.portlet .form .row-left input, .portlet .form .row-left select, .portlet .form .row-left textarea,
.portlet .form .row-right input, .portlet .form .row-right select, .portlet .form .row-right textarea { flex: 1 1 120px; width: auto; min-width: 0; }
/* validation messages / notes wrap onto their own line under the field */
.portlet .form .row > .errorMessage, .portlet .form .row-left .errorMessage, .portlet .form .row-right .errorMessage,
.portlet .form .row > .note { flex-basis: 100%; }
.portlet .form .row > .errorMessage { margin-left: 200px; }
.portlet .form .row-left > .errorMessage, .portlet .form .row-right > .errorMessage { margin-left: 124px; }
/* the buttons row aligns its actions after the label gutter */
.portlet .form .row.buttons, .portlet .row.buttons { padding-left: 200px; }

/* ---- CGridView tables ----------------------------------------------------- */
.grid-view { padding: 0; }
.grid-view table.items {
	width: 100%;
	margin: 0 0 .75rem 0;
	border-collapse: collapse;
	background: #fff;
	color: #212529;
}
.grid-view table.items th, .grid-view table.items td {
	padding: .7rem .9rem;
	border-top: 1px solid #f1f3f5;
	text-align: left;
	vertical-align: middle;
}
.grid-view table.items thead th {
	border-top: 0;
	border-bottom: 1px solid #e9ecef;
	background: #f8f9fb;
	color: #6b7280 !important;
	font-weight: 600;
	font-size: .76rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	text-align: left !important;
}
.grid-view table.items tbody tr:nth-of-type(odd) { background-color: transparent; }
.grid-view table.items tbody tr:hover { background-color: #f8fafc; }
.grid-view table.items tbody tr { border-bottom: 1px solid #f1f3f5; }
.grid-view table.items thead th a { color: #343a40 !important; text-decoration: none; }
.grid-view .filters input, .grid-view .filters select {
	width: 100%;
	padding: .3rem .5rem;
	font-size: .85rem;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	box-sizing: border-box;
}
.grid-view .summary { color: #6c757d; font-size: .85rem; margin-bottom: .5rem; }
.grid-view .empty { color: #6c757d; padding: 1rem 0; }

/* AjaxList / yii pager -> bootstrap pagination look */
.grid-view .pager, ul.yiiPager, .AjaxList, ul.pager {
	display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: .75rem 0 0; gap: .15rem;
}
.grid-view .pager li, ul.yiiPager li, ul.pager li { display: inline-block; }
.grid-view .pager a, .grid-view .pager span, ul.yiiPager a, ul.yiiPager span, ul.pager a, ul.pager span {
	display: inline-block;
	padding: .35rem .65rem;
	border: 1px solid #dee2e6;
	border-radius: .25rem;
	color: #007bff;
	text-decoration: none;
	background: #fff;
	font-size: .85rem;
}
.grid-view .pager .selected a, ul.yiiPager .selected a, ul.pager .selected a { background: #007bff; border-color: #007bff; color: #fff; }
.grid-view .pager .hidden a, ul.yiiPager .hidden a { color: #adb5bd; }

/* ---- CDetailView ---------------------------------------------------------- */
.detail-content, .detail-bg { padding: 0; }
table.detail-view {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
}
table.detail-view th, table.detail-view td {
	padding: .6rem .75rem;
	border: 1px solid #dee2e6;
	text-align: left;
	vertical-align: top;
}
table.detail-view th { background: #f8f9fa; width: 220px; font-weight: 600; color: #495057; }

/* ---- Flash messages -> alerts -------------------------------------------- */
.flash-success, .flash-error, .flash-notice, #statusMsg .flash-success, #statusMsg .flash-error {
	padding: .75rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: .25rem;
}
.flash-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.flash-error   { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.flash-notice  { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }

/* ---- Breadcrumbs (CBreadcrumbs) ------------------------------------------ */
.breadcrumbs, .menu-bar .breadcrumbs { font-size: .85rem; color: #6c757d; margin: 0; }
.breadcrumbs a { color: #007bff; text-decoration: none; }

/* ---- Dashboard legacy boxes (.dashbox / .box-*) -> cards ------------------ */
.dashbox {
	background: #fff;
	border: 1px solid rgba(0,0,0,.125);
	border-radius: .25rem;
	box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
	margin-bottom: 1rem;
	overflow: hidden;
}
.dashbox .box-header, .dashbox .box-head {
	background: #f8f9fa;
	border-bottom: 1px solid rgba(0,0,0,.125);
	border-top: 3px solid #007bff;
	padding: .75rem 1.25rem;
	font-weight: 500;
}
.dashbox.green .box-header { border-top-color: #28a745; }
.dashbox.orange .box-header { border-top-color: #fd7e14; }
.dashbox .box-content { padding: 1.25rem; }

/* Old Blueprint-style grid shims so un-edited dashboard markup survives */
.span-19, .span-24, .container { width: auto; float: none; }

/* Misc: keep tables inside cards from overflowing */
.content-wrapper .table-responsive { overflow-x: auto; }

/* ---- Login page (loginLayout.php + site/login.php) ----------------------- */
.login-card-body input[type=text],
.login-card-body input[type=password] {
	display: block;
	width: 100%;
	padding: .55rem .75rem;
	margin-bottom: 1rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	box-sizing: border-box;
}
.login-card-body .new-status { display: none; }
.login-card-body .submit {
	display: block;
	width: 100%;
	background-color: #007bff;
	border-color: #007bff;
	color: #fff;
	padding: .55rem .75rem;
	font-size: 1rem;
	border-radius: .25rem;
	border: 1px solid #007bff;
	cursor: pointer;
}
.login-card-body .submit:hover { opacity: .9; }
.login-card-body .forgotbox { text-align: right; margin: -.25rem 0 .75rem; font-size: .85rem; }
.login-card-body .forgotbox a { color: #007bff; text-decoration: none; }
.login-card-body .captchaArea { margin-bottom: 1rem; }
.login-card-body .captchaArea img { vertical-align: middle; }
.login-card-body .block-error,
.login-card-body .errorMessage { color: #dc3545; font-size: .85rem; text-align: center; margin-bottom: .5rem; }

/* ==========================================================================
 * UI/UX polish pass (branding, forms, tables, responsive)
 * ==========================================================================*/

/* ---- Brand logo fallback icon (when org has no logo) --------------------- */
.brand-image-icon {
	float: left;
	font-size: 1.3rem;
	line-height: 33px;
	margin: -2px .5rem 0 .8rem;
	color: #fff;
	opacity: .9;
}
.brand-link { white-space: nowrap; overflow: hidden; }

/* ---- Inputs: focus ring + consistent sizing ------------------------------ */
.portlet .form input[type=text],
.portlet .form input[type=password],
.portlet .form input[type=email],
.portlet .form input[type=number],
.portlet .form input[type=date],
.portlet .form textarea,
.portlet .form select,
.portlet .row input[type=text],
.portlet .row input[type=password],
.portlet .row input[type=email],
.portlet .row input[type=date],
.portlet .row textarea,
.portlet .row select { transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; max-width: 100%; }
.portlet .form input:focus,
.portlet .form select:focus,
.portlet .form textarea:focus,
.portlet .row input:focus,
.portlet .row select:focus,
.portlet .row textarea:focus {
	border-color: #80bdff;
	outline: 0;
	box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
}
.portlet .form .row.error label, .portlet .row.error label { color: #dc3545; }

/* ---- Responsive two-column form layout (>=768px) -------------------------
 * CActiveForm wraps rows in a nested <form>, so we lay out the .row elements
 * with inline-block (robust to nesting) rather than flex on a fixed parent.
 * Textarea rows and the button bar span full width. */
@media (min-width: 768px) {
	.portlet .form .row {
		display: inline-block;
		width: calc(50% - 14px);
		vertical-align: top;
		margin: 0 10px 1rem 0;
		box-sizing: border-box;
	}
	.portlet .form .row:has(textarea),
	.portlet .form .row.buttons,
	.portlet .form fieldset .row { display: block; width: 100%; margin-right: 0; }
}

/* ---- Operation toolbar + form buttons: tidy spacing ---------------------- */
.operation a, .row.buttons .submit, .row.buttons .btnCan, .row.buttons a { margin: 0 !important; }
.row.buttons { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.portlet.box > .operation { gap: .5rem; }

/* ---- Tables: rounded, tighter, sticky header, responsive scroll ---------- */
.grid-view table.items, table.detail-view, .content .table { border-radius: .25rem; overflow: hidden; }
.grid-view table.items thead th, .content .table thead th { position: sticky; top: 0; z-index: 1; }
.content .table td, .content .table th { vertical-align: middle; }

/* horizontal scroll for wide tables on small screens (no markup change) */
@media (max-width: 767px) {
	.portlet .detail-content,
	.portlet .grid-view,
	.portlet > table,
	.card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.grid-view table.items, .card-body .table, .detail-content .table { min-width: 560px; }
	/* stack form rows full width on phones */
	.portlet .form > .row { flex-basis: 100% !important; max-width: 100% !important; }
	/* roomier tap targets */
	.btn, .btn.green, .btnblue, .btnyellow, .btnCan, .operation a, .submit { padding: .5rem .9rem; }
	.content-header h1 { font-size: 1.4rem; }
}

/* ---- Cards: subtle hover lift + consistent headings ---------------------- */
.portlet.box, .card, .small-box { transition: box-shadow .15s ease-in-out; }
.portlet.box:hover, .card:hover { box-shadow: 0 2px 6px rgba(0,0,0,.15), 0 0 1px rgba(0,0,0,.125); }
.card-header .card-title { font-size: 1.05rem; font-weight: 500; }

/* ---- Badges (used in grids/portals) -------------------------------------- */
.badge { font-size: .78rem; padding: .35em .6em; font-weight: 600; }

/* ---- Empty / muted state ------------------------------------------------- */
.text-muted.text-center { color: #9aa0a6 !important; font-style: italic; }

/* ---- Detail view: zebra + responsive label column ------------------------ */
table.detail-view tr:nth-of-type(odd) td { background: #fcfcfd; }
@media (max-width: 575px) { table.detail-view th { width: 40%; } }

/* ---- Print-friendly: hide chrome when printing an invoice ---------------- */
@media print {
	.main-sidebar, .main-header, .main-footer, .content-header, .operation { display: none !important; }
	.content-wrapper { margin-left: 0 !important; }
}

/* ==========================================================================
 * SmartHR-style dashboard widgets (scoped under .smarthr)
 * ==========================================================================*/
.smarthr .card, .smarthr .shr-card { border: 0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); margin-bottom: 1.25rem; background:#fff; }
.smarthr .shr-card-head { display:flex; align-items:center; justify-content:space-between; padding: 1rem 1.25rem .5rem; }
.smarthr .shr-card-head h3 { font-size: 1rem; font-weight: 600; margin: 0; color:#1f2937; }
.smarthr .shr-card-body { padding: .5rem 1.25rem 1.25rem; }

/* Profile card */
.smarthr .shr-profile { border-radius: 12px; overflow: hidden; background:#fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom:1.25rem; }
.smarthr .shr-profile-head { height: 86px; background: linear-gradient(135deg, #1d3557 0%, #007bff 100%); }
.smarthr .shr-profile-body { padding: 0 1.25rem 1.25rem; text-align: center; margin-top: -46px; }
.smarthr .shr-avatar { width: 92px; height: 92px; border-radius: 50%; border: 4px solid #fff; object-fit: cover; background:#e9ecef; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.smarthr .shr-avatar-icon { width:92px;height:92px;border-radius:50%;border:4px solid #fff;background:#007bff;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:2.4rem;box-shadow:0 2px 6px rgba(0,0,0,.15); }
.smarthr .shr-profile-body h4 { margin: .6rem 0 .15rem; font-size: 1.15rem; font-weight: 600; color:#1f2937; }
.smarthr .shr-profile-body .shr-role { color:#6b7280; font-size:.85rem; margin-bottom:.5rem; }
.smarthr .shr-meta { list-style:none; padding:0; margin:1rem 0 0; text-align:left; }
.smarthr .shr-meta li { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid #f1f3f5; font-size:.88rem; }
.smarthr .shr-meta li:last-child { border-bottom:0; }
.smarthr .shr-meta .k { color:#6b7280; }
.smarthr .shr-meta .v { color:#1f2937; font-weight:600; }

/* Stat tiles */
.smarthr .shr-tile { display:flex; align-items:center; gap:.9rem; background:#fff; border-radius:12px; padding:1.1rem 1.25rem; box-shadow:0 1px 3px rgba(0,0,0,.08); margin-bottom:1.25rem; }
.smarthr .shr-tile .ic { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#fff; flex:0 0 48px; }
.smarthr .shr-tile .ic.blue{background:#3b82f6;} .smarthr .shr-tile .ic.green{background:#22c55e;}
.smarthr .shr-tile .ic.amber{background:#f59e0b;} .smarthr .shr-tile .ic.violet{background:#8b5cf6;}
.smarthr .shr-tile .ic.teal{background:#0f766e;} .smarthr .shr-tile .ic.red{background:#ef4444;}
.smarthr .shr-tile .ic.orange{background:#fd7e14;} .smarthr .shr-tile .ic.pink{background:#ec4899;}
.smarthr .shr-tile .ic.dark{background:#334155;}
.smarthr .shr-tile .num { font-size:1.5rem; font-weight:700; line-height:1.1; color:#1f2937; }
.smarthr .shr-tile .lbl { color:#6b7280; font-size:.82rem; }

/* Soft section heading + list rows */
.smarthr .shr-list { list-style:none;margin:0;padding:0; }
.smarthr .shr-list li { display:flex; align-items:center; justify-content:space-between; padding:.7rem 0; border-bottom:1px solid #f1f3f5; }
.smarthr .shr-list li:last-child{border-bottom:0;}
.smarthr .shr-stars i { color:#f59e0b; }
.smarthr .btn-shr { background:#1d3557; color:#fff; border:0; border-radius:8px; padding:.55rem 1rem; font-size:.85rem; display:inline-block; text-decoration:none; }
.smarthr .btn-shr:hover { background:#142844; color:#fff; }
.smarthr .shr-soon { background:#fff7ed; color:#9a3412; border:1px dashed #fdba74; border-radius:8px; padding:.5rem .75rem; font-size:.82rem; }

/* ---- SmartHR welcome banner ---------------------------------------------- */
.smarthr .shr-welcome { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
	background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.08); padding:1rem 1.25rem; margin-bottom:1.25rem; }
.smarthr .shr-welcome .who { display:flex; align-items:center; gap:.9rem; }
.smarthr .shr-welcome .av { width:54px;height:54px;border-radius:50%;background:#1d3557;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem; }
.smarthr .shr-welcome h3 { margin:0;font-size:1.15rem;font-weight:700;color:#1f2937; }
.smarthr .shr-welcome .sub { color:#6b7280;font-size:.86rem; }
.smarthr .shr-welcome .sub b { color:#fd7e14; }
.smarthr .shr-actions .btn-o { background:#fd7e14;border:0;color:#fff;border-radius:8px;padding:.5rem .9rem;font-size:.82rem;text-decoration:none;display:inline-block; }
.smarthr .shr-actions .btn-w { background:#fff;border:1px solid #d1d5db;color:#374151;border-radius:8px;padding:.5rem .9rem;font-size:.82rem;text-decoration:none;display:inline-block; }

/* ---- SmartHR stat cards (icon + label + X/Y value + link) ----------------- */
.smarthr .shr-stat { background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.08); padding:1.1rem 1.25rem; margin-bottom:1.25rem; height:calc(100% - 1.25rem); }
.smarthr .shr-stat .ic { width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.05rem;margin-bottom:.7rem; }
.smarthr .shr-stat .lbl { color:#6b7280;font-size:.82rem;margin-bottom:.15rem; }
.smarthr .shr-stat .val { font-size:1.45rem;font-weight:700;color:#1f2937;line-height:1.1; }
.smarthr .shr-stat .val small { font-size:.95rem;color:#9aa0a6;font-weight:600; }
.smarthr .shr-stat a.more { font-size:.78rem;color:#3b82f6;text-decoration:none;display:inline-block;margin-top:.5rem; }
.smarthr .shr-stat .shr-trend { display:inline-block;margin-top:.45rem;font-size:.72rem;font-weight:600;padding:.12rem .5rem;border-radius:20px; }
.smarthr .shr-stat .shr-trend i { font-size:.62rem;margin-right:.15rem; }
.smarthr .shr-stat .shr-trend.up { color:#15803d;background:#dcfce7; }
.smarthr .shr-stat .shr-trend.down { color:#b91c1c;background:#fee2e2; }
.smarthr .shr-stat .shr-trend.flat { color:#6b7280;background:#f1f3f5; }
body.dark-mode .smarthr .shr-stat .shr-trend.up { color:#4ade80;background:rgba(34,197,94,.15); }
body.dark-mode .smarthr .shr-stat .shr-trend.down { color:#f87171;background:rgba(239,68,68,.15); }
body.dark-mode .smarthr .shr-stat .shr-trend.flat { color:#9aa6c4;background:rgba(255,255,255,.06); }
.smarthr .ic.c-orange{background:#fd7e14;} .smarthr .ic.c-teal{background:#0f766e;} .smarthr .ic.c-blue{background:#3b82f6;}
.smarthr .ic.c-pink{background:#ec4899;} .smarthr .ic.c-violet{background:#8b5cf6;} .smarthr .ic.c-red{background:#ef4444;}
.smarthr .ic.c-green{background:#22c55e;} .smarthr .ic.c-dark{background:#1f2937;}

/* progress / status stacked bar */
.smarthr .shr-stack { display:flex; height:10px; border-radius:6px; overflow:hidden; margin:.5rem 0 1rem; }
.smarthr .shr-stack span { display:block; height:100%; }
.smarthr .shr-legend { font-size:.82rem; color:#6b7280; }
.smarthr .shr-legend .dot { display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.35rem;vertical-align:middle; }

/* SmartHR card tables: light uppercase header, soft row separators */
.smarthr .shr-card .table thead th, .smarthr .table thead th {
	background:#f8f9fb; color:#6b7280; font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.03em;
	border-bottom:1px solid #e9ecef; border-top:0; padding:.6rem .9rem;
}
.smarthr .shr-card .table td { padding:.65rem .9rem; border-top:1px solid #f1f3f5; vertical-align:middle; }
.smarthr .shr-card .table tbody tr:hover { background:#f8fafc; }

/* ---- SmartHR employee-details page --------------------------------------- */
.smarthr .emp-card { background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.08); margin-bottom:1.25rem; overflow:hidden; }
.smarthr .emp-head { height:96px; background:linear-gradient(135deg,#fb923c 0%,#f59e0b 100%); }
.smarthr .emp-body { padding:0 1.25rem 1rem; text-align:center; margin-top:-46px; }
.smarthr .emp-avatar { width:92px;height:92px;border-radius:50%;border:4px solid #fff;background:#1f2937;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:2.2rem;box-shadow:0 2px 6px rgba(0,0,0,.15); }
.smarthr .emp-body h4 { margin:.6rem 0 .35rem; font-size:1.15rem; font-weight:700; color:#1f2937; }
.smarthr .emp-badges .badge { font-weight:500; margin:0 .15rem; }
.smarthr .emp-meta { list-style:none; padding:0; margin:1rem 0 0; text-align:left; }
.smarthr .emp-meta li { display:flex; justify-content:space-between; align-items:center; padding:.55rem 0; border-bottom:1px solid #f1f3f5; font-size:.86rem; }
.smarthr .emp-meta li:last-child { border-bottom:0; }
.smarthr .emp-meta .k { color:#6b7280; } .smarthr .emp-meta .k i { width:18px; color:#9aa0a6; }
.smarthr .emp-meta .v { color:#1f2937; font-weight:600; text-align:right; }
.smarthr .emp-btns { display:flex; gap:.6rem; margin-top:1rem; }
.smarthr .emp-btns a { flex:1; border-radius:8px; padding:.6rem; text-align:center; text-decoration:none; font-size:.85rem; font-weight:500; }
.smarthr .emp-btns .b-dark { background:#1f2937; color:#fff; }
.smarthr .emp-btns .b-orange { background:#fd7e14; color:#fff; }
.smarthr .emp-section { padding:1.1rem 1.25rem; border-top:1px solid #f1f3f5; }
.smarthr .emp-section h5 { font-size:.92rem; font-weight:700; color:#1f2937; margin:0 0 .85rem; }
.smarthr .emp-kv { display:flex; justify-content:space-between; align-items:flex-start; padding:.45rem 0; font-size:.86rem; }
.smarthr .emp-kv .k { color:#6b7280; } .smarthr .emp-kv .k i { width:18px; color:#9aa0a6; }
.smarthr .emp-kv .v { color:#1f2937; font-weight:600; text-align:right; max-width:60%; }
.smarthr .nav-tabs .nav-link { color:#6b7280; font-weight:500; }
.smarthr .nav-tabs .nav-link.active { color:#fd7e14; border-bottom:2px solid #fd7e14; }

/* ==========================================================================
 * Light SmartHR sidebar
 * ==========================================================================*/
.sidebar-light-primary { background:#fff; box-shadow:0 0 24px rgba(0,0,0,.05); }
.sidebar-light-primary .brand-link { border-bottom:1px solid #eef0f2; }
.sidebar-light-primary .brand-text { color:#1f2937 !important; }
.sidebar-light-primary .brand-image-icon { color:#3b82f6 !important; }
/* section headers: divider above each (except the first) for clean grouping */
.sidebar-light-primary .nav-header { color:#9aa0a6; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; padding:.85rem 1.1rem .35rem; margin-top:.35rem; border-top:1px solid #f0f2f5; }
.sidebar-light-primary .nav-header:first-child { border-top:0; margin-top:0; }
/* top-level rows: tighter, rounded, with icon column */
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link { color:#3f4754; border-radius:8px; margin:2px .55rem; padding:.5rem .8rem; font-weight:500; font-size:.92rem; position:relative; }
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link:hover { background:#eff6ff; color:#2563eb; }
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active { background:#2563eb !important; color:#fff !important; box-shadow:0 6px 14px rgba(37,99,235,.28); }
.sidebar-light-primary .nav-sidebar .nav-link .nav-icon { color:#7a8493; width:1.4rem; font-size:.95rem; }
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active .nav-icon { color:#fff; }
/* a parent stays subtly tinted while its submenu is open, so the open group is obvious */
.sidebar-light-primary .nav-sidebar > .nav-item.menu-open > .nav-link:not(.active) { background:#f4f7fe; color:#2563eb; }
.sidebar-light-primary .nav-sidebar > .nav-item.menu-open > .nav-link:not(.active) .nav-icon { color:#2563eb; }
/* sub-items: icon column + denser rows + left accent on the active item */
.sidebar-light-primary .nav-treeview { padding:.1rem 0 .25rem; }
.sidebar-light-primary .nav-treeview .nav-link { color:#5b6472; font-size:.86rem; padding:.4rem .8rem .4rem 2.35rem; margin:1px .55rem; border-radius:7px; position:relative; }
.sidebar-light-primary .nav-treeview .nav-link:hover { background:#f3f4f6; color:#2563eb; }
.sidebar-light-primary .nav-treeview .nav-link.active { background:#eef4ff; color:#1d4ed8; font-weight:600; }
.sidebar-light-primary .nav-treeview .nav-link.active::before { content:""; position:absolute; left:1.15rem; top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:50%; background:#2563eb; }
.sidebar-light-primary .nav-treeview .nav-sub-icon { color:#aab2bf; font-size:.78rem; width:1.1rem; }
.sidebar-light-primary .nav-treeview .nav-link:hover .nav-sub-icon,
.sidebar-light-primary .nav-treeview .nav-link.active .nav-sub-icon { color:#2563eb; }
.sidebar-light-primary .nav-treeview .nav-icon.fa-circle { font-size:.45rem; color:#cbd5e1; }
.brand-image-icon { color:#3b82f6; }

/* ==========================================================================
 * Dark mode (toggled by .dark-mode on <body>)
 * ==========================================================================*/
body.dark-mode .content-wrapper, body.dark-mode .main-footer { background:#151a2e; color:#cbd5e1; }
body.dark-mode .main-footer { border-top-color:#2d3650; }
body.dark-mode .main-header.navbar { background:#252b42 !important; border-bottom:1px solid #2d3650 !important; }
body.dark-mode .main-header .nav-link, body.dark-mode .navbar .username, body.dark-mode .navbar-light .nav-link { color:#cbd5e1 !important; }

/* sidebar -> dark */
body.dark-mode .main-sidebar { background:#252b42 !important; box-shadow:none; }
body.dark-mode .sidebar-light-primary .brand-link { border-color:#2d3650; }
body.dark-mode .sidebar-light-primary .brand-text { color:#e8edf7 !important; }
body.dark-mode .sidebar-light-primary .nav-header { color:#7b86a1; border-top-color:#2d3650; }
body.dark-mode .sidebar-light-primary .nav-sidebar .nav-link { color:#aab4cf; }
body.dark-mode .sidebar-light-primary .nav-sidebar .nav-link .nav-icon { color:#7b86a1; }
body.dark-mode .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link:hover { background:#2d3650; color:#fff; }
body.dark-mode .sidebar-light-primary .nav-sidebar > .nav-item.menu-open > .nav-link:not(.active) { background:#2a3150; color:#dbe3f5; }
body.dark-mode .sidebar-light-primary .nav-sidebar > .nav-item.menu-open > .nav-link:not(.active) .nav-icon { color:#7aa2ff; }
body.dark-mode .sidebar-light-primary .nav-treeview .nav-link { color:#8b96b3; }
body.dark-mode .sidebar-light-primary .nav-treeview .nav-link:hover { background:#2d3650; color:#fff; }
body.dark-mode .sidebar-light-primary .nav-treeview .nav-link.active { background:#2d3650 !important; color:#fff !important; }
body.dark-mode .sidebar-light-primary .nav-treeview .nav-link.active::before { background:#7aa2ff; }
body.dark-mode .sidebar-light-primary .nav-treeview .nav-sub-icon { color:#6b7693; }
body.dark-mode .sidebar-light-primary .nav-treeview .nav-link:hover .nav-sub-icon,
body.dark-mode .sidebar-light-primary .nav-treeview .nav-link.active .nav-sub-icon { color:#7aa2ff; }
body.dark-mode .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active { background:#2563eb !important; color:#fff !important; }

/* surfaces / cards */
body.dark-mode .portlet.box, body.dark-mode .smarthr .shr-card, body.dark-mode .smarthr .emp-card,
body.dark-mode .smarthr .shr-tile, body.dark-mode .smarthr .shr-stat, body.dark-mode .smarthr .shr-welcome,
body.dark-mode .login-card-body, body.dark-mode .card, body.dark-mode .dashbox {
	background:#252b42 !important; color:#cbd5e1; border:1px solid #313a59 !important;
	box-shadow:0 1px 3px rgba(0,0,0,.45);
}
/* header sits one shade lighter than its body, with a divider, so the card reads as a card */
body.dark-mode .portlet.box > .portlet-title, body.dark-mode .shr-card-head,
body.dark-mode .portlet.box > .operation { background:#2a3150 !important; color:#e8edf7; border-bottom:1px solid #313a59 !important; }
/* form labels need explicit contrast in dark mode (CActiveForm renders plain <label>) */
body.dark-mode label, body.dark-mode .form label, body.dark-mode .detail-content label { color:#aeb8d4 !important; }
body.dark-mode .form h4, body.dark-mode .detail-content h4 { color:#e8edf7 !important; border-color:#313a59 !important; }
body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode .box-title,
body.dark-mode .num, body.dark-mode .v, body.dark-mode .emp-meta .v, body.dark-mode .emp-kv .v,
body.dark-mode .shr-tile .num, body.dark-mode .card-title, body.dark-mode .val,
body.dark-mode .shr-stat .val, body.dark-mode .emp-body h4, body.dark-mode .shr-welcome h3,
body.dark-mode .shr-card-body strong, body.dark-mode .detail-content strong { color:#e8edf7 !important; }
body.dark-mode .val small { color:#8b96b3 !important; }
body.dark-mode .lbl, body.dark-mode .text-muted, body.dark-mode .k, body.dark-mode .emp-meta .k,
body.dark-mode .emp-kv .k, body.dark-mode .note, body.dark-mode .shr-role, body.dark-mode .shr-legend { color:#8b96b3 !important; }

/* tables */
body.dark-mode .grid-view table.items, body.dark-mode .table, body.dark-mode table.detail-view { color:#cbd5e1; }
body.dark-mode .grid-view table.items thead th, body.dark-mode .smarthr .table thead th,
body.dark-mode .content .table thead th, body.dark-mode table.detail-view th { background:#1f2438 !important; color:#8b96b3 !important; border-color:#2d3650 !important; }
body.dark-mode .grid-view table.items td, body.dark-mode .table td, body.dark-mode table.detail-view td,
body.dark-mode .grid-view table.items tbody tr, body.dark-mode .emp-meta li, body.dark-mode .emp-kv,
body.dark-mode .shr-list li, body.dark-mode .emp-section, body.dark-mode .row.buttons { border-color:#2d3650 !important; }
body.dark-mode .grid-view table.items tbody tr:hover, body.dark-mode .table tbody tr:hover { background:#2b324d !important; }
body.dark-mode table.detail-view tr:nth-of-type(odd) td { background:#222740; }

/* forms */
body.dark-mode input[type=text], body.dark-mode input[type=password], body.dark-mode input[type=email],
body.dark-mode input[type=number], body.dark-mode select, body.dark-mode textarea,
body.dark-mode .portlet .form input, body.dark-mode .portlet .form select, body.dark-mode .portlet .form textarea,
body.dark-mode .login-card-body input { background:#1f2438 !important; color:#e8edf7 !important; border-color:#2d3650 !important; }
/* the grid table itself is opaque white by default — let the dark card show through */
body.dark-mode .grid-view table.items { background:transparent !important; color:#cbd5e1; }
body.dark-mode .grid-view table.items th, body.dark-mode .grid-view table.items td { border-top-color:#313a59 !important; }
body.dark-mode .grid-view table.items thead th { background:#2a3150 !important; color:#9aa6c4 !important; border-bottom-color:#3a4566 !important; }
/* grid body text a touch brighter so names/values read clearly on dark */
body.dark-mode .grid-view table.items tbody td, body.dark-mode .grid-view table.items tbody td a { color:#dbe2f0 !important; }
/* override the legacy style.css zebra (tr.odd #f6f7f9 / tr.even #FFF) so rows match the dark card */
body.dark-mode .grid-view table.items tr.odd { background:transparent !important; }
body.dark-mode .grid-view table.items tr.even { background:rgba(255,255,255,.025) !important; }
/* sortable column header links keep a dark #343a40 by default — lighten for dark mode */
body.dark-mode .grid-view table.items thead th a { color:#9aa6c4 !important; }
/* filter inputs: proper field look (was near-black) */
body.dark-mode .grid-view .filters input, body.dark-mode .grid-view .filters select { background:#2a3150 !important; color:#e8edf7 !important; border:1px solid #3a4566 !important; }
body.dark-mode .grid-view .filters input::placeholder { color:#7b86a1; }
body.dark-mode .grid-view .filters input:focus, body.dark-mode .grid-view .filters select:focus { border-color:#5b78c9 !important; box-shadow:0 0 0 2px rgba(91,120,201,.25); outline:none; }

/* Highcharts -> dark aware (CSS !important overrides Highcharts' inline SVG fills) */
body.dark-mode .highcharts-axis-labels text, body.dark-mode .highcharts-xaxis-labels text,
body.dark-mode .highcharts-yaxis-labels text, body.dark-mode .highcharts-legend-item text,
body.dark-mode .highcharts-axis-title { fill:#aab4cf !important; color:#aab4cf !important; }
body.dark-mode .highcharts-grid-line { stroke:#2b3350 !important; }
body.dark-mode .highcharts-axis-line, body.dark-mode .highcharts-tick { stroke:#3a4566 !important; }
body.dark-mode .highcharts-data-label text { fill:#dbe2f0 !important; }
body.dark-mode .highcharts-tooltip-box { fill:#2a3150 !important; stroke:#3a4566 !important; }
body.dark-mode .highcharts-tooltip text { fill:#e8edf7 !important; }

/* ==========================================================================
 * Legacy style.css surfaces -> dark mode (so every legacy page is consistent).
 * style.css hard-codes light backgrounds on these containers; neutralise them
 * so the dark card / content-wrapper shows through. One place, app-wide.
 * ==========================================================================*/
body.dark-mode form,
body.dark-mode .form,
body.dark-mode .grid-view,
body.dark-mode #pushobj #content { background:transparent !important; }
body.dark-mode .portlet.box.blue { background:#252b42 !important; border-color:#313a59 !important; }
body.dark-mode .report-table { background:transparent !important; color:#cbd5e1; }
body.dark-mode .inner-page-header { background:#1f2438 !important; color:#cbd5e1; }
body.dark-mode .inner-page-header .pagetitle { color:#e8edf7 !important; }
/* detail-view: the table element itself is #fff by default -> dark card shows through */
body.dark-mode table.detail-view { background:transparent !important; }
body.dark-mode table.detail-view th, body.dark-mode table.detail-view td { border-color:#313a59 !important; }
/* label cells + report first column (were #e8e6e7) */
body.dark-mode table.detail-view th, body.dark-mode table.detail-view .detail-label,
body.dark-mode .report-table .col1 { background:#2a3150 !important; color:#aeb8d4 !important; }
/* value cells: subtle zebra on odd, dark elsewhere */
body.dark-mode table.detail-view td { background:transparent !important; color:#dbe2f0 !important; }
body.dark-mode table.detail-view tr:nth-of-type(odd) td { background:rgba(255,255,255,.025) !important; }
/* the extra input types style.css whitens (date/time/etc.) that the main rule missed */
body.dark-mode input[type=date], body.dark-mode input[type=datetime], body.dark-mode input[type=datetime-local],
body.dark-mode input[type=month], body.dark-mode input[type=time], body.dark-mode input[type=week] {
	background:#1f2438 !important; color:#e8edf7 !important; border-color:#2d3650 !important; }
/* white cancel button -> dark field */
body.dark-mode .btnCan { background:#2a3150 !important; color:#dbe2f0 !important; border:1px solid #3a4566 !important; }
/* keep primary submit/login buttons a solid blue CTA in dark mode (the generic
   input rules above would otherwise grey them out) */
body.dark-mode .login-card-body input[type=submit], body.dark-mode input.submit,
body.dark-mode .row.buttons .submit, body.dark-mode button.submit {
	background:#2563eb !important; color:#fff !important; border:none !important; }
body.dark-mode .login-card-body input[type=submit]:hover, body.dark-mode input.submit:hover { background:#1d4ed8 !important; }
/* old top dropdown panel + hover */
body.dark-mode #dropdown ul { background:#252b42 !important; box-shadow:0 4px 14px rgba(0,0,0,.5); }
body.dark-mode #dropdown ul li a:hover { background:#2d3650; color:#cbd5e1; }

/* misc */
body.dark-mode .breadcrumbs, body.dark-mode .breadcrumbs a { color:#8b96b3; }
body.dark-mode .content-header h1 { color:#e8edf7; }
body.dark-mode .nav-tabs { border-color:#2d3650; }
body.dark-mode .nav-tabs .nav-link { color:#8b96b3; }
body.dark-mode .badge-light { background:#2d3650 !important; color:#cbd5e1 !important; border-color:#3a4358 !important; }
body.dark-mode .portlet.box:hover, body.dark-mode .card:hover { box-shadow:0 2px 8px rgba(0,0,0,.5); }

/* ==========================================================================
 * Navbar features: search, notifications, user menu
 * ==========================================================================*/
.jj-search { position:relative; margin-left:.5rem; }
.jj-search input { width:300px; max-width:38vw; padding:.4rem .8rem .4rem 2rem; border:1px solid #e5e7eb; border-radius:20px; background:#f3f4f6; font-size:.85rem; outline:none; transition:border .15s, background .15s, box-shadow .15s; }
.jj-search input:focus { border-color:#2563eb; background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.jj-search-ic { position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:#9aa0a6; font-size:.8rem; pointer-events:none; }
.jj-badge { position:absolute; top:3px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:#ef4444; color:#fff; font-size:.64rem; font-weight:700; line-height:16px; text-align:center; }
.jj-notif, .jj-usermenu { padding:0; min-width:300px; border:none; box-shadow:0 8px 26px rgba(0,0,0,.15); border-radius:10px; overflow:hidden; }
.jj-notif-head { padding:.7rem 1rem; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:#6b7280; border-bottom:1px solid #f1f3f5; }
.jj-notif-head span { background:#ef4444; color:#fff; border-radius:9px; font-size:.7rem; padding:0 .45rem; }
.jj-notif-empty { padding:1.4rem 1rem; text-align:center; color:#9aa0a6; font-size:.85rem; font-style:italic; }
.jj-notif-item { display:flex; align-items:center; gap:.7rem; padding:.65rem 1rem; border-bottom:1px solid #f6f7f9; color:#374151; text-decoration:none; }
.jj-notif-item:hover { background:#f4f7fe; color:#2563eb; }
.jj-notif-item .ic { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85rem; flex:0 0 34px; }
.jj-notif-item .tx { font-size:.85rem; line-height:1.2; }
.jj-usermenu .jj-user-head { display:flex; align-items:center; gap:.65rem; padding:.85rem 1rem; background:#f8fafc; border-bottom:1px solid #f1f3f5; }
.jj-usermenu .jj-user-head img { width:40px; height:40px; }
.jj-usermenu .jj-user-head strong { display:block; font-size:.92rem; color:#1f2937; line-height:1.2; }
.jj-usermenu .jj-user-head span { font-size:.75rem; color:#9aa0a6; }
.jj-usermenu .dropdown-item { padding:.55rem 1rem; font-size:.88rem; }
/* dark */
body.dark-mode .jj-search input { background:#1f2438; border-color:#2d3650; color:#e8edf7; }
body.dark-mode .jj-search input:focus { border-color:#5b78c9; background:#252b42; box-shadow:0 0 0 3px rgba(91,120,201,.18); }
body.dark-mode .jj-notif, body.dark-mode .jj-usermenu { background:#252b42; box-shadow:0 8px 26px rgba(0,0,0,.5); }
body.dark-mode .jj-notif-head { color:#9aa6c4; border-bottom-color:#2d3650; }
body.dark-mode .jj-notif-item { color:#cbd5e1; border-bottom-color:#2d3650; }
body.dark-mode .jj-notif-item:hover { background:#2d3650; color:#fff; }
body.dark-mode .jj-usermenu .jj-user-head { background:#2a3150; border-bottom-color:#2d3650; }
body.dark-mode .jj-usermenu .jj-user-head strong { color:#e8edf7; }
body.dark-mode .jj-usermenu .dropdown-item { color:#cbd5e1; }
body.dark-mode .jj-usermenu .dropdown-item:hover { background:#2d3650; }

/* ==========================================================================
 * Responsive
 * ==========================================================================*/
@media (max-width: 991px) {
	.jj-search input { width:170px; }
	body.sidebar-open .main-sidebar { box-shadow:0 0 30px rgba(0,0,0,.35); z-index:1040; }
}
/* ==========================================================================
 * Flash messages -> floating toasts (top-right, auto-dismiss via JS)
 * ==========================================================================*/
#statusMsg:empty { display:none; }
#statusMsg { position:fixed; top:70px; right:18px; z-index:1080; display:flex; flex-direction:column; gap:.6rem; max-width:370px; }
#statusMsg .flash-success, #statusMsg .flash-error {
	display:flex; align-items:flex-start; gap:.55rem; background:#fff; color:#374151;
	border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.16); padding:.85rem 2.4rem .85rem 1rem;
	border-left:4px solid #22c55e; font-size:.9rem; line-height:1.35; position:relative; cursor:pointer; animation:jjToastIn .3s ease;
}
#statusMsg .flash-error { border-left-color:#ef4444; }
#statusMsg .flash-success::before { content:"\f058"; font-family:"Font Awesome 5 Free"; font-weight:900; color:#22c55e; }
#statusMsg .flash-error::before { content:"\f06a"; font-family:"Font Awesome 5 Free"; font-weight:900; color:#ef4444; }
#statusMsg .flash-success::after, #statusMsg .flash-error::after { content:"\00d7"; position:absolute; right:.7rem; top:.55rem; color:#9aa0a6; font-size:1.25rem; line-height:1; }
.jj-toast-hide { animation:jjToastOut .3s ease forwards !important; }
@keyframes jjToastIn { from{ transform:translateX(120%); opacity:0; } to{ transform:translateX(0); opacity:1; } }
@keyframes jjToastOut { to{ transform:translateX(120%); opacity:0; } }
body.dark-mode #statusMsg .flash-success, body.dark-mode #statusMsg .flash-error { background:#252b42; color:#cbd5e1; box-shadow:0 8px 24px rgba(0,0,0,.5); }

/* initials avatar (used when a user has no photo) */
.jj-avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; font-weight:700; vertical-align:middle; line-height:1; letter-spacing:.02em; flex:0 0 auto; }
/* inline alert (not a toast) */
.jj-alert { margin:1rem 1.25rem; padding:.7rem 1rem; border-radius:8px; font-size:.9rem; }
.jj-alert.danger { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }
.jj-alert.success { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }
body.dark-mode .jj-alert.danger { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.32); color:#fca5a5; }
body.dark-mode .jj-alert.success { background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.32); color:#86efac; }

/* onboarding stepper */
.jj-steps { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:0 0 1.25rem; padding:.8rem 1.1rem; background:#f8fafc; border:1px solid #eef0f2; border-radius:10px; }
.jj-steps .step { display:flex; align-items:center; gap:.5rem; color:#9aa0a6; font-size:.88rem; font-weight:600; }
.jj-steps .step .n { width:26px; height:26px; border-radius:50%; background:#e5e7eb; color:#6b7280; display:flex; align-items:center; justify-content:center; font-size:.78rem; flex:0 0 26px; }
.jj-steps .step.active { color:#2563eb; }
.jj-steps .step.active .n { background:#2563eb; color:#fff; }
.jj-steps .step.done { color:#16a34a; }
.jj-steps .step.done .n { background:#22c55e; color:#fff; }
.jj-steps .sep { flex:1 1 20px; height:2px; background:#e5e7eb; min-width:18px; max-width:70px; }
body.dark-mode .jj-steps { background:#1f2438; border-color:#2d3650; }
body.dark-mode .jj-steps .step .n { background:#2d3650; color:#9aa6c4; }
body.dark-mode .jj-steps .sep { background:#2d3650; }

/* photo upload placeholder */
.jj-photo-ph { width:120px; height:120px; border-radius:14px; border:2px dashed #cbd5e1; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f8fafc; color:#cbd5e1; font-size:2.6rem; flex:0 0 120px; }
.jj-photo-ph img { width:100%; height:100%; object-fit:cover; }
body.dark-mode .jj-photo-ph { border-color:#3a4566; background:#1f2438; color:#3a4566; }

/* table cell with avatar + name */
.jj-cell { display:flex; align-items:center; gap:.55rem; }
.jj-cell .jj-avatar { flex:0 0 auto; }

/* friendly empty state */
.shr-empty { text-align:center; padding:2.5rem 1rem; color:#9aa0a6; }
.shr-empty > i { font-size:2.2rem; opacity:.35; margin-bottom:.65rem; display:block; }
.shr-empty .msg { font-size:.92rem; }
.shr-empty .cta { margin-top:.95rem; }
body.dark-mode .shr-empty { color:#7b86a1; }

/* status timeline */
.jj-timeline { list-style:none; margin:0; padding:.4rem 0 0; position:relative; }
.jj-timeline li { position:relative; padding:0 0 1.15rem 1.75rem; }
.jj-timeline li::before { content:""; position:absolute; left:6px; top:18px; bottom:-2px; width:2px; background:#e5e7eb; }
.jj-timeline li:last-child::before { display:none; }
.jj-timeline li .dot { position:absolute; left:0; top:2px; width:14px; height:14px; border-radius:50%; background:#cbd5e1; border:2px solid #fff; box-shadow:0 0 0 1px #e5e7eb; }
.jj-timeline li.done .dot { background:#22c55e; }
.jj-timeline li.active .dot { background:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.2); }
.jj-timeline li .t { font-weight:600; font-size:.9rem; color:#374151; }
.jj-timeline li .d { font-size:.78rem; color:#9aa0a6; }
body.dark-mode .jj-timeline li::before { background:#2d3650; }
body.dark-mode .jj-timeline li .dot { border-color:#252b42; box-shadow:0 0 0 1px #2d3650; }
body.dark-mode .jj-timeline li.active .dot { box-shadow:0 0 0 3px rgba(91,120,201,.25); }
body.dark-mode .jj-timeline li .t { color:#dbe2f0; }

/* ==========================================================================
 * Quick-add floating action button (FAB)
 * ==========================================================================*/
.jj-fab { position:fixed; bottom:24px; right:24px; z-index:1050; display:flex; flex-direction:column; align-items:flex-end; gap:.6rem; }
.jj-fab-btn { width:54px; height:54px; border-radius:50%; border:none; background:#2563eb; color:#fff; font-size:1.3rem; box-shadow:0 6px 18px rgba(37,99,235,.4); cursor:pointer; transition:transform .2s ease, background .2s; }
.jj-fab-btn:hover { background:#1d4ed8; }
.jj-fab.open .jj-fab-btn { transform:rotate(135deg); background:#1d4ed8; }
.jj-fab-menu { display:flex; flex-direction:column; gap:.5rem; align-items:flex-end; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.jj-fab.open .jj-fab-menu { opacity:1; transform:translateY(0); pointer-events:auto; }
.jj-fab-menu a { display:inline-flex; align-items:center; gap:.5rem; background:#fff; color:#374151; padding:.5rem .9rem; border-radius:24px; box-shadow:0 4px 14px rgba(0,0,0,.15); font-size:.85rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.jj-fab-menu a i { color:#2563eb; width:1rem; text-align:center; }
.jj-fab-menu a:hover { background:#eff6ff; color:#2563eb; }
body.dark-mode .jj-fab-menu a { background:#252b42; color:#cbd5e1; box-shadow:0 4px 14px rgba(0,0,0,.5); }
body.dark-mode .jj-fab-menu a:hover { background:#2d3650; color:#fff; }
@media (max-width: 767px) { .jj-fab { bottom:16px; right:16px; } }

/* "/" search shortcut hint */
.jj-search .jj-kbd { position:absolute; right:.55rem; top:50%; transform:translateY(-50%); font-size:.7rem; color:#9aa0a6; border:1px solid #e5e7eb; border-radius:5px; padding:0 .35rem; line-height:1.4; pointer-events:none; }
.jj-search input:focus ~ .jj-kbd { display:none; }
body.dark-mode .jj-search .jj-kbd { border-color:#3a4566; color:#7b86a1; }

@media (max-width: 767px) {
	.jj-search { display:none; }
	.content-header .container-fluid, .content > .container-fluid { padding-left:.75rem; padding-right:.75rem; }
	/* horizontal forms collapse to stacked (label above field) on phones */
	.portlet .form .row { display:block !important; width:100% !important; }
	.portlet .form .row-left, .portlet .form .row-right { display:block !important; width:100% !important; }
	.portlet .form .row > label, .portlet .form .row-left > label, .portlet .form .row-right > label {
		flex:none !important; max-width:none !important; width:auto !important; text-align:left !important; padding-top:0 !important; margin-bottom:.3rem !important; display:block !important; }
	.portlet .form .row.buttons, .portlet .row.buttons { padding-left:0 !important; }
	.portlet .form .row > .errorMessage, .portlet .form .row-left > .errorMessage, .portlet .form .row-right > .errorMessage { margin-left:0 !important; }
	.smarthr .shr-welcome { flex-direction:column; align-items:flex-start; gap:.75rem; }
	.smarthr .shr-welcome .shr-actions { width:100%; }
	.operation { float:none !important; margin:.5rem 0 !important; }
	/* wide data tables scroll instead of overflowing */
	.grid-view { overflow-x:auto; }
	.grid-view table.items { min-width:560px; }
}