body { /* Add top padding for full-width layout */
	padding-top: 3.7rem;
}
#login_wrapper {
	margin: auto auto;
	width: 460px;
}
@media (max-width: 575px) { 
	#login_wrapper {
		width: 100%;
	}
	legend { /* to prevent overlong filenames from cause horiz. scroll */
		overflow: hidden;
	}
}

.nav.nav-pills {
	margin-bottom: 10px;
}

a.navbar-brand img {
	height: 2.0rem;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

.dropdown-menu .dropdown-submenu-left {
  right: 100%;
  left: inherit;
}

img.mimeicon {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #CCCCCC #AAAAAA #999999 #CCCCCC;
  border-style: solid;
  border-width: 1px 2px 2px 1px;
	background-color: white;
	max-width: 100%;
	min-width: 60px;
}

span.list-details {
	font-size: 85%;
	font-style: italic;
	color: #666;
}

.list-action > a {
	text-decoration: none;
	color: #333;
	padding: 2px;
	cursor: pointer;
	font-size: 110%;
}

#admin-tools i {
	font-size: 300%;
	line-height: 110%;
/*	min-height: 100px; */
}

#admin-tools a {
	margin-bottom: 10px;
}

ul.unstyled {
	list-style: none;
	padding-left: 0px;
}
ul.unstyled li a:hover > i {
	text-decoration: none;
}
ul.unstyled li a > i {
	color: #000;
	margin-right: 5px;
}
ul.unstyled li a.btn > i {
	font-size: 200%;
}

ul.tree, ul.tree ul {
	margin-left: 20px;
}

ul.jqtree-tree li.jqtree-selected > .jqtree-element,
ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover {
    background-color: #fff;
    background: none;
    text-shadow: none;
		font-weight: bold;
}

ul.jqtree-tree li.jqtree_common {
	margin-left: 8px;
}

ul.jqtree-tree li.jqtree_common > .jqtree-element:hover {
  background-color: #E0E0E0;
}

form + legend {
	margin-top: 20px;
}

form + div {
	margin-top: 10px;
}

legend > span {
	float: right;
}

td.today {
	background-color: rgb(255, 200, 0);
}

td.event {
	background-color: rgb(0, 200, 255);
}

.wordbreak {
	word-break: break-word;
}

.btn-file {
	position: relative;
	overflow: hidden;
}
.btn-file input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 100%;
	min-height: 100%;
	font-size: 999px;
	text-align: right;
	filter: alpha(opacity=0);
	opacity: 0;
	background: red;
	cursor: inherit;
	display: block;
}
input[readonly] {
	background-color: white !important;
	cursor: text !important;
}

div.mandatories {
	font-size: 90%;
	font-style: italic;
	color: #888;
}
div.mandatories span {
	font-weight: bold;
}

div.statusbar {
	font-size: 80%;
}
div.statusbar div.filename {
	display: inline-block;
}
div.statusbar div.filesize {
	display: inline-block;
	float: right;
}
div.statusbar div.progress {
	margin-bottom: 10px;
	line-height: 1rem;
}
div.statusbar a.btn {
	margin-bottom: 10px;
}

#database .chosen-container,
#fulltext .chosen-container {
	width: 95% !important;
}

.chosen-container-multi .chosen-choices {
	border: 1px solid #cccccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	transition: border linear 0.2s, box-shadow linear 0.2s;
	padding: 2px 6px;
	height: 20px;
}

div.help h1 {
	font-size: 24px;
}

div.help h2 {
	font-size: 18px;
}

div.help h3 {
	font-size: 16px;
}

div.splash {
	display: none;
}

div.clipboard-container {
	position: fixed;
	left: 0px;
	top: 50px;
	width: 29.8%;
	min-width: 200px;
	background: white;
	border: 1px solid #d4d4d4;
	border-radius: 5px;
	padding: 10px;
	max-height: 400px;
	margin: 10px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 1;
}
div.clipboard-container legend {
	display: none;
}

div.statusbar-container {
	display: none;
	position: fixed;
	right:10px;
	top:60px;
	width:300px;
	padding:10px;
	background-color: white;
	border: 1px solid #E0E0E0;
	border-radius: 4px;
	z-index: 10;
	overflow-y: scroll;
	max-height: calc(100% - 100px);
}
div.statusbar-container::-webkit-scrollbar {
	width: 5px;
}
div.statusbar-container::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
}

div.statusbar-container::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

div.statusbar-container h1 {
	font-size: 21px;
	line-height: 40px;
	color: #333333;
	font-weight: normal;
}

a.accordion2-toggle:focus, a.accordion2-toggle:hover {
	text-decoration: none;
}

.select2-container--bootstrap4 .select2-selection {
	border-radius: 0px;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
	border-radius: 0px;
}
.select2-results__option span i {
	font-size: 80%;
}
.datepicker {
	border-radius: 0px;
	padding: 0.375rem 0.75rem;
}
span.datepicker {
	padding: 0px;
}

div.typeahead span.path {
	font-size: 85%;
	color: #888;
}

div.fulltextinfo > span:hover {
	background-color: lightblue;
}
/* Sidenav for Docs
 * -------------------------------------------------- */

.bs-docs-sidenav {
	width: 100%;
	margin: 0px 0 30px 0;
	padding: 0;
	background-color: #fff;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
	-moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
	box-shadow: 0 1px 4px rgba(0,0,0,.065);
}
.bs-docs-sidenav > li > a {
	display: block;
	width: 190px \9;
	margin: 0 0 -1px;
	padding: 8px 14px;
	border: 1px solid #e5e5e5;
}
.bs-docs-sidenav > li:first-child > a {
	-webkit-border-radius: 6px 6px 0 0;
	-moz-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0;
}
.bs-docs-sidenav > li:last-child > a {
	-webkit-border-radius: 0 0 6px 6px;
	-moz-border-radius: 0 0 6px 6px;
	border-radius: 0 0 6px 6px;
}
.bs-docs-sidenav > .active > a {
	position: relative;
	z-index: 2;
	padding: 9px 15px;
	border: 0;
	text-shadow: 0 1px 0 rgba(0,0,0,.15);
	-webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
	-moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
	box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}
/* Chevrons */
.bs-docs-sidenav .badge-right {
	float: right;
	margin-top: 2px;
	margin-right: -6px;
}
.bs-docs-sidenav > li > a:hover {
	background-color: #f5f5f5;
}
.bs-docs-sidenav a:hover .icon-chevron-right {
	opacity: .5;
}
.bs-docs-sidenav .active .icon-chevron-right,
.bs-docs-sidenav .active a:hover .icon-chevron-right {
	background-image: url(../img/glyphicons-halflings-white.png);
	opacity: 1;
}
.bs-docs-sidenav.affix {
	top: 100px;
}
.bs-docs-sidenav.affix-bottom {
	position: absolute;
	top: auto;
	bottom: 270px;
}

i.success {color: #00b000;}
i.enabled {color: #00b000;}
i.error {color: #b00000;}
i.disabled {color: #b00000;}
i.warning {color: #ff9900;}
i.initstate {color: #ff9900;}
i.released {color: #00b000;}
i.rejected {color: #b00000;}
i.expired {color: #b0b0b0;}
i.obsolete {color: #9e5d42;}
i.in-workflow {color: #11479e;}
i.workflow-action {color: #91479e;}
i.selected {border: 1px solid #d4d4d4;padding:3px;border-radius:3px;background-color:#fafafa;background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);}

span.editable:after {
	font: normal normal normal 14px/1 FontAwesome;
	content: " \f044";
}

span.openpopupbox {
	cursor: pointer;
}

div.popupbox {
	margin-top: 5px;
	background-color: #fff;
	border-radius: 4px;
	color: black;
	text-align: left;
	text-shadow: none;
	line-height: 1.4em;
	border: 1px solid #ccc;
	padding: 25px 15px 15px 15px;
	display: none;
	position: absolute;
	min-width: 230px;
	white-space: break-spaces;
	z-index: 10;
}

div.popupbox dt {
	font-weight: normal;
	font-size: 80%;
}

div.popupbox dd {
	margin-left: 0px;
	margin-bottom: 5px;
}

div.popupbox span.closepopupbox {
	position: absolute;
	right: 5px;
	top: 0px;
}

ul.qq-upload-list {
	/*
	background-color: #fff;
	border-radius: 4px;
	border: 1px solid #cccccc;
	*/
}

ul.qq-upload-list li {
	display: inline-block;
	margin: 5px 5px 5px 0;
	padding: 5px;
	background-color: #fff;
	border: 1px solid #cccccc;
	border-radius: 4px;
}

ul.qq-upload-list li img {
	display: block;
}

ul.qq-upload-list li span {
	display: block;
}

.qq-upload-button {
	display: inline-block;
}

.qq-hide, .qq-uploader dialog {
	display: none;
}

@media (min-width: 992px) {
	.modal-lg {
		max-width: 900px;
	}
}


/* ============================================================
   E-Office Mandiri Taspen — 2026 Polish Layer
   Scoped refinements on top of legacy SeedDMS / Bootstrap 2 markup.
   Goal: enterprise-grade feel — coherent palette, refined density,
   modern focus states, subtle transitions. No layout-breaking
   changes; the existing navbar/login/dashboard polish is preserved.
   ============================================================ */
:root {
	--eo-bg:           #f6f8fb;
	--eo-surface:      #ffffff;
	--eo-surface-alt:  #f8fafc;
	--eo-border:       #e5e7eb;
	--eo-border-soft:  #eef2f7;
	--eo-text:         #0f172a;
	--eo-text-muted:   #64748b;
	--eo-text-faint:   #94a3b8;
	--eo-primary:      #1e40af;
	--eo-primary-600: #2563eb;
	--eo-primary-50:  #eff6ff;
	--eo-success:      #059669;
	--eo-success-50:  #ecfdf5;
	--eo-warning:      #b45309;
	--eo-warning-50:  #fffbeb;
	--eo-danger:       #b91c1c;
	--eo-danger-50:   #fef2f2;
	--eo-info:         #0e7490;
	--eo-info-50:     #ecfeff;
	--eo-radius:       8px;
	--eo-radius-lg:    12px;
	--eo-shadow-sm:    0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
	--eo-shadow:       0 2px 6px rgba(15,23,42,0.06), 0 4px 14px rgba(15,23,42,0.08);
	--eo-shadow-lg:    0 12px 32px rgba(15,23,42,0.14), 0 4px 8px rgba(15,23,42,0.06);
	--eo-focus-ring:   0 0 0 3px rgba(59,130,246,0.22);
	--eo-transition:   .15s ease;
}

/* Page background — soft neutral instead of pure white */
body { background-color: var(--eo-bg); color: var(--eo-text); }

/* Tighten body text rendering */
body, button, input, select, textarea {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Container width — keep dense screens readable */
main.container-fluid { padding-left: 18px; padding-right: 18px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 { color: var(--eo-text); font-weight: 600; letter-spacing: -0.01em; }
/* Preserve inherited colour inside coloured surfaces (dashboard hero, hero banners) */
.dv-hero h1, .dv-hero h2, .dv-hero h3, .dv-hero h4, .dv-hero h5, .dv-hero h6,
.dv-hero-title,
[class*="hero"] h1, [class*="hero"] h2, [class*="hero"] h3,
.navbar h1, .navbar h2, .navbar h3, .navbar h4 { color: inherit; }
small, .text-muted { color: var(--eo-text-muted) !important; }
hr { border-top: 1px solid var(--eo-border); margin: 18px 0; }

/* ---------- Legend / Page heading ---------- */
legend {
	font-size: 16px;
	font-weight: 600;
	color: var(--eo-text);
	border: 0;
	padding: 0 0 10px;
	margin: 4px 0 18px;
	border-bottom: 1px solid var(--eo-border);
	letter-spacing: -0.005em;
}
legend > span { float: right; font-size: 12px; color: var(--eo-text-muted); font-weight: 500; }

/* ---------- Buttons ---------- */
.btn {
	border-radius: var(--eo-radius);
	font-weight: 500;
	font-size: 13px;
	padding: 7px 14px;
	line-height: 1.4;
	transition: background-color var(--eo-transition), border-color var(--eo-transition), color var(--eo-transition), box-shadow var(--eo-transition), transform var(--eo-transition);
	text-shadow: none;
	background-image: none;
	box-shadow: none;
}
.btn:hover { box-shadow: var(--eo-shadow-sm); }
.btn:active { transform: translateY(0.5px); box-shadow: none; }
.btn:focus, .btn:focus-visible {
	outline: none;
	box-shadow: var(--eo-focus-ring);
}
.btn-sm, .btn-mini { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn-large, .btn-lg { padding: 10px 18px; font-size: 14px; border-radius: 10px; }

.btn-primary {
	background-color: var(--eo-primary) !important;
	border-color: var(--eo-primary) !important;
	color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
	background-color: var(--eo-primary-600) !important;
	border-color: var(--eo-primary-600) !important;
	color: #fff !important;
}

.btn-secondary {
	background-color: #fff !important;
	border-color: var(--eo-border) !important;
	color: var(--eo-text) !important;
	background-image: none !important;
}
.btn-secondary:hover, .btn-secondary:focus {
	background-color: var(--eo-surface-alt) !important;
	border-color: #d1d5db !important;
	color: var(--eo-text) !important;
}

.btn-success { background-color: var(--eo-success) !important; border-color: var(--eo-success) !important; color: #fff !important; }
.btn-success:hover { background-color: #047857 !important; border-color: #047857 !important; }
.btn-danger  { background-color: var(--eo-danger)  !important; border-color: var(--eo-danger)  !important; color: #fff !important; }
.btn-danger:hover  { background-color: #991b1b !important; border-color: #991b1b !important; }
.btn-warning { background-color: var(--eo-warning) !important; border-color: var(--eo-warning) !important; color: #fff !important; }
.btn-warning:hover { background-color: #92400e !important; border-color: #92400e !important; }
.btn-info    { background-color: var(--eo-info)    !important; border-color: var(--eo-info)    !important; color: #fff !important; }
.btn-info:hover    { background-color: #155e75 !important; border-color: #155e75 !important; }

/* Ghost / link buttons */
.btn-link {
	color: var(--eo-primary);
	box-shadow: none !important;
}
.btn-link:hover { color: var(--eo-primary-600); text-decoration: none; }

/* Button groups */
.btn-group .btn + .btn { margin-left: -1px; }

/* ---------- Forms ---------- */
.form-control,
input[type="text"]:not(.search-query):not(.dv-search-input),
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"]:not(.search-query),
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select,
textarea {
	background-color: #fff;
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius);
	color: var(--eo-text);
	font-size: 13px;
	padding: 7px 11px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color var(--eo-transition), box-shadow var(--eo-transition);
}
textarea { line-height: 1.5; }
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:not(.search-query):focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus {
	border-color: var(--eo-primary-600);
	outline: none;
	box-shadow: var(--eo-focus-ring);
}
input[disabled], select[disabled], textarea[disabled] {
	background-color: var(--eo-surface-alt) !important;
	color: var(--eo-text-muted);
	cursor: not-allowed !important;
}
/* Preserve existing readonly look */
input[readonly] { cursor: text !important; }

label, .control-label { color: var(--eo-text); font-weight: 500; font-size: 13px; }
.control-group { margin-bottom: 14px; }
.help-block, .help-inline { color: var(--eo-text-muted); font-size: 12px; }
.control-group.error .control-label { color: var(--eo-danger); }
.control-group.error .form-control { border-color: var(--eo-danger); }

/* Placeholder polish (the navbar pill has its own placeholder colour) */
input::placeholder, textarea::placeholder { color: var(--eo-text-faint); opacity: 1; }

/* Input prepend/append harmony */
.input-prepend .add-on, .input-append .add-on {
	background-color: var(--eo-surface-alt);
	border: 1px solid var(--eo-border);
	color: var(--eo-text-muted);
	border-radius: var(--eo-radius);
	text-shadow: none;
	font-weight: 500;
}

/* ---------- Cards / panels / wells ---------- */
.well, .panel, .panel-default,
.bs-docs-sidenav,
.popupbox {
	background-color: var(--eo-surface);
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius-lg);
	box-shadow: var(--eo-shadow-sm);
	padding: 16px 18px;
}
.popupbox { box-shadow: var(--eo-shadow-lg); }

/* ---------- Tables ---------- */
.table {
	background-color: var(--eo-surface);
	border-radius: var(--eo-radius-lg);
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}
.table th,
.table thead th {
	background-color: var(--eo-surface-alt);
	color: var(--eo-text-muted);
	font-weight: 600;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--eo-border) !important;
	border-top: 0;
	padding: 10px 12px;
	vertical-align: middle;
}
.table td {
	padding: 10px 12px;
	border-top: 1px solid var(--eo-border-soft);
	vertical-align: middle;
	font-size: 13px;
}
.table-condensed td, .table-sm td,
.table-condensed th, .table-sm th { padding: 7px 10px; font-size: 12.5px; }
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th { background-color: var(--eo-primary-50); transition: background-color var(--eo-transition); }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--eo-surface-alt); }
.table tbody tr:last-child td { border-bottom: 0; }
.table a { color: var(--eo-text); }
.table a:hover { color: var(--eo-primary-600); text-decoration: none; }

/* Wrap a plain table in a card-feeling shell */
.table.table-condensed,
.table.table-hover { box-shadow: var(--eo-shadow-sm); border: 1px solid var(--eo-border); }

/* ---------- Breadcrumbs ---------- */
.breadcrumb {
	background-color: transparent;
	padding: 8px 0 14px;
	margin: 0 0 14px;
	border-bottom: 1px solid var(--eo-border);
	border-radius: 0;
	font-size: 12.5px;
	box-shadow: none;
}
.breadcrumb > li { color: var(--eo-text-muted); }
.breadcrumb > li > a { color: var(--eo-text-muted); }
.breadcrumb > li > a:hover { color: var(--eo-primary-600); text-decoration: none; }
.breadcrumb > li.active,
.breadcrumb > li:last-child { color: var(--eo-text); font-weight: 600; }
.breadcrumb > li + li:before { content: "\203A"; color: var(--eo-text-faint); padding: 0 8px; font-weight: 400; }
.breadcrumb .divider { color: var(--eo-text-faint); padding: 0 6px; }

/* ---------- Alerts ---------- */
.alert {
	border: 1px solid transparent;
	border-left-width: 4px;
	border-radius: var(--eo-radius);
	padding: 11px 14px;
	font-size: 13px;
	background-color: var(--eo-surface-alt);
	color: var(--eo-text);
	text-shadow: none;
}
.alert-info    { background-color: var(--eo-info-50);    border-color: #bae6fd; border-left-color: var(--eo-info); color: #0b5563; }
.alert-success { background-color: var(--eo-success-50); border-color: #a7f3d0; border-left-color: var(--eo-success); color: #065f46; }
.alert-warning { background-color: var(--eo-warning-50); border-color: #fde68a; border-left-color: var(--eo-warning); color: #92400e; }
.alert-danger,
.alert-error   { background-color: var(--eo-danger-50);  border-color: #fecaca; border-left-color: var(--eo-danger); color: #991b1b; }
.alert-light   { background-color: var(--eo-surface);    border-color: var(--eo-border); border-left-color: #cbd5e1; color: var(--eo-text); }
.alert .close { font-size: 16px; opacity: 0.5; }
.alert .close:hover { opacity: 0.85; }

/* ---------- Badges / labels ---------- */
.badge, .label {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 3px 8px;
	border-radius: 999px;
	background-color: #e2e8f0;
	color: #334155;
	text-shadow: none;
	line-height: 1.5;
	vertical-align: middle;
}
.badge-primary, .label-primary { background-color: var(--eo-primary-50); color: var(--eo-primary); }
.badge-info,    .label-info    { background-color: var(--eo-info-50);    color: var(--eo-info); }
.badge-success, .label-success { background-color: var(--eo-success-50); color: var(--eo-success); }
.badge-warning, .label-warning { background-color: var(--eo-warning-50); color: var(--eo-warning); }
.badge-danger,  .label-danger,
.badge-important, .label-important,
.badge-error,   .label-error   { background-color: var(--eo-danger-50);  color: var(--eo-danger); }
.badge-secondary, .badge-light, .label-default { background-color: #e2e8f0; color: #475569; }
.badge.bg-success { background-color: var(--eo-success-50) !important; color: var(--eo-success) !important; }
.badge.bg-info    { background-color: var(--eo-info-50)    !important; color: var(--eo-info) !important; }
.badge.bg-warning { background-color: var(--eo-warning-50) !important; color: var(--eo-warning) !important; }
.badge.bg-danger  { background-color: var(--eo-danger-50)  !important; color: var(--eo-danger) !important; }
.badge.bg-secondary { background-color: #e2e8f0 !important; color: #475569 !important; }

/* ---------- Modals ---------- */
.modal {
	border-radius: var(--eo-radius-lg);
	border: 0;
	box-shadow: var(--eo-shadow-lg);
	background-color: var(--eo-surface);
}
.modal-header {
	border-bottom: 1px solid var(--eo-border);
	padding: 14px 18px;
	border-radius: var(--eo-radius-lg) var(--eo-radius-lg) 0 0;
}
.modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4 {
	font-size: 15px; font-weight: 600; margin: 0; color: var(--eo-text);
}
.modal-header .close { font-size: 20px; opacity: 0.5; transition: opacity var(--eo-transition); }
.modal-header .close:hover { opacity: 0.9; }
.modal-body  { padding: 18px; font-size: 13px; }
.modal-footer {
	background-color: var(--eo-surface-alt);
	border-top: 1px solid var(--eo-border);
	padding: 12px 18px;
	border-radius: 0 0 var(--eo-radius-lg) var(--eo-radius-lg);
}
.modal-backdrop.in { opacity: 0.5; background-color: #0f172a; }

/* ---------- Nav tabs / pills ---------- */
.nav-tabs {
	border-bottom: 1px solid var(--eo-border);
	margin-bottom: 14px;
}
.nav-tabs > li > a {
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--eo-text-muted);
	padding: 9px 14px;
	font-weight: 500;
	font-size: 13px;
	margin-right: 2px;
	background: transparent;
	transition: color var(--eo-transition), border-color var(--eo-transition), background-color var(--eo-transition);
}
.nav-tabs > li > a:hover {
	background-color: transparent;
	color: var(--eo-text);
	border-bottom-color: #cbd5e1;
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
	color: var(--eo-primary-600);
	background-color: transparent;
	border: 0;
	border-bottom: 2px solid var(--eo-primary-600);
	font-weight: 600;
}
.tab-content > .tab-pane { padding: 14px 0; }

/* ---------- Pills / list groups ---------- */
.nav-pills > li > a {
	border-radius: 999px;
	color: var(--eo-text-muted);
	padding: 6px 14px;
	font-weight: 500;
}
.nav-pills > .active > a,
.nav-pills > .active > a:hover {
	background-color: var(--eo-primary);
	color: #fff;
}

/* ---------- Sidenav (admin) ---------- */
.bs-docs-sidenav {
	box-shadow: var(--eo-shadow-sm);
	padding: 6px;
	border-radius: var(--eo-radius-lg);
}
.bs-docs-sidenav > li > a {
	border: 0;
	border-radius: 8px;
	width: auto;
	padding: 9px 12px;
	color: var(--eo-text-muted);
	font-size: 13px;
	font-weight: 500;
	margin: 0;
	transition: background-color var(--eo-transition), color var(--eo-transition);
}
.bs-docs-sidenav > li > a:hover { background-color: var(--eo-primary-50); color: var(--eo-primary); }
.bs-docs-sidenav > .active > a,
.bs-docs-sidenav > .active > a:hover {
	background-color: var(--eo-primary);
	color: #fff;
	padding: 9px 12px;
	box-shadow: none;
	text-shadow: none;
}
.bs-docs-sidenav .badge-right { float: right; margin-top: 1px; margin-right: 0; }

/* ---------- Page sub-navbar (folder/document/admin nav) ---------- */
.navbar:not(.navbar-fixed-top) {
	background: transparent;
	margin-bottom: 14px;
}
.navbar:not(.navbar-fixed-top) .navbar-inner {
	background: var(--eo-surface);
	background-image: none;
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius-lg);
	box-shadow: var(--eo-shadow-sm);
	min-height: 42px;
	padding: 4px 10px;
}
.navbar:not(.navbar-fixed-top) .nav > li > a {
	color: var(--eo-text-muted);
	font-size: 13px;
	padding: 9px 13px;
	font-weight: 500;
	border-radius: 7px;
	transition: background-color var(--eo-transition), color var(--eo-transition);
	text-shadow: none;
}
.navbar:not(.navbar-fixed-top) .nav > li > a:hover {
	background-color: var(--eo-primary-50);
	color: var(--eo-primary);
}
.navbar:not(.navbar-fixed-top) .nav > li.active > a,
.navbar:not(.navbar-fixed-top) .nav > li.dropdown.open > a {
	background-color: var(--eo-primary-50);
	color: var(--eo-primary);
	box-shadow: none;
}

/* Dropdown menus for sub-navbar match the global top-nav look */
.navbar:not(.navbar-fixed-top) .dropdown-menu {
	background: #fff;
	border: 1px solid var(--eo-border);
	border-radius: 10px;
	box-shadow: var(--eo-shadow-lg);
	padding: 6px;
	margin-top: 4px;
	min-width: 220px;
}
.navbar:not(.navbar-fixed-top) .dropdown-menu > li > a {
	color: #374151;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 12.5px;
	font-weight: 500;
}
.navbar:not(.navbar-fixed-top) .dropdown-menu > li > a:hover,
.navbar:not(.navbar-fixed-top) .dropdown-menu > li > a:focus {
	background-color: var(--eo-primary-50);
	color: var(--eo-primary);
	text-decoration: none;
}
.navbar:not(.navbar-fixed-top) .dropdown-menu > li.divider {
	margin: 4px 6px;
	background-color: var(--eo-border-soft);
}

/* ---------- Pagination ---------- */
.pagination ul > li > a,
.pagination ul > li > span {
	background-color: #fff;
	border: 1px solid var(--eo-border);
	color: var(--eo-text-muted);
	padding: 6px 11px;
	font-size: 13px;
	transition: background-color var(--eo-transition), color var(--eo-transition);
}
.pagination ul > li > a:hover { background-color: var(--eo-primary-50); color: var(--eo-primary); }
.pagination ul > .active > a,
.pagination ul > .active > span {
	background-color: var(--eo-primary);
	color: #fff;
	border-color: var(--eo-primary);
}

/* ---------- Dropdowns (general) ---------- */
.dropdown-menu {
	border: 1px solid var(--eo-border);
	border-radius: 10px;
	box-shadow: var(--eo-shadow-lg);
	padding: 6px;
	font-size: 13px;
}
.dropdown-menu > li > a {
	border-radius: 6px;
	padding: 7px 11px;
	color: var(--eo-text);
	transition: background-color var(--eo-transition), color var(--eo-transition);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background-color: var(--eo-primary-50);
	color: var(--eo-primary-600);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
	background-color: var(--eo-primary);
	color: #fff;
}
.dropdown-menu .divider { margin: 4px 6px; background-color: var(--eo-border-soft); }

/* ---------- Tree (jqtree) refinements ---------- */
ul.jqtree-tree li.jqtree_common > .jqtree-element {
	border-radius: 6px;
	padding: 2px 4px;
	transition: background-color var(--eo-transition);
}
ul.jqtree-tree li.jqtree_common > .jqtree-element:hover { background-color: var(--eo-primary-50); }
ul.jqtree-tree li.jqtree-selected > .jqtree-element,
ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover {
	background-color: var(--eo-primary-50);
	background: var(--eo-primary-50);
	color: var(--eo-primary);
	font-weight: 600;
}

/* ---------- Noty toast polish ---------- */
.noty_bar.noty_theme_default {
	border-radius: 10px !important;
	box-shadow: var(--eo-shadow-lg) !important;
	border: 1px solid var(--eo-border) !important;
	font-family: inherit !important;
}
.noty_bar.noty_theme_default .noty_message { padding: 12px 16px !important; font-size: 13px !important; }
.noty_bar.noty_theme_default.noty_type_success { background-color: var(--eo-success-50) !important; color: #065f46 !important; border-left: 4px solid var(--eo-success) !important; }
.noty_bar.noty_theme_default.noty_type_error,
.noty_bar.noty_theme_default.noty_type_danger  { background-color: var(--eo-danger-50)  !important; color: #991b1b !important; border-left: 4px solid var(--eo-danger) !important; }
.noty_bar.noty_theme_default.noty_type_warning { background-color: var(--eo-warning-50) !important; color: #92400e !important; border-left: 4px solid var(--eo-warning) !important; }
.noty_bar.noty_theme_default.noty_type_info,
.noty_bar.noty_theme_default.noty_type_information { background-color: var(--eo-info-50) !important; color: #0b5563 !important; border-left: 4px solid var(--eo-info) !important; }

/* ---------- Splash messages (server-pushed) ---------- */
div.splash {
	border-radius: 10px;
	box-shadow: var(--eo-shadow-lg);
	font-size: 13px;
}

/* ---------- Status-bar (recent uploads) ---------- */
div.statusbar-container {
	border-radius: var(--eo-radius-lg);
	border: 1px solid var(--eo-border);
	box-shadow: var(--eo-shadow-lg);
}
div.statusbar-container h1 {
	font-size: 13px;
	font-weight: 600;
	color: var(--eo-text);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.4;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--eo-border);
	margin: 0 0 10px;
}

/* ---------- Clipboard panel ---------- */
div.clipboard-container {
	border-radius: var(--eo-radius-lg);
	border: 1px solid var(--eo-border);
	box-shadow: var(--eo-shadow-lg);
	padding: 14px;
}

/* ---------- Popovers / tooltips ---------- */
.popover {
	border-radius: var(--eo-radius);
	border: 1px solid var(--eo-border);
	box-shadow: var(--eo-shadow-lg);
}
.popover-title { font-size: 13px; font-weight: 600; background-color: var(--eo-surface-alt); }
.tooltip-inner {
	background-color: #0f172a;
	color: #f8fafc;
	border-radius: 6px;
	padding: 6px 9px;
	font-size: 12px;
	font-weight: 500;
}
.tooltip.top .tooltip-arrow { border-top-color: #0f172a; }
.tooltip.right .tooltip-arrow { border-right-color: #0f172a; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #0f172a; }
.tooltip.left .tooltip-arrow { border-left-color: #0f172a; }

/* ---------- Status icon colours: align with palette ---------- */
i.success, i.enabled, i.released { color: var(--eo-success); }
i.error, i.disabled, i.rejected  { color: var(--eo-danger); }
i.warning, i.initstate           { color: var(--eo-warning); }
i.in-workflow                    { color: var(--eo-primary); }
i.workflow-action                { color: #7c3aed; }

/* ---------- Misc element refinements ---------- */
.divider { border-color: var(--eo-border-soft); }
.well { background-color: var(--eo-surface); }
.list-action a { color: var(--eo-text-muted); padding: 4px 6px; border-radius: 5px; transition: background-color var(--eo-transition), color var(--eo-transition); }
.list-action a:hover { background-color: var(--eo-primary-50); color: var(--eo-primary); text-decoration: none; }
span.list-details { color: var(--eo-text-faint); }

/* Mime icon — soften the harsh legacy border */
img.mimeicon {
	border: 1px solid var(--eo-border);
	border-radius: 4px;
	background-color: #fff;
	-moz-border-bottom-colors: none;
	-moz-border-top-colors: none;
}

/* Chosen / select2 — match the form-control look */
.chosen-container-multi .chosen-choices,
.chosen-container-single .chosen-single {
	border: 1px solid var(--eo-border) !important;
	border-radius: var(--eo-radius) !important;
	background: #fff !important;
	box-shadow: none !important;
	min-height: 34px;
	transition: border-color var(--eo-transition), box-shadow var(--eo-transition);
}
.chosen-container-active .chosen-choices,
.chosen-container-active .chosen-single {
	border-color: var(--eo-primary-600) !important;
	box-shadow: var(--eo-focus-ring) !important;
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	border: 1px solid var(--eo-border) !important;
	border-radius: var(--eo-radius) !important;
	min-height: 34px;
	transition: border-color var(--eo-transition), box-shadow var(--eo-transition);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: var(--eo-primary-600) !important;
	box-shadow: var(--eo-focus-ring) !important;
}

/* Datepicker container */
.datepicker {
	border-radius: var(--eo-radius);
	box-shadow: var(--eo-shadow-lg);
	border: 1px solid var(--eo-border);
	font-size: 12px;
}
.datepicker .day.active,
.datepicker .day.active:hover { background-color: var(--eo-primary) !important; background-image: none !important; color: #fff !important; }
.datepicker .day.today,
.datepicker .day.today:hover { background-color: var(--eo-warning-50) !important; background-image: none !important; color: var(--eo-warning); }

/* Mandatory hint */
div.mandatories { color: var(--eo-text-muted); }
div.mandatories span { color: var(--eo-danger); }

/* ---------- Empty / placeholder state utility ---------- */
.eo-empty-state {
	background-color: var(--eo-surface);
	border: 1px dashed var(--eo-border);
	border-radius: var(--eo-radius-lg);
	padding: 36px 24px;
	text-align: center;
	color: var(--eo-text-muted);
}
.eo-empty-state i { font-size: 32px; color: var(--eo-text-faint); display: block; margin-bottom: 10px; }
.eo-empty-state h4 { font-size: 14px; color: var(--eo-text); margin: 0 0 4px; font-weight: 600; }
.eo-empty-state p  { font-size: 12.5px; margin: 0; }

/* ---------- Scrollbars (WebKit) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid var(--eo-bg); }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---------- Focus visibility for accessibility ---------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
	outline: none;
	box-shadow: var(--eo-focus-ring);
	border-radius: 4px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* ---------- Print: clean output ---------- */
@media print {
	body { background: #fff !important; padding-top: 0 !important; }
	.navbar, .breadcrumb, .footer-actionbar, .dv-filter-form { display: none !important; }
	.panel, .table, .well { box-shadow: none !important; border-color: #ddd !important; }
}

/* ---------- Subtle page entrance ---------- */
main.container-fluid > .row-fluid {
	animation: eo-fade-in .18s ease-out;
}
@keyframes eo-fade-in {
	from { opacity: 0; transform: translateY(2px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* End — 2026 Polish Layer */

/* ============================================================
   E-Office Mandiri Taspen — 2026 Polish Layer · Round 2
   Bigger, view-aware upgrades on top of the Round 1 foundation:
   AdminTools cards, upload zones, page chrome, custom selects,
   status pills, ajax skeletons, sticky form actions.
   ============================================================ */

/* ---------- App-shell content spacing ----------
   The fixed navbar uses padding-top: 64px from Bootstrap.php.
   Give content a calmer top breath and a soft seam under the nav. */
body { position: relative; }
body::before {
	content: "";
	position: fixed;
	top: 60px;
	left: 0; right: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(15,23,42,0.06) 18%, rgba(15,23,42,0.06) 82%, transparent);
	z-index: 1020;
	pointer-events: none;
}
main.container-fluid { padding-top: 10px; padding-bottom: 28px; }
main.container-fluid > .row-fluid { gap: 14px; }

/* Sticky page heading (legend acts as page title) */
main.container-fluid > .row-fluid > [class*="span"] > legend:first-child {
	display: flex;
	align-items: center;
	gap: 10px;
}
main.container-fluid > .row-fluid > [class*="span"] > legend:first-child::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 18px;
	background: linear-gradient(180deg, var(--eo-primary-600), var(--eo-primary));
	border-radius: 2px;
}

/* ---------- AdminTools (legacy big-icon grid) → Cards ----------
   Markup: #admin-tools > .row-fluid > .spanX > a.btn.btn-light.btn-block (icon)<br>(label) */
#admin-tools {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
	margin-bottom: 14px;
}
#admin-tools > .row-fluid { display: contents; }
#admin-tools > .row-fluid > [class*="span"] { width: auto !important; min-width: 0 !important; margin: 0 !important; float: none !important; }

#admin-tools a.btn,
#admin-tools .btn-light {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	min-height: 110px;
	padding: 16px 16px 14px !important;
	background: var(--eo-surface) !important;
	background-image: none !important;
	color: var(--eo-text) !important;
	border: 1px solid var(--eo-border) !important;
	border-radius: var(--eo-radius-lg) !important;
	box-shadow: var(--eo-shadow-sm);
	text-shadow: none !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	line-height: 1.35 !important;
	text-align: left !important;
	white-space: normal !important;
	margin-bottom: 0 !important;
	position: relative;
	overflow: hidden;
	transition: all var(--eo-transition);
}
#admin-tools a.btn:hover,
#admin-tools .btn-light:hover {
	border-color: #c7d2fe !important;
	color: var(--eo-primary) !important;
	box-shadow: 0 6px 20px rgba(37,99,235,0.10), 0 1px 3px rgba(15,23,42,0.06) !important;
	transform: translateY(-1px);
}
#admin-tools a.btn::after {
	content: "\f061";
	font-family: FontAwesome;
	position: absolute;
	right: 14px; bottom: 14px;
	font-size: 11px;
	color: var(--eo-text-faint);
	opacity: 0;
	transition: opacity var(--eo-transition), transform var(--eo-transition);
}
#admin-tools a.btn:hover::after {
	opacity: 1;
	color: var(--eo-primary);
	transform: translateX(2px);
}
#admin-tools a.btn > i,
#admin-tools .btn-light > i {
	font-size: 22px !important;
	line-height: 1 !important;
	width: 42px;
	height: 42px;
	min-height: 42px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: var(--eo-primary-50);
	color: var(--eo-primary) !important;
	border-radius: 10px;
	margin-bottom: 0 !important;
	transition: background-color var(--eo-transition), color var(--eo-transition);
}
#admin-tools a.btn:hover > i,
#admin-tools .btn-light:hover > i {
	background: var(--eo-primary);
	color: #fff !important;
}
#admin-tools a.btn > br { display: none; }

/* ---------- Upload drop zone ---------- */
.qq-uploader { padding: 0 !important; border: 0 !important; }
.qq-upload-drop-area,
.qq-uploader.qq-uploader .qq-upload-drop-area {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	min-height: 110px !important;
	height: auto !important;
	background: var(--eo-surface-alt);
	border: 1.5px dashed #cbd5e1;
	border-radius: var(--eo-radius-lg);
	padding: 18px 22px !important;
	color: var(--eo-text-muted);
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	transition: background-color var(--eo-transition), border-color var(--eo-transition), color var(--eo-transition);
}
.qq-upload-drop-area::before {
	content: "\f0ee";
	font-family: FontAwesome;
	font-size: 22px;
	color: var(--eo-text-faint);
	margin-right: 12px;
	line-height: 1;
}
.qq-upload-drop-area.qq-upload-drop-area-active {
	background: var(--eo-primary-50);
	border-color: var(--eo-primary-600);
	color: var(--eo-primary);
}
.qq-upload-drop-area.qq-upload-drop-area-active::before { color: var(--eo-primary); }
.qq-upload-button {
	display: inline-block;
	margin-top: 10px;
	background: var(--eo-primary) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--eo-radius) !important;
	padding: 7px 14px !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	text-shadow: none !important;
}
.qq-upload-button:hover {
	background: var(--eo-primary-600) !important;
}
ul.qq-upload-list { padding-left: 0 !important; margin-top: 12px !important; }
ul.qq-upload-list li {
	display: flex !important;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px !important;
	border-radius: var(--eo-radius) !important;
	border: 1px solid var(--eo-border) !important;
	background: var(--eo-surface) !important;
	margin: 0 0 8px !important;
}

/* ---------- Custom <select> chevron ---------- */
select.form-control,
select:not([multiple]):not(.dv-filter-form select):not(.lf-input):not([size]) {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%2364748b'%3e%3cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px 12px;
	padding-right: 30px !important;
}

/* ---------- Required field asterisk ---------- */
label.required::after,
.control-label.required::after,
.required > .control-label::after {
	content: " *";
	color: var(--eo-danger);
	font-weight: 700;
}

/* ---------- Scroll shadow for wide tables ---------- */
.table-responsive,
div[style*="overflow-x"] {
	background:
		linear-gradient(90deg, var(--eo-surface) 30%, rgba(255,255,255,0)) left center,
		linear-gradient(-90deg, var(--eo-surface) 30%, rgba(255,255,255,0)) right center,
		radial-gradient(at left, rgba(15,23,42,0.10), transparent 70%) left center,
		radial-gradient(at right, rgba(15,23,42,0.10), transparent 70%) right center;
	background-repeat: no-repeat;
	background-size: 24px 100%, 24px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

/* ---------- Status pills (with leading dot) ---------- */
.badge.badge-status-active,
.badge.badge-status-released,
.label.label-released {
	background-color: var(--eo-success-50);
	color: var(--eo-success);
}
.badge.badge-status-active::before,
.badge.badge-status-released::before,
.label.label-released::before {
	content: "";
	display: inline-block;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--eo-success);
	margin-right: 6px;
	vertical-align: middle;
	box-shadow: 0 0 0 3px rgba(5,150,105,0.15);
}
.badge.badge-status-disabled,
.badge.badge-status-rejected,
.label.label-rejected {
	background-color: var(--eo-danger-50);
	color: var(--eo-danger);
}
.badge.badge-status-disabled::before,
.badge.badge-status-rejected::before,
.label.label-rejected::before {
	content: "";
	display: inline-block;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--eo-danger);
	margin-right: 6px;
	vertical-align: middle;
}
.badge.badge-role-admin   { background-color: #fef3c7; color: #92400e; }
.badge.badge-role-user    { background-color: var(--eo-primary-50); color: var(--eo-primary); }
.badge.badge-role-guest   { background-color: #f1f5f9; color: #475569; }
.badge.badge-sso          { background-color: #ede9fe; color: #6d28d9; }

/* In-workflow subtle pulse for clarity */
.label.label-initstate,
.badge.badge-initstate { animation: eo-pulse-soft 1.8s ease-in-out infinite; }
@keyframes eo-pulse-soft {
	0%, 100% { box-shadow: 0 0 0 0 rgba(180,83,9,0.0); }
	50%      { box-shadow: 0 0 0 4px rgba(180,83,9,0.18); }
}

/* ---------- Mime icon in table cells: chip backdrop ---------- */
.table td > img.mimeicon {
	background: var(--eo-surface-alt);
	border: 1px solid var(--eo-border);
	border-radius: 6px;
	padding: 2px;
	width: 22px; height: 22px;
	object-fit: contain;
}

/* ---------- Form section grouping ----------
   Treat <fieldset>(without modal/login scope) as a soft card */
form fieldset:not(.no-card):not(.login-form fieldset) {
	background: var(--eo-surface);
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius-lg);
	padding: 16px 18px;
	margin-bottom: 14px;
	box-shadow: var(--eo-shadow-sm);
}
form fieldset:not(.no-card) > legend {
	font-size: 13px;
	font-weight: 600;
	color: var(--eo-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 1px solid var(--eo-border-soft);
	padding: 0 0 10px;
	margin: -2px 0 14px;
	width: 100%;
	display: block;
}
form fieldset:not(.no-card) > legend::before { width: 0; height: 0; background: transparent; }
.modal-body form fieldset { border: 0; padding: 0; box-shadow: none; background: transparent; }

/* ---------- Refined form-actions (legacy Bootstrap 2 form footer) ---------- */
.form-actions {
	background-color: var(--eo-surface-alt);
	border-top: 1px solid var(--eo-border);
	padding: 14px 18px;
	margin: 18px -18px -18px;
	border-radius: 0 0 var(--eo-radius-lg) var(--eo-radius-lg);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.form-actions .btn-primary { order: -1; }

/* ---------- Modal width ---------- */
.modal-dialog { max-width: 640px; }
@media (min-width: 1200px) {
	.modal-lg .modal-dialog { max-width: 900px; }
}

/* ---------- AJAX content: skeleton shimmer ----------
   The legacy JS prepends a placeholder GIF into divs marked .ajax.
   Style the wrapper so the GIF lives in a tasteful frame, and
   add a subtle shimmer to any explicit .eo-skeleton element. */
.ajax > div[style*="opacity"] {
	background: var(--eo-surface-alt) !important;
	border: 1px solid var(--eo-border) !important;
	border-radius: var(--eo-radius-lg) !important;
	opacity: 1 !important;
	min-height: 120px !important;
	height: auto !important;
	overflow: hidden;
}
.ajax > div[style*="opacity"] img { display: none !important; }
.ajax > div[style*="opacity"] > div::after {
	content: "";
	display: inline-block;
	width: 26px; height: 26px;
	border-radius: 50%;
	border: 2.5px solid var(--eo-border);
	border-top-color: var(--eo-primary);
	animation: eo-spin .8s linear infinite;
}
@keyframes eo-spin { to { transform: rotate(360deg); } }

.eo-skeleton {
	background: linear-gradient(90deg, var(--eo-surface-alt) 0%, #eef2f7 50%, var(--eo-surface-alt) 100%);
	background-size: 200% 100%;
	border-radius: var(--eo-radius);
	animation: eo-skeleton-shimmer 1.4s ease-in-out infinite;
	display: block; height: 14px; margin: 6px 0;
}
@keyframes eo-skeleton-shimmer {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

/* ---------- Cards utility (for any view that opts in) ---------- */
.eo-card {
	background: var(--eo-surface);
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius-lg);
	box-shadow: var(--eo-shadow-sm);
	padding: 16px 18px;
}
.eo-card + .eo-card { margin-top: 14px; }
.eo-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 0 12px;
	margin: 0 0 14px;
	border-bottom: 1px solid var(--eo-border-soft);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--eo-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---------- Refine SO-called "atn-card" (AdminToolsNew) icon ring on hover ---------- */
.atn-card { transition: all var(--eo-transition); }
.atn-card:hover { transform: translateY(-1px); }

/* ---------- Buttons inside the modern dashboard hero stay legible ---------- */
.dv-hero .btn { box-shadow: none !important; }

/* ---------- Progress bars ---------- */
.progress {
	height: 8px;
	background-color: var(--eo-border-soft);
	border-radius: 999px;
	box-shadow: none;
	overflow: hidden;
}
.progress > .bar,
.progress > .progress-bar {
	background-color: var(--eo-primary);
	background-image: none;
	box-shadow: none;
	border-radius: 999px;
	transition: width .3s ease;
}
.progress > .bar-success, .progress > .progress-bar-success { background-color: var(--eo-success); }
.progress > .bar-danger,  .progress > .progress-bar-danger  { background-color: var(--eo-danger); }
.progress > .bar-warning, .progress > .progress-bar-warning { background-color: var(--eo-warning); }
.progress > .bar-info,    .progress > .progress-bar-info    { background-color: var(--eo-info); }

/* ---------- Refined links inside content (not navigation) ---------- */
main.container-fluid p a,
main.container-fluid li a:not(.btn):not([class*="dropdown"]):not([class*="nav-"]):not([class*="breadcrumb"]) {
	color: var(--eo-primary);
}
main.container-fluid p a:hover,
main.container-fluid li a:not(.btn):not([class*="dropdown"]):not([class*="nav-"]):hover {
	color: var(--eo-primary-600);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: rgba(37,99,235,0.4);
}

/* ---------- Code & kbd ---------- */
code {
	background: #f1f5f9;
	color: #be185d;
	border-radius: 4px;
	padding: 1px 5px;
	font-size: 92%;
}
kbd {
	background: #0f172a;
	color: #f8fafc;
	border-radius: 4px;
	padding: 1px 6px;
	font-size: 11px;
	font-weight: 600;
	box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

/* ---------- Selection ---------- */
::selection { background: rgba(59,130,246,0.22); color: var(--eo-text); }

/* ---------- Reduce harshness of legacy "fa-caret-down" navbar icons ---------- */
.navbar .fa-caret-down { font-size: 11px; opacity: 0.7; }

/* ---------- Misc: ensure long text wraps in narrow table cells ---------- */
.table td { word-break: break-word; }
.table td a { word-break: break-word; }

/* End — 2026 Polish Layer · Round 2 */

/* ============================================================
   E-Office Mandiri Taspen — 2026 Polish Layer · Round 3
   Deep refinements for the document-centric views:
   ViewDocument attributes, document preview tiles, comments,
   workflow indicators (review/approval/revision/reception bars),
   FullCalendar, Cytoscape workflow graph, admin sticky sidenav,
   activity log, splash & popup boxes, account & search results.
   ============================================================ */

/* ---------- Two-column document layout (ViewDocument et al.) ---------- */
.row-fluid .span4 + .span8,
.row-fluid .span3 + .span9 { padding-left: 6px; }
.row-fluid > .span12 + .span12 { margin-top: 14px; }

/* ---------- ViewDocument: key/value attribute table ----------
   Most attribute lists render as <table class="table table-condensed"> with
   two TDs per row (label, value). Style for readability. */
table.table.table-condensed > tbody > tr > td:first-child {
	width: 30%;
	max-width: 320px;
	color: var(--eo-text-muted);
	font-weight: 500;
	font-size: 12.5px;
	vertical-align: top;
	padding-right: 16px;
}
table.table.table-condensed > tbody > tr > td:nth-child(2) {
	color: var(--eo-text);
	font-weight: 500;
}
/* Don't apply the key/value treatment to data tables that have a THEAD */
table.table.table-condensed > thead + tbody > tr > td:first-child {
	width: auto; max-width: none; color: var(--eo-text); font-weight: 500; padding-right: 12px;
}

/* ---------- Document / Folder preview tile ---------- */
img.mimeicon[width="100"],
img.mimeicon[width="120"],
img[src*="preview"] {
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius-lg);
	background: var(--eo-surface);
	padding: 6px;
	box-shadow: var(--eo-shadow-sm);
	transition: box-shadow var(--eo-transition), transform var(--eo-transition);
}
img[src*="preview"]:hover { box-shadow: var(--eo-shadow); transform: scale(1.01); }

/* ---------- Comments / markdown text blocks ----------
   Document/version comments render as the value of a key/value row;
   give them a soft quote-style chrome when they contain HTML. */
.document-comment,
.comment-block {
	background: var(--eo-surface-alt);
	border-left: 3px solid var(--eo-border);
	padding: 10px 14px;
	border-radius: 6px;
	color: var(--eo-text);
	font-size: 13px;
	line-height: 1.55;
}

/* ---------- Status progress bars (review/approval/reception) ----------
   These use legacy .progress with .bar.bar-success/.bar.bar-danger and
   inline width. Round 2 normalised .progress; refine further: */
.bar.bar-success + .bar.bar-danger { border-left: 1px solid #fff; }
.progress .bar {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	text-shadow: none;
	text-align: center;
	color: #fff;
	padding: 0 4px;
}
.progress .bar i.fa { font-size: 10px; }

/* When .progress sits inside a table cell — make it taller for readability */
.table td .progress { min-width: 100px; height: 14px; margin: 0; }
.table td .progress .bar { line-height: 14px; }

/* Subtle activity ring around .openpopupbox triggers in progress bars */
span.openpopupbox { display: inline-block; padding: 0 4px; transition: opacity var(--eo-transition); }
span.openpopupbox:hover { opacity: 0.7; }

/* ---------- PopupBox refinement ---------- */
div.popupbox {
	background: #fff;
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius-lg);
	box-shadow: var(--eo-shadow-lg);
	padding: 18px 18px 14px;
	color: var(--eo-text);
	min-width: 280px;
}
div.popupbox dt {
	font-size: 11px;
	color: var(--eo-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	margin-top: 8px;
}
div.popupbox dd {
	margin: 4px 0 10px;
	color: var(--eo-text);
	font-size: 13px;
}
div.popupbox span.closepopupbox {
	color: var(--eo-text-faint);
	transition: color var(--eo-transition);
	cursor: pointer;
}
div.popupbox span.closepopupbox:hover { color: var(--eo-text); }

/* ---------- Activity log / audit log ---------- */
.activity-row,
.auditlog-row,
table.table tbody tr.log-entry {
	border-left: 3px solid var(--eo-border);
}
.activity-row:hover,
.auditlog-row:hover { border-left-color: var(--eo-primary-600); }

/* ---------- Splash flash messages ---------- */
div.splash {
	position: fixed;
	right: 22px;
	bottom: 22px;
	top: auto;
	min-width: 260px;
	max-width: 380px;
	background: #fff;
	color: var(--eo-text);
	border: 1px solid var(--eo-border);
	border-left: 4px solid var(--eo-primary);
	padding: 12px 16px;
	font-size: 13px;
	z-index: 1100;
	animation: eo-splash-in .22s cubic-bezier(0.16,1,0.3,1);
}
div.splash[data-type="error"]   { border-left-color: var(--eo-danger); }
div.splash[data-type="success"] { border-left-color: var(--eo-success); }
div.splash[data-type="warning"] { border-left-color: var(--eo-warning); }
div.splash[data-type="info"]    { border-left-color: var(--eo-info); }
@keyframes eo-splash-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Sticky admin sidenav ---------- */
@media (min-width: 992px) {
	.row-fluid > .span2 > .bs-docs-sidenav,
	.row-fluid > .span3 > .bs-docs-sidenav {
		position: sticky;
		top: 76px;
		max-height: calc(100vh - 96px);
		overflow-y: auto;
	}
	.row-fluid > .span2 > .bs-docs-sidenav::-webkit-scrollbar,
	.row-fluid > .span3 > .bs-docs-sidenav::-webkit-scrollbar { width: 4px; }
}

/* Sidenav section heading (li without an <a> in admin sidenavs) */
.bs-docs-sidenav > li.nav-header,
.bs-docs-sidenav > li:not(:has(> a)) {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--eo-text-faint);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 12px 12px 4px;
}

/* ---------- FullCalendar polish ---------- */
.fc-toolbar h2 { font-size: 16px; font-weight: 600; color: var(--eo-text); letter-spacing: -0.005em; }
.fc-button-group .fc-button,
.fc-button {
	background: #fff !important;
	background-image: none !important;
	border: 1px solid var(--eo-border) !important;
	color: var(--eo-text-muted) !important;
	text-shadow: none !important;
	border-radius: var(--eo-radius) !important;
	padding: 6px 12px !important;
	font-size: 12.5px !important;
	box-shadow: none !important;
	transition: background-color var(--eo-transition), color var(--eo-transition), border-color var(--eo-transition);
}
.fc-button:hover { background: var(--eo-primary-50) !important; color: var(--eo-primary) !important; border-color: #c7d2fe !important; }
.fc-button.fc-state-active,
.fc-button.fc-button-active {
	background: var(--eo-primary) !important;
	color: #fff !important;
	border-color: var(--eo-primary) !important;
}
.fc th.fc-day-header,
.fc th { background: var(--eo-surface-alt); color: var(--eo-text-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.fc td.fc-today { background: var(--eo-primary-50) !important; }
.fc-event {
	border-radius: 5px !important;
	border: 0 !important;
	font-size: 12px !important;
	padding: 2px 6px !important;
	background: var(--eo-primary) !important;
	color: #fff !important;
	box-shadow: 0 1px 2px rgba(15,23,42,0.10);
}
.fc-event:hover { filter: brightness(1.05); }

/* ---------- Cytoscape workflow graph container ---------- */
#cy,
div[id^="cy"],
.cytoscape-container {
	background: var(--eo-surface);
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius-lg);
	box-shadow: var(--eo-shadow-sm);
}

/* ---------- Approval / review status icons in lists ---------- */
.action-line { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.action-line i.fa { font-size: 12px; }

/* ---------- Calendar today cell (legacy table-based calendar) ---------- */
td.today {
	background-color: var(--eo-warning-50) !important;
	color: var(--eo-warning);
	font-weight: 700;
	border-radius: 4px;
}
td.event {
	background-color: var(--eo-primary-50) !important;
	color: var(--eo-primary);
	font-weight: 500;
}

/* ---------- ChangePassword / strength bar ---------- */
.passwordStrength {
	border-radius: 999px !important;
	overflow: hidden;
}
.passwordStrength .bar { height: 6px !important; transition: width .2s ease, background-color .2s ease; }

/* ---------- Bootbox confirmation refinement ---------- */
.bootbox.modal .modal-header h3,
.bootbox.modal .modal-header h4 { font-size: 15px; font-weight: 600; }
.bootbox.modal .modal-body { font-size: 13.5px; color: var(--eo-text); }
.bootbox.modal .modal-footer { padding: 12px 18px; }
.bootbox.modal .btn { min-width: 86px; }

/* ---------- Markitup (markdown editor toolbar) ---------- */
.markItUp .markItUpContainer { border-radius: var(--eo-radius); border-color: var(--eo-border); }
.markItUpHeader ul { background: var(--eo-surface-alt); padding: 4px 6px; }
.markItUpHeader ul li a { color: var(--eo-text-muted); }
.markItUpHeader ul li a:hover { color: var(--eo-primary); }
.markItUpEditor { border-radius: 0 0 var(--eo-radius) var(--eo-radius); }

/* ---------- Search results refinement ---------- */
.search-result-row { transition: background-color var(--eo-transition); }
.search-result-row:hover { background-color: var(--eo-primary-50); }

/* ---------- MyAccount: highlight account header ---------- */
.users-page-header,
.account-summary {
	background: var(--eo-surface);
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius-lg);
	padding: 18px 22px;
	box-shadow: var(--eo-shadow-sm);
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 18px;
}

/* ---------- Document version chip ---------- */
.version-chip,
span.version {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	background: var(--eo-primary-50);
	color: var(--eo-primary);
	border-radius: 6px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ---------- Page-level helper: focus to skip navbar ---------- */
.eo-skip {
	position: absolute; left: -10000px; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}
.eo-skip:focus {
	position: fixed; left: 50%; top: 12px; transform: translateX(-50%);
	width: auto; height: auto;
	padding: 8px 14px; background: var(--eo-primary); color: #fff;
	border-radius: var(--eo-radius); z-index: 1100; box-shadow: var(--eo-shadow-lg);
}

/* ---------- KPI tile utility (reusable beyond dashboard) ---------- */
.eo-kpi {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 16px;
	background: var(--eo-surface);
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius-lg);
	box-shadow: var(--eo-shadow-sm);
	transition: box-shadow var(--eo-transition), transform var(--eo-transition);
}
.eo-kpi:hover { box-shadow: var(--eo-shadow); transform: translateY(-1px); }
.eo-kpi-icon {
	width: 40px; height: 40px;
	border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--eo-primary-50); color: var(--eo-primary);
	font-size: 17px;
}
.eo-kpi-value { font-size: 19px; font-weight: 700; color: var(--eo-text); line-height: 1.1; }
.eo-kpi-label { font-size: 11px; color: var(--eo-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }

/* ---------- Subtle 'in-workflow' chip enhancement ---------- */
.badge.badge-info i.fa-clock-o,
.badge.badge-info i.fa-clock,
.label.label-info i.fa-clock-o { margin-right: 4px; }

/* ---------- Tweak: ensure fixed top navbar accent strip aligns ---------- */
body::before { top: 59px; }

/* ---------- WebKit form autofill: keep our colour palette ---------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--eo-text) !important;
	-webkit-box-shadow: 0 0 0 30px #fff inset !important;
	transition: background-color 5000s ease-in-out 0s;
}

/* ---------- Misc balance ---------- */
.row-fluid + .row-fluid { margin-top: 12px; }
.row-fluid > [class*="span"] > h3:first-child,
.row-fluid > [class*="span"] > h4:first-child { margin-top: 0; }

/* ---------- High-density tables (when used inside cards) ---------- */
.eo-card .table { box-shadow: none; border: 0; }
.eo-card .table > thead > tr > th:first-child,
.eo-card .table > tbody > tr > td:first-child { padding-left: 0; }
.eo-card .table > thead > tr > th:last-child,
.eo-card .table > tbody > tr > td:last-child  { padding-right: 0; }

/* End — 2026 Polish Layer · Round 3 */

/* ============================================================
   E-Office Mandiri Taspen — 2026 Polish Layer · Round 4
   Premium-feel finishing touches that affect every page:

   1. Typography — harmonic scale, density-aware line-heights,
      tabular numerals for IDs/amounts, ligature & kerning hygiene.
   2. Motion — standard easing curve, gentle page enter, hover
      lift on interactive surfaces, refined focus rings.
   3. Loading — skeleton shimmer utilities, modern AJAX spinner
      replacing the legacy GIF, smooth empty→loaded transitions.
   4. Empty / error states — friendlier defaults with optional
      retry / next-step affordances.

   All additive over Rounds 1-3. No HTML/PHP changes required.
   ============================================================ */

:root {
	/* Material-style standard easing — feels both responsive and natural */
	--eo-ease:        cubic-bezier(0.4, 0, 0.2, 1);
	--eo-ease-out:    cubic-bezier(0, 0, 0.2, 1);
	--eo-ease-in:     cubic-bezier(0.4, 0, 1, 1);
	--eo-dur-fast:    .12s;
	--eo-dur:         .18s;
	--eo-dur-slow:    .28s;
}

/* ────────────────────────────────────────────────────────────
   1) TYPOGRAPHY
   ──────────────────────────────────────────────────────────── */

/* Smarter font rendering across the board */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
body {
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	letter-spacing: -0.005em;
}

/* Harmonic heading scale — distinct sizes & weights so hierarchy
   reads clearly even without designer micro-tuning each page */
h1, .h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.018em; line-height: 1.25; }
h2, .h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
h3, .h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em;  line-height: 1.35; }
h4, .h4 { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.4; }
h5, .h5 { font-size: 13px; font-weight: 600; letter-spacing: 0;        line-height: 1.45; }
h6, .h6 { font-size: 12px; font-weight: 600; letter-spacing: 0.02em;   line-height: 1.5; text-transform: uppercase; color: var(--eo-text-muted); }

/* legend acts like h2 in this app — keep its size from Round 1 but
   inherit the new weight + tracking */
legend { font-weight: 700; letter-spacing: -0.012em; }

/* Tabular numerals for any number-heavy context — keeps columns aligned
   and the eye can scan amounts/IDs/dates without ragged digit widths */
.table td, .table th,
.eo-kpi-value, .lt-stat .value, .rr-stat .value, .ac-kpi .val,
code, kbd, samp,
input[type="number"], input[type="date"], input[type="time"] {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Cap line-length on long-form prose for comfortable reading.
   Scoped to .lc-intro / .ac-explainer / generic <p> inside main content
   so it doesn't shrink data-table cells. */
main.container-fluid p:not(.no-cap),
.lc-intro, .ac-explainer, .rr-intro, .rs-intro p {
	max-width: 78ch;
}

/* Slightly tighter labels in dense forms */
.control-label, .lt-label, .rr-label, .rs-label, .lc-label {
	letter-spacing: 0;
}

/* Small caps for section labels in cards */
.eo-card-head, .rr-card-head h4, .lt-card-head h4, .rs-card-head h4,
.ac-card-head h4, .atn-card-head h4 {
	letter-spacing: 0.06em;
}

/* Inline code/kbd inside paragraphs — tighten leading so it doesn't
   inflate line height */
p code, p kbd, li code, li kbd { line-height: 1; padding: 2px 6px; }

/* ────────────────────────────────────────────────────────────
   2) MOTION & MICRO-INTERACTIONS
   ──────────────────────────────────────────────────────────── */

/* Standardise the transition curve across every interactive class so
   nothing feels mechanical / linear */
a, .btn, button:not(.note-btn):not(.fc-button),
.form-control, input, select, textarea,
.dropdown-menu > li > a,
.table-hover tbody tr,
.atn-card, .rr-row, .lt-tpl-item a, .dv-kpi, .eo-card, .ac-issue,
.note-editor.note-frame {
	transition: background-color var(--eo-dur) var(--eo-ease),
	            border-color var(--eo-dur) var(--eo-ease),
	            color var(--eo-dur) var(--eo-ease),
	            box-shadow var(--eo-dur) var(--eo-ease),
	            transform var(--eo-dur-fast) var(--eo-ease-out),
	            opacity var(--eo-dur) var(--eo-ease);
}

/* Button press: gentle vertical settle, no scale (avoids text reflow) */
.btn:active:not(:disabled), button:active:not(:disabled):not(.lt-mode-toggle button) {
	transform: translateY(1px);
}

/* Card-like surfaces — soft lift on hover for interactive cards
   (scoped to cards that already have a hover-handler, never plain text panels) */
.atn-card, .lt-tpl-item a, .dv-kpi, .rr-row, .ac-issue {
	will-change: transform;
}

/* Page enter animation — content fades in once per navigation */
main.container-fluid > .row-fluid,
main.container-fluid > div:first-of-type {
	animation: eo-fade-in-up .28s var(--eo-ease-out) both;
}
@keyframes eo-fade-in-up {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Stagger child cards inside common grid containers — nicely cascades
   without manual delays in PHP */
.atn-card-grid > .atn-card,
.dv-grid-4 > *,
#admin-tools > .row-fluid > [class*="span"] {
	animation: eo-fade-in-up .26s var(--eo-ease-out) both;
}
.atn-card-grid > .atn-card:nth-child(1) { animation-delay: 0ms; }
.atn-card-grid > .atn-card:nth-child(2) { animation-delay: 30ms; }
.atn-card-grid > .atn-card:nth-child(3) { animation-delay: 60ms; }
.atn-card-grid > .atn-card:nth-child(4) { animation-delay: 90ms; }
.atn-card-grid > .atn-card:nth-child(5) { animation-delay: 120ms; }
.atn-card-grid > .atn-card:nth-child(6) { animation-delay: 150ms; }
.atn-card-grid > .atn-card:nth-child(n+7) { animation-delay: 180ms; }

/* Modal open animation — content scales subtly in, backdrop fades */
.modal.in, .modal.show {
	animation: eo-modal-in .22s var(--eo-ease-out) both;
}
@keyframes eo-modal-in {
	from { opacity: 0; transform: translateY(-8px) scale(0.985); }
	to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.modal-backdrop.in, .modal-backdrop.show { animation: eo-fade-in-only .18s var(--eo-ease-out) both; }
@keyframes eo-fade-in-only { from { opacity: 0; } to { opacity: 0.5; } }

/* Splash flash slide-in (already positioned bottom-right by Round 3) */
div.splash { animation: eo-splash-pop .28s var(--eo-ease-out) both; }
@keyframes eo-splash-pop {
	0%   { opacity: 0; transform: translateX(16px); }
	60%  { opacity: 1; transform: translateX(-2px); }
	100% { opacity: 1; transform: translateX(0); }
}

/* Refined focus ring — replace browser default with palette-matched
   2-layer ring (offset white + brand blue) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
.btn:focus-visible, .form-control:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 4px rgba(59, 130, 246, 0.55);
	border-radius: 6px;
}

/* ────────────────────────────────────────────────────────────
   3) LOADING & SKELETONS
   ──────────────────────────────────────────────────────────── */

/* Reusable skeleton building blocks. Use directly in HTML or via
   wrapper for AJAX placeholders. */
.eo-skel {
	background: linear-gradient(
		90deg,
		var(--eo-surface-alt) 0%,
		#eef2f7 50%,
		var(--eo-surface-alt) 100%
	);
	background-size: 200% 100%;
	border-radius: var(--eo-radius);
	animation: eo-skel-shimmer 1.4s infinite linear;
	color: transparent !important;
	user-select: none;
}
@keyframes eo-skel-shimmer {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

.eo-skel-text    { height: 12px; margin: 6px 0; }
.eo-skel-text.lg { height: 18px; }
.eo-skel-text.sm { height: 10px; }
.eo-skel-text.w-25 { width: 25%; } .eo-skel-text.w-50 { width: 50%; }
.eo-skel-text.w-75 { width: 75%; } .eo-skel-text.w-100 { width: 100%; }

.eo-skel-circle {
	width: 40px; height: 40px; border-radius: 50%;
}
.eo-skel-square {
	width: 60px; height: 60px; border-radius: var(--eo-radius);
}
.eo-skel-card {
	height: 80px; border-radius: var(--eo-radius-lg);
}

/* Modern AJAX spinner — replace the legacy GIF placeholder defined by
   application.js so every .ajax content area auto-gets a soft circular
   spinner. The container styling from Round 2 is kept; we just hide
   the img and overlay a CSS ring. */
.ajax > div[style*="opacity"] img,
.ajax > div[style*="opacity"] img.qq-thumbnail-selector,
.ajax img[src*="ajax-loader"],
.ajax img[src$="loader.gif"] {
	display: none !important;
}
.ajax > div[style*="opacity"]::after {
	content: '';
	display: block;
	width: 28px; height: 28px;
	margin: 36px auto;
	border: 2.5px solid var(--eo-border);
	border-top-color: var(--eo-primary);
	border-radius: 50%;
	animation: eo-spin .8s linear infinite;
}
@keyframes eo-spin { to { transform: rotate(360deg); } }

/* Generic small inline spinner — drop next to text */
.eo-spinner-inline {
	display: inline-block;
	width: 14px; height: 14px;
	border: 2px solid var(--eo-border);
	border-top-color: var(--eo-primary);
	border-radius: 50%;
	animation: eo-spin .7s linear infinite;
	vertical-align: -2px;
	margin-right: 4px;
}

/* ────────────────────────────────────────────────────────────
   4) EMPTY / ERROR / INFO STATES
   ──────────────────────────────────────────────────────────── */

/* Re-style any plain "table is empty" rows so they don't read as data
   (zebra-striped, full-width with muted tone). Pattern: any tbody whose
   only row has a single cell with colspan and the words "no data", "tidak
   ada", "kosong", "empty" is given the empty look. Cheap heuristic via
   td[colspan]:only-child via :only-of-type doesn't quite work in CSS, but
   we can target a known utility class. */
.table tbody tr.eo-empty-row td,
.table tbody tr.no-data td,
.table tbody tr td.empty-message,
.table tbody tr td[colspan]:only-child:empty {
	background: var(--eo-surface-alt);
	color: var(--eo-text-faint);
	font-style: italic;
	text-align: center;
	padding: 28px 12px;
	font-size: 13px;
}

/* Polished empty-state component (already exists from Round 2; extend
   with icon ring + secondary action button) */
.eo-empty-state {
	padding: 40px 20px;
}
.eo-empty-state .eo-empty-icon {
	width: 56px; height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--eo-surface-alt);
	color: var(--eo-text-faint);
	display: flex; align-items: center; justify-content: center;
	font-size: 22px;
}
.eo-empty-state h4 { margin: 0 0 6px; }
.eo-empty-state p  { margin: 0 0 14px; max-width: 360px; margin-left: auto; margin-right: auto; }
.eo-empty-state .eo-empty-action {
	display: inline-flex;
	align-items: center; gap: 6px;
	padding: 7px 14px;
	background: var(--eo-primary);
	color: #fff !important;
	border-radius: var(--eo-radius);
	font-size: 13px; font-weight: 500;
	text-decoration: none !important;
}
.eo-empty-state .eo-empty-action:hover { background: var(--eo-primary-600); }
.eo-empty-state .eo-empty-action-secondary {
	background: transparent;
	color: var(--eo-primary) !important;
	border: 1px solid var(--eo-border);
	margin-left: 6px;
}
.eo-empty-state .eo-empty-action-secondary:hover { background: var(--eo-primary-50); }

/* Error state — same shape but danger palette */
.eo-error-state {
	padding: 36px 20px;
	text-align: center;
	background: var(--eo-surface);
	border: 1px solid #fecaca;
	border-radius: var(--eo-radius-lg);
	color: var(--eo-text);
}
.eo-error-state .eo-error-icon {
	width: 56px; height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--eo-danger-50);
	color: var(--eo-danger);
	display: flex; align-items: center; justify-content: center;
	font-size: 22px;
}
.eo-error-state h4 { color: var(--eo-danger); margin: 0 0 6px; }
.eo-error-state p  { color: var(--eo-text-muted); margin: 0 0 14px; }

/* Info state — neutral / "do this next" */
.eo-info-state {
	padding: 36px 20px;
	text-align: center;
	background: var(--eo-primary-50);
	border: 1px solid #bfdbfe;
	border-radius: var(--eo-radius-lg);
	color: var(--eo-text);
}
.eo-info-state h4 { color: var(--eo-primary); margin: 0 0 6px; }

/* ────────────────────────────────────────────────────────────
   5) Per-page nudges (from audit)
   ──────────────────────────────────────────────────────────── */

/* MyDocuments / Search results — make the multiple table-condensed
   stacks feel like one coherent panel rather than 4 free-floating
   ones. Targets the pattern: legend → table → legend → table. */
main.container-fluid legend + .table.table-condensed {
	margin-top: 6px;
}

/* Settings — wide labels, narrow values, give them more breathing room */
main.container-fluid .table.table-condensed tbody td input.form-control,
main.container-fluid .table.table-condensed tbody td select.form-control {
	max-width: 100%;
}

/* MyAccount / users page — header card centred better */
.users-page-header img, .account-summary img {
	flex-shrink: 0;
	border-radius: 50%;
	width: 56px; height: 56px;
	object-fit: cover;
	border: 2px solid var(--eo-border);
}

/* Search bar inputs uniform height across pages — some pages use
   form-inline, some use plain divs; normalise */
.form-inline .form-control,
.form-inline .input-prepend .add-on,
.form-inline .input-append .add-on { height: 36px; }

/* Pagination link — bigger tap target, rounded ends on first/last */
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span { border-top-left-radius: var(--eo-radius); border-bottom-left-radius: var(--eo-radius); }
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span  { border-top-right-radius: var(--eo-radius); border-bottom-right-radius: var(--eo-radius); }
.pagination ul > li > a, .pagination ul > li > span { min-width: 32px; text-align: center; }

/* Refine the inline edit pencil so it doesn't crowd the editable text */
span.editable:after { opacity: 0.45; margin-left: 6px; transition: opacity var(--eo-dur) var(--eo-ease); }
span.editable:hover:after { opacity: 1; }

/* ────────────────────────────────────────────────────────────
   6) Accessibility / motion sensitivity
   ──────────────────────────────────────────────────────────── */

/* Respect users who disable motion at OS level */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* Reduce visual noise on very dense tables (>= 12 rows scrolled) */
.table.table-condensed { font-size: 12.5px; }
.table.table-condensed thead th { font-size: 10.5px; }

/* End — 2026 Polish Layer · Round 4 */

/* ============================================================
   E-Office Mandiri Taspen — 2026 Polish Layer · Round 5
   BRAND ALIGNMENT — Mandiri Taspen official palette.

   Primary  : Navy   #003D7A   (Mandiri biru)
   Accent   : Gold   #FFAB00   (Mandiri kuning keemasan)

   This round retires the generic indigo / purple accents in the
   earlier rounds and replaces them with the brand pair. All token
   redefinitions land at the bottom of the cascade so they override
   the indigo defaults from Rounds 1-4 without touching those rules
   directly. Inline-styled views that hardcoded indigo are also
   patched via high-specificity rules (kept narrow so they don't
   bleed into unrelated elements).
   ============================================================ */

:root {
	/* --- Mandiri navy palette --- */
	--eo-primary:      #003D7A;   /* primary brand navy (formerly #1e40af indigo) */
	--eo-primary-600:  #0050A0;   /* hover / active / brighter accent */
	--eo-primary-700:  #002D5C;   /* pressed / borders on dark */
	--eo-primary-900:  #001F4D;   /* darkest — navbar top stop */
	--eo-primary-50:   #E8F0F8;   /* surface tint */
	--eo-primary-100:  #C9DCEC;   /* hover surface */

	/* --- Mandiri gold accent (NEW token family) --- */
	--eo-accent:       #FFAB00;   /* signature Mandiri gold */
	--eo-accent-600:   #E69500;   /* hover */
	--eo-accent-700:   #BF7C00;   /* pressed */
	--eo-accent-50:    #FFF8E1;   /* surface tint */
	--eo-accent-100:   #FFE9B3;   /* hover surface */

	/* Focus ring now uses navy with a clear glow */
	--eo-focus-ring:   0 0 0 3px rgba(0, 80, 160, 0.28);
}

/* ────────────────────────────────────────────────────────────
   Patches for inline-styled views that hardcoded indigo / purple
   (#1d4ed8, #1e40af, #2563eb, #3b82f6, #7c3aed, #6d28d9). These
   selectors are narrow on purpose — they target the specific
   classes that previously rendered in indigo/purple, not every
   element on the page.
   ──────────────────────────────────────────────────────────── */

/* === Inputs / focus state (across all custom form fields) === */
.lt-input:focus, .rr-input:focus, .rs-input:focus, .lc-input:focus,
#rg-picker-search:focus, #rr-search:focus,
.note-editor.note-frame.note-focused {
	border-color: var(--eo-primary-600) !important;
	box-shadow: 0 0 0 3px rgba(0, 80, 160, 0.18) !important;
}

/* === Primary buttons in custom views === */
.lt-btn-primary, .lc-btn-primary, .rr-btn-primary,
.lt-add-btn, .rr-btn-toolbar.primary,
.rs-btn-primary,
.dv-btn-apply,
.ld-act-approve, .ld-panel-submit:not(.ld-panel-submit-warn):not(.ld-panel-submit-danger),
.ac-hero-btn {
	background: var(--eo-primary) !important;
	border-color: var(--eo-primary) !important;
	color: #fff !important;
}
.lt-btn-primary:hover, .lc-btn-primary:hover, .rr-btn-primary:hover,
.lt-add-btn:hover, .rr-btn-toolbar.primary:hover,
.rs-btn-primary:hover {
	background: var(--eo-primary-600) !important;
	border-color: var(--eo-primary-600) !important;
	color: #fff !important;
}

/* === Card-head icons + active states in admin tools === */
.atn-section-ico,
.atn-card-grid > .atn-card:hover .atn-card-ico {
	/* keep section icon's own gradient where defined inline — but
	   ensure default cards (no gradient set) get navy */
}
.atn-card:hover {
	border-color: var(--eo-primary-100) !important;
	box-shadow: 0 8px 20px rgba(0, 61, 122, 0.12) !important;
}
.atn-card:hover .atn-card-ico {
	background: var(--eo-primary-50) !important;
	color: var(--eo-primary) !important;
}
.atn-card:hover .atn-card-arrow { color: var(--eo-primary) !important; }

/* === Letter template inputs + accents === */
.lt-cat-head, .lt-tpl-item.selected a { color: var(--eo-primary) !important; }
.lt-tpl-item.selected a { background: var(--eo-primary-50) !important; }
.lt-chip:hover {
	background: var(--eo-primary-50) !important;
	border-color: var(--eo-primary-100) !important;
	color: var(--eo-primary) !important;
}
.lt-mode-toggle [data-mode].active {
	background: var(--eo-primary) !important;
	box-shadow: 0 1px 2px rgba(0, 61, 122, 0.22) !important;
}
.note-editor.codeview .note-btn.active {
	background: var(--eo-primary) !important;
	border-color: var(--eo-primary) !important;
}
/* layout snippet quick-insert buttons */
.lt-layout-btn:hover {
	background: var(--eo-primary-50) !important;
	border-color: var(--eo-primary-100) !important;
	color: var(--eo-primary) !important;
	box-shadow: 0 4px 10px rgba(0, 61, 122, 0.10) !important;
}
.lt-layout-btn:hover .lt-layout-preview { background: var(--eo-primary-100) !important; }
.lt-layout-btn:hover .lt-layout-preview .lp-line,
.lt-layout-btn:hover .lt-layout-preview .lp-txt { background: var(--eo-primary) !important; }

/* === Routing rule manager === */
.rr-cond { background: var(--eo-primary-50) !important; border-color: var(--eo-primary-100) !important; color: var(--eo-primary-700) !important; }
.rr-act-user, .rr-act-unit { background: var(--eo-primary-50) !important; border-color: var(--eo-primary-100) !important; color: var(--eo-primary) !important; }
.rr-row.selected { background: var(--eo-accent-50) !important; }
.rr-search-input:focus { border-color: var(--eo-primary-600) !important; }

/* === Routing rule graph (replace purple with brand navy / gold) === */
.rg-intro {
	background: linear-gradient(135deg, var(--eo-primary-50) 0%, var(--eo-accent-50) 100%) !important;
	border-color: var(--eo-primary-100) !important;
	color: var(--eo-primary-700) !important;
}
.rg-intro-ico {
	background: linear-gradient(135deg, var(--eo-primary) 0%, var(--eo-primary-600) 100%) !important;
	box-shadow: 0 2px 6px rgba(0, 61, 122, 0.28) !important;
}
.rg-intro strong { color: var(--eo-primary) !important; }
.rg-back { color: var(--eo-primary) !important; border-color: var(--eo-primary-100) !important; }
.rg-back:hover { background: var(--eo-primary-50) !important; color: var(--eo-primary-700) !important; }
.rg-pick.is-active {
	background: var(--eo-primary-50) !important;
	border-color: var(--eo-primary-100) !important;
}
.rg-pick.is-active .rg-pick-name { color: var(--eo-primary-700) !important; }
.rg-pick.is-active .rg-pick-prio {
	background: var(--eo-primary) !important;
	border-color: var(--eo-primary) !important;
	color: #fff !important;
}
#rg-mode-banner {
	background: var(--eo-primary-50) !important;
	border-color: var(--eo-primary-100) !important;
	color: var(--eo-primary-700) !important;
}
#rg-mode-banner i.fa-filter { color: var(--eo-primary) !important; }
#rg-mode-all { background: var(--eo-primary) !important; }
#rg-mode-all:hover { background: var(--eo-primary-600) !important; }

/* === Letter Create + List page tokens === */
.lc-intro { background: var(--eo-primary-50) !important; border-color: var(--eo-primary-100) !important; color: var(--eo-primary-700) !important; }
.lc-intro strong { color: var(--eo-primary) !important; }
.lc-destination .lc-dest-icon {
	background: var(--eo-primary-50) !important;
	color: var(--eo-primary) !important;
}
.lc-destination .lc-dest-tag-auto {
	background: var(--eo-accent-50) !important;
	color: var(--eo-accent-700) !important;
	border-color: var(--eo-accent-100) !important;
}

/* === Audit chain verifier — INTACT/INTEGRITY uses navy + gold === */
/* Hero already toggles green/red via PHP — leave that semantic.
   But the explainer cards + chain head box should brand-match. */
.ac-explainer { background: var(--eo-primary-50) !important; border-color: var(--eo-primary-100) !important; color: var(--eo-primary-700) !important; }
.ac-explainer code { background: var(--eo-accent-50) !important; border-color: var(--eo-accent-100) !important; color: var(--eo-accent-700) !important; }

/* === E-Office dashboard hero & KPIs === */
.dv-hero {
	background: linear-gradient(135deg, var(--eo-primary-900) 0%, var(--eo-primary) 55%, var(--eo-primary-600) 100%) !important;
}
.dv-kpi:hover {
	border-color: var(--eo-primary-100) !important;
	box-shadow: 0 4px 14px rgba(0, 61, 122, 0.10) !important;
}

/* === GOLD ACCENT usage — recognise importance / win states === */
/* "WINNER" / "DEFAULT" / "PRIMARY" labels in lists across the app */
.rs-allmatched-tag,
.rs-diag-tag-win,
.lt-stat.default .value,
.atn-card[data-search*="default"] .atn-card-ico,
.badge.badge-default-template,
i.fa-star[style*="#fbbf24"],
i.fa-star[style*="#f59e0b"] {
	color: var(--eo-accent-700) !important;
}
.rs-diag-tag-win {
	background: var(--eo-accent) !important;
	color: #1F1F1F !important;
}
.rs-allmatched-tag { background: var(--eo-accent) !important; color: #1F1F1F !important; }

/* Gold border accent on cards user is editing right now */
.lt-tpl-item.selected a::before,
.rr-row.selected::before {
	content: '';
	display: block;
	position: absolute; left: 0; top: 4px; bottom: 4px;
	width: 3px; background: var(--eo-accent); border-radius: 0 3px 3px 0;
}
.lt-tpl-item.selected a, .rr-row.selected { position: relative; }

/* === Splash flash — info default uses navy === */
div.splash:not([data-type]),
div.splash[data-type="info"] { border-left-color: var(--eo-primary) !important; }
div.splash[data-type="success"] { /* stays green semantic */ }
div.splash[data-type="warning"] { /* stays warning semantic */ }
div.splash[data-type="error"]   { /* stays danger semantic */ }

/* === Selection colour matches brand === */
::selection { background: rgba(255, 171, 0, 0.30); color: var(--eo-text); }

/* === Focus ring (override Round 4) === */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
.btn:focus-visible, .form-control:focus-visible {
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 4px rgba(0, 80, 160, 0.55) !important;
}

/* === Bootstrap utility classes that some views still use === */
.text-primary { color: var(--eo-primary) !important; }
.bg-primary   { background-color: var(--eo-primary) !important; }
.btn-info     { background-color: var(--eo-primary-600) !important; border-color: var(--eo-primary-600) !important; }
.btn-info:hover { background-color: var(--eo-primary) !important; border-color: var(--eo-primary) !important; }

/* === Code chip inline === */
code { background: var(--eo-accent-50); color: var(--eo-accent-700); border: 1px solid var(--eo-accent-100); }

/* ────────────────────────────────────────────────────────────
   TOP FIXED NAVBAR — Mandiri navy gradient
   Covers BOTH active themes:
     - Bootstrap 4 (current): nav.navbar.bg-dark.fixed-top
     - Bootstrap 2 (legacy fallback): .navbar.navbar-inverse.navbar-fixed-top
   plus their inner dropdown menus.
   ──────────────────────────────────────────────────────────── */

/* --- Bootstrap 4 navbar (active theme) --- */
nav.navbar.fixed-top,
nav.navbar.bg-dark.fixed-top,
nav.navbar.navbar-dark.fixed-top {
	background: linear-gradient(180deg, var(--eo-primary-900) 0%, var(--eo-primary) 100%) !important;
	background-image: linear-gradient(180deg, var(--eo-primary-900) 0%, var(--eo-primary) 100%) !important;
	background-color: var(--eo-primary) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
	box-shadow: 0 4px 14px rgba(0, 31, 77, 0.22), 0 1px 0 rgba(255,255,255,0.06) inset !important;
}
nav.navbar.fixed-top .navbar-brand,
nav.navbar.fixed-top .nav-link {
	color: #ffffff !important;
}
nav.navbar.fixed-top .nav-link {
	color: rgba(255, 255, 255, 0.86) !important;
	font-weight: 500;
	transition: background-color var(--eo-dur) var(--eo-ease), color var(--eo-dur) var(--eo-ease);
}
nav.navbar.fixed-top .nav-link:hover,
nav.navbar.fixed-top .nav-link:focus {
	color: #ffffff !important;
	background-color: rgba(255, 255, 255, 0.10) !important;
	border-radius: 6px;
}
nav.navbar.fixed-top .nav-item.dropdown.show > .nav-link,
nav.navbar.fixed-top .nav-item.active > .nav-link {
	color: #ffffff !important;
	background-color: rgba(255, 171, 0, 0.18) !important;       /* gold accent on active */
	border-radius: 6px;
}

/* navbar dropdown panel (Bootstrap 4 .dropdown-menu) */
nav.navbar.fixed-top .dropdown-menu {
	background: #ffffff !important;
	border: 1px solid var(--eo-border) !important;
	border-radius: 10px !important;
	box-shadow: var(--eo-shadow-lg) !important;
	padding: 6px !important;
	margin-top: 6px !important;
	min-width: 220px !important;
}
nav.navbar.fixed-top .dropdown-menu .dropdown-item {
	color: var(--eo-text) !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	padding: 8px 12px !important;
	border-radius: 6px !important;
	transition: background-color var(--eo-dur-fast) var(--eo-ease), color var(--eo-dur-fast) var(--eo-ease);
}
nav.navbar.fixed-top .dropdown-menu .dropdown-item:hover,
nav.navbar.fixed-top .dropdown-menu .dropdown-item:focus {
	background-color: var(--eo-primary-50) !important;
	color: var(--eo-primary) !important;
}
nav.navbar.fixed-top .dropdown-menu .dropdown-item.active {
	background-color: var(--eo-primary) !important;
	color: #ffffff !important;
}
nav.navbar.fixed-top .dropdown-divider {
	margin: 4px 6px !important;
	background: var(--eo-border-soft) !important;
	border-color: var(--eo-border-soft) !important;
}

/* --- Bootstrap 2 legacy navbar (in case theme switched back) --- */
.navbar.navbar-inverse.navbar-fixed-top .navbar-inner {
	background: linear-gradient(180deg, var(--eo-primary-900) 0%, var(--eo-primary) 100%) !important;
	background-image: linear-gradient(180deg, var(--eo-primary-900) 0%, var(--eo-primary) 100%) !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
	box-shadow: 0 4px 14px rgba(0, 31, 77, 0.22), 0 1px 0 rgba(255,255,255,0.06) inset !important;
}
.navbar.navbar-inverse.navbar-fixed-top .nav > li.active > a,
.navbar.navbar-inverse.navbar-fixed-top .nav > li.dropdown.open > a {
	background: rgba(255, 171, 0, 0.18) !important;             /* gold accent on active */
	color: #ffffff !important;
}
.navbar.navbar-inverse.navbar-fixed-top .navbar-search .search-query:focus {
	border-color: var(--eo-accent) !important;
	box-shadow: 0 0 0 3px rgba(255, 171, 0, 0.22) !important;
}
/* legacy navbar dropdown items use the BS2 .dropdown-menu inside .navbar-inverse */
.navbar.navbar-inverse.navbar-fixed-top .dropdown-menu > li > a:hover,
.navbar.navbar-inverse.navbar-fixed-top .dropdown-menu > li > a:focus,
.navbar.navbar-inverse.navbar-fixed-top .dropdown-menu > li.active > a {
	background: var(--eo-primary-50) !important;
	color: var(--eo-primary) !important;
}

/* "su" (substitute user) navbar override — keep DANGER red so admins can
   see the elevated session at a glance. Already defined inline as a red
   gradient; we just confirm the rule wins over our navy override. */
nav.navbar.fixed-top.su-active,
.navbar.navbar-inverse.navbar-fixed-top.su-active .navbar-inner {
	background: linear-gradient(180deg, #7f1d1d 0%, #b91c1c 100%) !important;
	background-image: linear-gradient(180deg, #7f1d1d 0%, #b91c1c 100%) !important;
}

/* End — 2026 Polish Layer · Round 5 (Brand) */


/* ============================================================
   E-Office Mandiri Taspen — design tokens (Round 6 prelude)
   Re-declared here for the bootstrap4 theme path. Mirrors the
   palette established in the legacy bootstrap theme's Rounds 1-5
   so var(--eo-primary, ...) etc. resolve to brand values, not the
   inline hex fallbacks.
   ============================================================ */
:root {
    --eo-primary:      #003D7A;
    --eo-primary-900:  #001F4D;
    --eo-primary-50:   #E8F0F8;
    --eo-accent:       #FFAB00;
    --eo-accent-600:   #E69500;
    --eo-bg:           #f6f8fb;
    --eo-text:         #0f172a;
    --eo-border:       #e5e7eb;
    --eo-border-soft:  #eef2f7;
    --eo-radius:       6px;
    --eo-shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.06);
    --eo-ease:         cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================================
   E-Office Mandiri Taspen — 2026 Polish Layer · Round 6
   SHELL OVERHAUL — sidebar + slim top header + content wrapper.
   All rules scoped to body.eo-shell-v2 so legacy theme stays untouched.

   Tokens reused from Rounds 1–5: --eo-primary, --eo-accent, --eo-bg,
   --eo-text, --eo-border, --eo-shadow-sm, --eo-radius, etc.

   Layout: <header.eo-topbar> (sticky, 56px) on top, <aside.eo-sidebar>
   (fixed 220px) on the left, <main.eo-main> takes the rest. Mobile
   collapses sidebar into an off-canvas drawer.
   ============================================================ */

/* === Layout — body offsets when v2 is on === */
body.eo-shell-v2 { padding-top: 0 !important; padding-left: 0 !important; min-height: 100vh; }
body.eo-shell-v2 main.eo-main {
    margin-left: 220px;
    padding-top: 56px;
    padding-left: 0;
    padding-right: 0;
    min-height: 100vh;
    background: var(--eo-bg);
    transition: margin-left .18s var(--eo-ease, ease);
}
body.eo-shell-v2.eo-sidebar-collapsed main.eo-main { margin-left: 60px; }

/* === Top header === */
body.eo-shell-v2 .eo-topbar {
    position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 1030;
    background: linear-gradient(180deg, var(--eo-primary-900, #001F4D) 0%, var(--eo-primary, #003D7A) 100%);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 4px 14px rgba(0, 31, 77, 0.22);
    display: flex; align-items: center; gap: 14px;
    padding: 0 16px;
}
body.eo-shell-v2 .eo-topbar-su {
    background: linear-gradient(180deg, #7f1d1d 0%, #b91c1c 100%) !important;
}
body.eo-shell-v2 .eo-hamburger {
    background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16);
    color: #fff; padding: 6px 10px; border-radius: 7px; cursor: pointer;
    display: inline-flex; align-items: center; font-size: 13px;
    transition: background-color .14s var(--eo-ease, ease);
}
body.eo-shell-v2 .eo-hamburger:hover { background: rgba(255,255,255,0.18); }
body.eo-shell-v2 .eo-hamburger:focus-visible { outline: 2px solid var(--eo-accent, #FFAB00); outline-offset: 2px; }
body.eo-shell-v2 .eo-brand {
    display: inline-flex; align-items: center; gap: 9px; color: #fff !important;
    text-decoration: none;
}
body.eo-shell-v2 .eo-brand:hover { text-decoration: none; opacity: 0.92; }
body.eo-shell-v2 .eo-brand-logo {
    background: var(--eo-accent, #FFAB00); color: var(--eo-primary, #003D7A);
    padding: 5px 10px; border-radius: 5px; font-weight: 800; font-size: 13px;
}
body.eo-shell-v2 .eo-brand-text { font-weight: 600; font-size: 14px; }
body.eo-shell-v2 .eo-search {
    flex: 1; max-width: 380px; position: relative; margin: 0 auto;
}
body.eo-shell-v2 .eo-search > i.fa-search {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,0.55); font-size: 12px; pointer-events: none;
}
body.eo-shell-v2 .eo-search input {
    width: 100%; height: 36px; padding: 0 14px 0 32px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 99px; color: #fff; font-size: 12.5px;
}
body.eo-shell-v2 .eo-search input::placeholder { color: rgba(255,255,255,0.62); }
body.eo-shell-v2 .eo-search input:focus {
    outline: none; background: rgba(255,255,255,0.18);
    border-color: rgba(255, 171, 0, 0.55);
    box-shadow: 0 0 0 3px rgba(255, 171, 0, 0.18);
}
body.eo-shell-v2 .eo-header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
body.eo-shell-v2 .eo-bell {
    background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16);
    color: #fff; padding: 6px 11px; border-radius: 8px; position: relative;
    text-decoration: none; font-size: 13px;
}
body.eo-shell-v2 .eo-bell:hover { background: rgba(255,255,255,0.18); color: #fff; text-decoration: none; }
body.eo-shell-v2 .eo-bell-count {
    position: absolute; top: -3px; right: -3px;
    background: var(--eo-accent, #FFAB00); color: var(--eo-primary, #003D7A);
    font-size: 9px; font-weight: 800;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 50%; line-height: 16px;
    border: 1.5px solid var(--eo-primary, #003D7A);
    display: inline-block; text-align: center;
}
body.eo-shell-v2 .eo-user-pill {
    background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16);
    color: #fff; padding: 5px 10px 5px 5px; border-radius: 99px;
    display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
    cursor: pointer;
}
body.eo-shell-v2 .eo-user-pill:hover { background: rgba(255,255,255,0.18); }
body.eo-shell-v2 .eo-user-avatar {
    background: var(--eo-accent, #FFAB00); color: var(--eo-primary, #003D7A);
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11px;
}
body.eo-shell-v2 .eo-user-name { font-weight: 500; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.eo-shell-v2 .eo-user .dropdown-menu { margin-top: 6px; }

/* === Sidebar === */
body.eo-shell-v2 .eo-sidebar {
    position: fixed; top: 56px; bottom: 0; left: 0;
    width: 220px; z-index: 1020;
    background: #fafbfc; border-right: 1px solid var(--eo-border, #e5e7eb);
    display: flex; flex-direction: column;
    transition: width .18s var(--eo-ease, ease), transform .22s var(--eo-ease, ease);
}
body.eo-shell-v2.eo-sidebar-collapsed .eo-sidebar { width: 60px; }
body.eo-shell-v2 .eo-sidebar-scroll {
    flex: 1; overflow-y: auto; padding: 12px 8px;
}
body.eo-shell-v2 .eo-side-cta {
    background: linear-gradient(135deg, var(--eo-accent, #FFAB00), var(--eo-accent-600, #E69500));
    color: #1F1F1F !important; font-weight: 700;
    padding: 9px 12px; border-radius: 8px;
    display: flex; align-items: center; gap: 8px; font-size: 13px;
    box-shadow: 0 2px 6px rgba(255, 171, 0, 0.30);
    text-decoration: none !important;
    margin-bottom: 12px;
    min-height: 38px; box-sizing: border-box;
    transition: transform .12s var(--eo-ease, ease), box-shadow .15s var(--eo-ease, ease);
}
body.eo-shell-v2 .eo-side-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 171, 0, 0.40);
}
body.eo-shell-v2 .eo-side-cta i { font-size: 13px; }
body.eo-shell-v2 .eo-side-group {
    font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.06em;
    font-weight: 700; padding: 12px 10px 4px; user-select: none;
    display: flex; align-items: center; justify-content: space-between;
}
body.eo-shell-v2 .eo-side-group:first-child { padding-top: 4px; }
body.eo-shell-v2 .eo-side-group-collapsible { cursor: pointer; }
body.eo-shell-v2 .eo-side-group-collapsible:hover { color: #475569; }
body.eo-shell-v2 .eo-side-group-chev {
    font-size: 9px; transition: transform .15s var(--eo-ease, ease);
}
body.eo-shell-v2 .eo-side-group.eo-side-group-collapsed .eo-side-group-chev {
    transform: rotate(-90deg);
}
/* Group hiding: eo-shell.js applies .eo-side-hide to items inside a collapsed group. */
body.eo-shell-v2 .eo-side-hide { display: none !important; }

body.eo-shell-v2 .eo-side-item {
    padding: 7px 10px; border-radius: 6px; color: #475569;
    display: flex; align-items: center; gap: 9px; margin-bottom: 1px;
    text-decoration: none !important; font-size: 13px; min-height: 34px; box-sizing: border-box;
    position: relative;
    transition: background-color .12s var(--eo-ease, ease), color .12s var(--eo-ease, ease);
}
body.eo-shell-v2 .eo-side-item i {
    width: 16px; text-align: center; color: #64748b; font-size: 13px; flex-shrink: 0;
}
body.eo-shell-v2 .eo-side-label {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.eo-shell-v2 .eo-side-item:hover {
    background: #f3f4f6; color: #0f172a;
}
body.eo-shell-v2 .eo-side-item:hover i { color: #0f172a; }
body.eo-shell-v2 .eo-side-item-active {
    background: var(--eo-primary-50, #E8F0F8);
    color: var(--eo-primary, #003D7A) !important;
    font-weight: 600;
}
body.eo-shell-v2 .eo-side-item-active i { color: var(--eo-primary, #003D7A); }
body.eo-shell-v2 .eo-side-item-active::before {
    content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px;
    background: var(--eo-accent, #FFAB00); border-radius: 0 3px 3px 0;
}
body.eo-shell-v2 .eo-side-badge {
    margin-left: auto;
    background: var(--eo-accent, #FFAB00); color: #1F1F1F;
    padding: 1px 7px; border-radius: 99px; font-size: 10px; font-weight: 700;
    flex-shrink: 0;
}
body.eo-shell-v2 .eo-side-collapse-toggle {
    background: #fff; border: 0; border-top: 1px solid var(--eo-border, #e5e7eb);
    color: #475569; padding: 10px 14px; cursor: pointer;
    width: 100%; text-align: left; font-size: 12px; font-weight: 500;
    display: flex; align-items: center; gap: 10px;
    transition: color .12s var(--eo-ease, ease), background-color .12s var(--eo-ease, ease);
}
body.eo-shell-v2 .eo-side-collapse-toggle i { width: 16px; text-align: center; color: #64748b; }
body.eo-shell-v2 .eo-side-collapse-toggle:hover { color: var(--eo-primary, #003D7A); background: #f3f4f6; }
body.eo-shell-v2 .eo-side-collapse-toggle:hover i { color: var(--eo-primary, #003D7A); }
body.eo-shell-v2.eo-sidebar-collapsed .eo-side-collapse-toggle { justify-content: center; padding: 10px 0; }
body.eo-shell-v2.eo-sidebar-collapsed .eo-side-collapse-toggle i { transform: rotate(180deg); }

/* Collapsed icon-only mode */
body.eo-shell-v2.eo-sidebar-collapsed .eo-side-label,
body.eo-shell-v2.eo-sidebar-collapsed .eo-side-group,
body.eo-shell-v2.eo-sidebar-collapsed .eo-side-cta span,
body.eo-shell-v2.eo-sidebar-collapsed .eo-side-badge { display: none !important; }
body.eo-shell-v2.eo-sidebar-collapsed .eo-side-item,
body.eo-shell-v2.eo-sidebar-collapsed .eo-side-cta { justify-content: center; padding: 7px 0; }

/* === Backdrop (mobile drawer) === */
body.eo-shell-v2 .eo-backdrop {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4);
    z-index: 1010; opacity: 0; pointer-events: none;
    transition: opacity .18s var(--eo-ease, ease);
}
body.eo-shell-v2.eo-drawer-open .eo-backdrop {
    opacity: 1; pointer-events: auto;
}

/* === Responsive — tablet === */
@media (max-width: 1023px) and (min-width: 768px) {
    body.eo-shell-v2 .eo-sidebar { width: 60px; }
    body.eo-shell-v2 main.eo-main { margin-left: 60px; }
    body.eo-shell-v2 .eo-side-label,
    body.eo-shell-v2 .eo-side-group,
    body.eo-shell-v2 .eo-side-cta span,
    body.eo-shell-v2 .eo-side-badge { display: none; }
    body.eo-shell-v2 .eo-side-item,
    body.eo-shell-v2 .eo-side-cta { justify-content: center; padding: 7px 0; }
    body.eo-shell-v2 .eo-brand-text { display: none; }
}

/* === Responsive — mobile === */
@media (max-width: 767px) {
    body.eo-shell-v2 main.eo-main { margin-left: 0; padding-top: 56px; }
    body.eo-shell-v2 .eo-sidebar {
        transform: translateX(-100%); width: 260px;
        box-shadow: 4px 0 14px rgba(15, 23, 42, 0.18);
    }
    body.eo-shell-v2.eo-drawer-open .eo-sidebar { transform: translateX(0); }
    /* hamburger always visible — the cross-viewport toggle */
    body.eo-shell-v2 .eo-search { max-width: none; }
    body.eo-shell-v2 .eo-brand-text { display: none; }
    body.eo-shell-v2 .eo-user-name { display: none; }
    body.eo-shell-v2 .eo-side-collapse-toggle { display: none; }
}

/* === Print === */
@media print {
    body.eo-shell-v2 .eo-sidebar,
    body.eo-shell-v2 .eo-topbar,
    body.eo-shell-v2 .eo-backdrop { display: none !important; }
    body.eo-shell-v2 main.eo-main { margin-left: 0 !important; padding-top: 0 !important; }
}

/* End — 2026 Polish Layer · Round 6 (Shell Overhaul) */

/* ============================================================
   E-Office Mandiri Taspen — Unified Typography (Round 7)
   One font stack across every surface. Override Bootstrap, Summernote,
   Select2, jqtree, and any vendor that leaks its own font-family.
   ============================================================ */
:root {
    --eo-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --eo-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Body + every Bootstrap / vendor / Summernote surface uses the same stack. */
html, body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, div, span, label, legend, fieldset, blockquote,
input, select, textarea, button, optgroup,
.btn, .form-control, .form-select, .input-group-text,
.dropdown-menu, .dropdown-item,
.modal, .modal-title, .modal-body, .modal-header, .modal-footer,
.card, .card-title, .card-body, .card-header, .card-footer,
.nav, .nav-link, .navbar, .navbar-brand,
.table, .table th, .table td,
.alert, .badge, .breadcrumb, .breadcrumb-item, .pagination,
.popover, .popover-body, .popover-header, .tooltip, .tooltip-inner,
.toast, .toast-body, .toast-header,
.list-group, .list-group-item,
.note-editor, .note-toolbar, .note-toolbar *, .note-editable,
.note-editable p, .note-editable div, .note-editable span,
.select2-container, .select2-selection, .select2-results__option,
.jqtree, .jqtree-element, .jqtree-title,
.datepicker, .datepicker-dropdown,
.eo-topbar, .eo-sidebar, .eo-main, .eo-card, .eo-table {
    font-family: var(--eo-font-base);
}

/* Monospaced contexts kept intentionally as monospace. */
code, pre, kbd, samp, tt,
.monospace, .text-monospace,
[class*="bank-code"], .badge-mono,
.note-codable {
    font-family: var(--eo-font-mono);
}

/* Font Awesome glyph fonts must keep their icon font. */
.fa, .fas, .far, .fab, .fal, .fad,
[class^="fa-"], [class*=" fa-"] {
    font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}

/* End — Unified Typography (Round 7) */

/* ============================================================
   E-Office Mandiri Taspen — File picker (Round 8 — revised)
   The native <input type="file"> is replaced at runtime by
   eo-shell.js with a wrapper that has a branded button + filename
   label. The real input is kept in DOM (for form submission) but
   visually hidden. See initFilePickers() in eo-shell.js.
   ============================================================ */
.eo-file-picker {
    display: inline-flex; align-items: center; gap: 0;
    background: #fff; border: 1px solid var(--eo-border, #d1d5db);
    border-radius: 8px; padding: 4px;
    max-width: 100%;
    transition: border-color .15s var(--eo-ease, ease), box-shadow .15s var(--eo-ease, ease);
}
.eo-file-picker:hover { border-color: #94a3b8; }
.eo-file-picker:focus-within {
    border-color: var(--eo-primary, #003D7A);
    box-shadow: 0 0 0 3px rgba(0, 61, 122, 0.12);
}

.eo-file-picker-btn {
    background: linear-gradient(180deg, var(--eo-primary, #003D7A) 0%, var(--eo-primary-900, #001F4D) 100%);
    color: #fff; border: 0; border-radius: 6px;
    padding: 7px 14px; cursor: pointer;
    font-family: var(--eo-font-base);
    font-size: 12.5px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 7px;
    white-space: nowrap;
    transition: filter .14s var(--eo-ease, ease), transform .08s var(--eo-ease, ease);
}
.eo-file-picker-btn:hover { filter: brightness(1.1); }
.eo-file-picker-btn:active { transform: translateY(1px); }
.eo-file-picker-btn i { font-size: 12px; }

.eo-file-picker-name {
    flex: 1; min-width: 0;
    padding: 0 12px;
    font-size: 13px; color: #94a3b8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eo-file-picker-name.eo-file-picker-has-file {
    color: var(--eo-text, #0f172a); font-weight: 500;
}

.eo-file-picker-clear {
    background: transparent; border: 0;
    color: #cbd5e1; cursor: pointer; padding: 4px 10px;
    font-size: 14px; line-height: 1;
    transition: color .12s var(--eo-ease, ease);
    display: none;
}
.eo-file-picker-clear:hover { color: #ef4444; }
.eo-file-picker.eo-file-picker-filled .eo-file-picker-clear { display: inline-flex; }

/* Visually hide the real input but keep it focusable for form validation. */
.eo-file-picker-input {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Disabled state */
.eo-file-picker.eo-file-picker-disabled {
    background: #f1f5f9; cursor: not-allowed;
}
.eo-file-picker.eo-file-picker-disabled .eo-file-picker-btn {
    background: #cbd5e1; cursor: not-allowed; filter: none;
}
.eo-file-picker.eo-file-picker-disabled .eo-file-picker-name { color: #cbd5e1; }

/* End — File picker (Round 8 — revised) */

/* ============================================================
   E-Office Mandiri Taspen — Login page styling (Round 9)
   Shared CSS for /out/out.Login.php and /out/out.LoginSsoMfa.php.
   Extracted from inline <style> in class.Login.php so the SSO/MFA
   interstitial gets the exact same look without duplicating CSS.
   All rules scoped to body.login.
   ============================================================ */
	html, body { height:100%; margin:0; }
	body.login {
		background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 50%, #f1f5f9 100%);
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24px 16px;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	}
	body.login legend,
	body.login .statusbar-container { display:none !important; }

	#login_wrapper {
		width: 100%;
		max-width: 420px;
		background: #ffffff;
		border-radius: 16px;
		box-shadow:
			0 20px 50px rgba(15, 23, 42, 0.12),
			0 2px 6px rgba(15, 23, 42, 0.04);
		padding: 36px 32px 28px;
		border: 1px solid rgba(255, 255, 255, 0.6);
	}

	/* === Brand === */
	.login-brand { text-align:center; margin-bottom:24px; }
	.login-brand .login-logo {
		width:72px; height:72px; margin:0 auto 14px;
		display:block; object-fit:contain;
		border-radius:18px; padding:8px;
		background:#ffffff;
		box-shadow:
			0 8px 22px rgba(15, 23, 42, 0.10),
			0 0 0 1px rgba(15, 23, 42, 0.04);
	}
	.login-brand h1 {
		margin:0 0 4px;
		font-size:21px; font-weight:700; color:#111827;
		letter-spacing:-0.02em;
	}
	.login-brand p { margin:0; color:#6b7280; font-size:13px; }

	/* === Error pill === */
	.login-error {
		background:#fef2f2; color:#991b1b; border:1px solid #fecaca;
		padding:10px 14px; border-radius:10px;
		font-size:13px; margin-bottom:18px;
		display:flex; align-items:center; gap:8px;
	}

	/* === Form === */
	#login_wrapper form { margin:0; padding:0; background:transparent; border:none; box-shadow:none; }
	.lf-group { margin-bottom:14px; }
	.lf-label {
		display:block;
		font-size:12px; font-weight:600; color:#374151;
		letter-spacing:.01em;
		margin:0 0 6px;
		text-align:left;
		width:auto; padding:0; float:none;
	}
	.lf-input-wrap { position:relative; }
	.lf-input-wrap > i.lf-prefix {
		position:absolute; left:14px; top:50%; transform:translateY(-50%);
		color:#9ca3af; font-size:14px; pointer-events:none; z-index:1;
	}
	/* High specificity to beat bootstrap.css */
	body.login .lf-input,
	body.login .lf-select,
	body.login input.lf-input,
	body.login select.lf-select {
		width:100% !important; height:44px !important;
		padding:0 14px 0 40px !important;
		margin:0 !important;
		border:1px solid #d1d5db !important; border-radius:10px !important;
		background:#fff !important; font-size:14px !important; color:#111827 !important;
		box-sizing:border-box !important;
		display:block;
		box-shadow:none !important;
		transition: border-color .15s, box-shadow .15s;
	}
	body.login .lf-input::placeholder { color:#9ca3af; }
	body.login .lf-input:focus,
	body.login .lf-select:focus {
		outline:none !important;
		border-color:#0066B3 !important;
		box-shadow:0 0 0 3px rgba(0,102,179,0.12) !important;
	}
	body.login .lf-select {
		appearance:none; -webkit-appearance:none;
		padding-right:36px !important;
		background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
		background-position: right 14px center !important;
		background-repeat: no-repeat !important;
	}
	#pwd-toggle {
		position:absolute; right:6px; top:50%; transform:translateY(-50%);
		background:transparent; border:none; color:#9ca3af; cursor:pointer;
		width:32px; height:32px; border-radius:6px;
		display:flex; align-items:center; justify-content:center;
		z-index:1;
	}
	#pwd-toggle:hover { color:#374151; background:#f3f4f6; }
	body.login .lf-input.has-toggle { padding-right:44px !important; }

	/* === Submit === */
	body.login button.lf-submit,
	body.login .lf-submit {
		width:100% !important; margin-top:6px !important;
		background: linear-gradient(135deg, #0066B3, #003D7A) !important;
		background-color:#003D7A !important;
		border:none !important; color:#fff !important;
		font-weight:600 !important; font-size:14px !important;
		padding:13px !important;
		border-radius:10px !important;
		cursor:pointer;
		display:flex; align-items:center; justify-content:center; gap:8px;
		text-shadow:none !important;
		transition: transform .12s, box-shadow .15s, filter .12s;
		box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25) !important;
	}
	body.login .lf-submit:hover {
		transform: translateY(-1px);
		box-shadow: 0 8px 20px rgba(29, 78, 216, 0.30) !important;
		filter: brightness(1.04);
	}

	/* === Divider & SSO === */
	.login-divider { text-align:center; margin:20px 0 14px; position:relative; }
	.login-divider::before {
		content:''; position:absolute; left:0; right:0; top:50%;
		height:1px; background:#e5e7eb;
	}
	.login-divider span {
		position:relative; background:#fff; padding:0 12px;
		color:#9ca3af; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
	}
	body.login a.sso-btn {
		display:flex !important; align-items:center; justify-content:center; gap:8px;
		width:100% !important; box-sizing:border-box !important;
		padding:12px 16px !important;
		background:#fff !important; color:#374151 !important;
		border:1px solid #d1d5db !important; border-radius:10px !important;
		font-weight:500 !important; font-size:13.5px !important;
		text-decoration:none !important;
		transition: all .15s ease;
	}
	body.login a.sso-btn:hover {
		background:#f9fafb !important; border-color:#0066B3 !important; color:#003D7A !important;
	}

	/* === Footer === */
	.login-footer {
		margin-top:22px; padding-top:18px;
		border-top:1px solid #f3f4f6;
		text-align:center;
		color:#6b7280; font-size:12.5px;
	}
	.login-footer a { color:#003D7A; text-decoration:none; }
	.login-footer a:hover { text-decoration:underline; }

	/* Neutralize legacy bootstrap .form-horizontal grid (defensive) */
	body.login #login_wrapper .control-group { margin:0; }
	body.login #login_wrapper .controls { margin-left:0; }

	@media (max-width:480px) {
		#login_wrapper { padding:28px 22px 22px; border-radius:14px; }
		.login-brand h1 { font-size:19px; }
		body.login .lf-input,
		body.login .lf-select { height:42px !important; }
	}

	/* === Validation error states (jquery.validate.js) === */
	body.login em.help-block {
		display:block;
		color:#b91c1c;
		background:transparent;
		font-style:normal;
		font-size:12px;
		line-height:1.4;
		margin:6px 2px 0;
		padding:0;
		font-weight:500;
	}
	body.login em.help-block::before {
		content:"\f071";
		font-family:"FontAwesome";
		margin-right:6px;
		color:#dc2626;
	}
	/* Red border on invalid input (set by .error class on parent or by aria-invalid) */
	body.login .lf-group.has-error .lf-input,
	body.login .lf-input.error,
	body.login input.lf-input[aria-invalid="true"] {
		border-color:#fca5a5 !important;
		background:#fff7f7 !important;
	}
	body.login .lf-group.has-error .lf-input:focus,
	body.login .lf-input.error:focus,
	body.login input.lf-input[aria-invalid="true"]:focus {
		border-color:#dc2626 !important;
		box-shadow:0 0 0 3px rgba(220,38,38,0.15) !important;
	}
	/* Kill the bootstrap glyphicon span jquery.validate injects (we have FA) */
	body.login span.glyphicon.form-control-feedback { display:none !important; }

/* End — Login page styling (Round 9) */

/* ============================================================
   E-Office Mandiri Taspen — TFA / SSO MFA verify (Round 10)
   Shared CSS for the OTP verify pages:
     - out.TwoFactorChallenge.php  (post-password 2FA, also setup)
     - out.LoginSsoMfa.php         (post-SSO 2FA)
   Both render inside the same body.login shell (Round 9 base),
   then this layer adds the OTP-specific big input + branded header
   icon + user chip + footer.
   ============================================================ */
	/* Header */
	.tfa-header { text-align:center; margin-bottom:22px; }
	.tfa-icon {
		width:64px; height:64px; margin:0 auto 14px;
		background: linear-gradient(135deg, #0066B3, #003D7A);
		border-radius: 16px;
		display:inline-flex; align-items:center; justify-content:center;
		color:#fff; font-size:26px;
		box-shadow: 0 8px 22px rgba(0,61,122,0.30);
	}
	.tfa-header h1 {
		margin:0 0 6px;
		font-size:20px; font-weight:700; color:#111827;
		letter-spacing:-0.01em;
	}
	.tfa-header p {
		margin:0; color:#6b7280; font-size:13px; line-height:1.5;
		max-width:340px; margin-left:auto; margin-right:auto;
	}
	.tfa-user-chip {
		display:inline-flex; align-items:center; gap:6px;
		background:#f3f4f6; color:#374151;
		padding:4px 10px; border-radius:999px;
		font-size:12px; margin-top:8px;
	}

	/* Error pill */
	.tfa-error {
		background:#fef2f2; color:#991b1b; border:1px solid #fecaca;
		padding:10px 14px; border-radius:10px;
		font-size:13px; margin-bottom:18px;
		display:flex; align-items:center; gap:8px;
	}

	/* QR (setup mode) */
	.tfa-qr-wrap {
		display:flex; justify-content:center;
		margin: 6px 0 16px;
	}
	.tfa-qr-wrap img {
		width:200px; height:200px;
		border-radius:12px;
		padding:8px;
		background:#fff;
		border:1px solid #e5e7eb;
		box-shadow:0 2px 8px rgba(0,0,0,.04);
	}
	.tfa-secret-wrap {
		background:#f9fafb;
		border:1px dashed #d1d5db;
		border-radius:10px;
		padding:10px 14px;
		margin-bottom:18px;
		display:flex; align-items:center; gap:10px;
		font-size:12px;
	}
	.tfa-secret-wrap .label { color:#6b7280; font-weight:500; }
	.tfa-secret-wrap code {
		flex:1;
		background:transparent;
		color:#111827;
		font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
		font-size:12.5px;
		word-break: break-all;
	}
	#copy-secret {
		background:#fff; border:1px solid #d1d5db;
		padding:4px 10px;
		border-radius:6px;
		font-size:11.5px; color:#374151; cursor:pointer;
		display:inline-flex; align-items:center; gap:4px;
	}
	#copy-secret:hover { background:#f3f4f6; border-color:#9ca3af; }

	.tfa-help {
		background:#E8F0F8; border:1px solid #C9DCEC;
		color:#002D5C;
		padding:10px 14px; border-radius:10px;
		font-size:12.5px; margin-bottom:18px;
		display:flex; align-items:flex-start; gap:8px; line-height:1.5;
	}
	.tfa-help i { margin-top:2px; }

	/* OTP input — big, centered, monospace */
	.lf-group { margin-bottom:14px; }
	.lf-label {
		display:block;
		font-size:12px; font-weight:600; color:#374151;
		text-align:center;
		margin:0 0 8px;
	}
	body.login input.otp-input {
		width:100% !important;
		height:54px !important;
		text-align:center !important;
		font-size:22px !important;
		font-weight:600 !important;
		letter-spacing:0.5em !important;
		font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
		padding:0 0 0 0.4em !important;
		border:1px solid #d1d5db !important;
		border-radius:12px !important;
		background:#fff !important;
		color:#111827 !important;
		box-sizing:border-box !important;
		box-shadow:none !important;
		margin:0 !important;
		transition: border-color .15s, box-shadow .15s;
	}
	body.login input.otp-input::placeholder { color:#d1d5db; letter-spacing: 0.5em; }
	body.login input.otp-input:focus {
		outline:none !important;
		border-color:#0066B3 !important;
		box-shadow:0 0 0 3px rgba(0,102,179,0.12) !important;
	}

	/* Submit */
	body.login button.tfa-submit {
		width:100% !important; margin-top:8px !important;
		background: linear-gradient(135deg, #0066B3, #003D7A) !important;
		border:none !important; color:#fff !important;
		font-weight:600 !important; font-size:14px !important;
		padding:13px !important;
		border-radius:10px !important;
		cursor:pointer;
		display:flex !important; align-items:center; justify-content:center; gap:8px;
		text-shadow:none !important;
		transition: transform .12s, box-shadow .15s, filter .12s;
		box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25) !important;
	}
	body.login button.tfa-submit:hover {
		transform: translateY(-1px);
		box-shadow: 0 8px 20px rgba(29, 78, 216, 0.30) !important;
		filter: brightness(1.04);
	}

	.tfa-footer {
		margin-top:18px; padding-top:16px;
		border-top:1px solid #f3f4f6;
		text-align:center;
		color:#6b7280; font-size:12.5px;
	}
	.tfa-footer a { color:#003D7A; text-decoration:none; }
	.tfa-footer a:hover { text-decoration:underline; }

	@media (max-width:480px) {
		#login_wrapper { padding:28px 20px 22px; border-radius:14px; }
		.tfa-qr-wrap img { width:170px; height:170px; }
		body.login input.otp-input { font-size:20px !important; letter-spacing:0.4em !important; height:50px !important; }
	}

	/* === OTP segment-style focus accent === */
	body.login input.otp-input:not(:placeholder-shown) { letter-spacing: 0.6em !important; }

	/* Validation error states */
	body.login em.help-block {
		display:block;
		color:#b91c1c;
		background:transparent;
		font-style:normal;
		font-size:12px;
		line-height:1.4;
		margin:8px 2px 0;
		padding:0;
		font-weight:500;
		text-align:center;
	}
	body.login em.help-block::before {
		content:"\f071";
		font-family:"FontAwesome";
		margin-right:6px;
		color:#dc2626;
	}
	body.login .lf-group.has-error input.otp-input,
	body.login input.otp-input.error,
	body.login input.otp-input[aria-invalid="true"] {
		border-color:#fca5a5 !important;
		background:#fff7f7 !important;
	}
	body.login .lf-group.has-error input.otp-input:focus,
	body.login input.otp-input.error:focus {
		border-color:#dc2626 !important;
		box-shadow:0 0 0 3px rgba(220,38,38,0.15) !important;
	}
	body.login span.glyphicon.form-control-feedback { display:none !important; }

/* End — TFA / SSO MFA verify (Round 10) */