/* ECBA Smart Office - custom brand theme (pending item 12, 2026-09-17 -> 2026-09-18 full pass)
   Loaded after the Metronic theme bundle in head.php so these rules win.
   Brand palette:
     #348bcb  primary blue   - main actions, links, active states
     #f15a30  orange accent  - hover/focus emphasis, highlights, CTA accents
     #8b8c90  neutral gray   - secondary text, borders, muted UI
   Semantic colors (success green / danger red / warning yellow used for
   approve / reject / pending-count badges) are left untouched on purpose -
   changing those would remove meaning from the workflow, not just restyle it. */

:root {
	--brand-primary: #348bcb;
	--brand-primary-dark: #2a6fa3;
	--brand-primary-light: #e8f2fa;
	--brand-accent: #f15a30;
	--brand-accent-dark: #c8471f;
	--brand-gray: #8b8c90;
	--brand-gray-light: #f2f2f3;
	--brand-primary-darker: #1c4f73;

	/* re-point Bootstrap 5's own primary tokens so native .text-primary /
	   .bg-primary / .border-primary / .link-primary / focus rings follow suit */
	--bs-primary: var(--brand-primary);
	--bs-primary-rgb: 52, 139, 203;
	--bs-link-color: var(--brand-primary);
	--bs-link-color-rgb: 52, 139, 203;
	--bs-link-hover-color: var(--brand-accent);
	--bs-link-hover-color-rgb: 241, 90, 48;
}

/* ============ Typography ============ */
body {
	color: #2b2f38;
}
a {
	color: var(--brand-primary);
}
a:hover {
	color: var(--brand-accent);
}
.text-muted,
.text-gray-600,
.text-gray-700 {
	color: var(--brand-gray) !important;
}
::selection {
	background: var(--brand-primary);
	color: #fff;
}

/* ============ Buttons ============ */
.btn-primary {
	background-color: var(--brand-primary) !important;
	border-color: var(--brand-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--brand-accent) !important;
	border-color: var(--brand-accent) !important;
}
.btn-light-primary {
	background-color: var(--brand-primary-light) !important;
	color: var(--brand-primary-dark) !important;
}
.btn-light-primary:hover,
.btn-light-primary:focus,
.btn-light-primary:active {
	background-color: var(--brand-primary) !important;
	color: #fff !important;
}
.btn-light-primary i,
.btn-light-primary .ki-outline {
	color: inherit !important;
}
.btn-danger,
.btn-light-danger:hover {
	background-color: var(--brand-accent) !important;
	border-color: var(--brand-accent) !important;
}
.btn-outline.btn-outline-primary,
.btn.btn-outline-primary {
	color: var(--brand-primary) !important;
	border-color: var(--brand-primary) !important;
}

/* ============ Links / badges / soft accents ============ */
.badge-light-primary,
.badge-primary {
	background-color: var(--brand-primary-light) !important;
	color: var(--brand-primary-dark) !important;
}
.text-primary {
	color: var(--brand-primary) !important;
}
.bg-light-primary,
.card-header.bg-light-primary {
	background-color: var(--brand-primary-light) !important;
}
.symbol-label.bg-light-primary i,
.card-title i {
	/*color: var(--brand-primary) !important;*/
	color: #ffffff !important;
}

/* ============ Header / top bar ============ */
#kt_app_header {
	border-bottom: 3px solid var(--brand-primary);
}

/* ============ Sidebar (ecba_include/sidebar.php) ============ */
/* This is the main left rail, so it gets its own dark brand-blue treatment
   (not plain white) plus a soft right-edge shadow for elevation/depth. */
.app-sidebar {
	/*background-color: var(--brand-primary-darker);*/
	background-color: #f15a30;
	border-right: none;
}
/* .app-sidebar-primary is the actual visible box (theme gives it its own
   #F6F6F6 background separate from the outer .app-sidebar) - without an
   explicit override here that grey shows through around the header title
   and the empty footer area as a mismatched strip. Match it to the same
   dark panel color and add the elevation shadow on this box specifically
   (it's the one with real height/visible edge). */
.app-sidebar-primary,
#kt_app_sidebar_primary_header,
#kt_app_sidebar_primary_footer {
	background-color: var(--brand-primary-darker) !important;
}
.app-sidebar-primary {
	/*padding-top: 10px;*/
	padding-top: 0px;
	padding-bottom: 10px;
	box-shadow: 2px 0 14px rgba(0, 0, 0, .18);
}
#kt_app_sidebar_primary_header {
	color: #ffffff;
}
.app-header-menu .menu-link .menu-title,
.app-header-menu .menu-link.menu-title {
	color: #000000 !important;
	font-weight: 600;
}
/* spacing between icon buttons so the list doesn't feel cramped */
.app-sidebar .nav-item {
	margin-bottom: 3px;
}
.app-sidebar .nav-link {
	position: relative;
	margin: 0 6px;
	border: 1px solid rgba(255, 255, 255, .35) !important;
	border-radius: 10px;
	transition: background-color .18s ease, box-shadow .18s ease;
}
.app-sidebar .nav-link .menu-title,
.app-sidebar .nav-link span {
	color: #ffffff;
	font-weight: 600;
	transition: color .18s ease;
}
.app-sidebar .nav-link i {
	color: #ffffff;
	transition: color .18s ease, transform .15s ease;
}

/* hover: background lightens so a dark label stays readable - text flips
   from white (on the dark panel) to dark navy, distinct from active's pill */
.app-sidebar .nav-link:hover {
	background-color: rgba(255, 255, 255, .85);
}
.app-sidebar .nav-link:hover i {
	color: var(--brand-primary-dark) !important;
	transform: translateY(-1px);
}
.app-sidebar .nav-link:hover span:not(.badge) {
	color: var(--brand-primary-dark) !important;
}
.app-sidebar .nav-link:hover .badge {
	color: #ffffff !important;
}

/* active: the standout "selected chip" - solid white pill against the dark
   panel so it pops immediately, dark brand-blue icon/text for contrast,
   plus a small orange accent bar under the icon tying in the 2nd brand color */
.app-sidebar .nav-link.active {
	background-color: #ffffff !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}
.app-sidebar .nav-link.active::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 3px;
	transform: translateX(-50%);
	width: 70px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--brand-accent);
}
.app-sidebar .nav-link.active i {
	color: var(--brand-primary-dark) !important;
	transform: scale(1.08);
}
.app-sidebar .nav-link.active span:not(.badge) {
	color: var(--brand-primary-dark) !important;
	font-weight: 700;
}
.app-sidebar .nav-link.active .badge {
	background-color: var(--brand-accent) !important;
	color: #ffffff !important;
}

.app-sidebar-primary .app-sidebar-nav .nav .nav-link.btn .svg-icon,
.app-sidebar-primary .app-sidebar-nav .nav .nav-link.btn i {
	color: #ffffff;
}

/* ============ Top horizontal nav (ecba_include/menu_ecba_*.php) ============ */
.app-header-menu .menu-link.active,
.app-header-menu .menu-item.here > .menu-link,
.app-header-menu .menu-item.show > .menu-link {
	background-color: var(--brand-primary-light) !important;
	border-radius: 6px;
}
.app-header-menu .menu-link.active .menu-title,
.app-header-menu .menu-item.here > .menu-link .menu-title,
.app-header-menu .menu-item.show > .menu-link .menu-title,
.app-header-menu .menu-link.active.menu-title,
.app-header-menu .menu-item.here > .menu-link.menu-title,
.app-header-menu .menu-item.show > .menu-link.menu-title {
	color: var(--brand-primary-dark) !important;
	font-weight: 700;
}
.app-header-menu .menu-link:hover .menu-title,
.app-header-menu .menu-link.menu-title:hover {
	color: var(--brand-accent) !important;
}
.app-header-menu .menu-badge .badge {
	background-color: var(--brand-accent) !important;
}

/* top-nav menu labels: fs-7 (.95rem) on tablet/mobile, fs-6 (1.075rem) on
   desktop - applies to every module's top menu, both DOM shapes (nested
   <span class="menu-title"> and the flat .menu-link.menu-title).
   Width alone (>=992px) isn't enough - iPad Pro's screen (1024-1366px) is
   wider than the lg breakpoint, so a plain min-width query would wrongly
   treat it as desktop. Adding (hover: hover) and (pointer: fine) requires
   an actual mouse, which touch tablets (including iPad Pro) report as
   hover:none/pointer:coarse regardless of screen size. */
.app-header-menu .menu-link .menu-title,
.app-header-menu .menu-link.menu-title {
	font-size: .95rem !important;
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
	.app-header-menu .menu-link .menu-title,
	.app-header-menu .menu-link.menu-title {
		font-size: 1.075rem !important;
	}
}

/* ============ Data-list tables (work/work2/project/etc. use the same
   Metronic id="kt_permissions_table" pattern for every stage-listing page) ============ */
/* No column stays forced onto one line - whichever column holds the long
   free text (e.g. "เรื่อง") wraps instead of stretching the table wider
   and squeezing the others. */
#kt_permissions_table td,
#kt_permissions_table th {
	white-space: normal;
	word-break: break-word;
}
/* The action-button column is always last and has no long text of its own -
   shrink it to its natural content width so the freed-up space goes to the
   long-text column instead, on every one of these tables site-wide. */
#kt_permissions_table td:last-child,
#kt_permissions_table th:last-child {
	width: 1%;
	white-space: nowrap;
}
/* Exception: the CV table tabs (ecba_hr/common/users-report-cv.php and
   cv.php) have real text (ความเชี่ยวชาญ) as their last column, not action
   buttons - the generic shrink-to-fit above is wrong here. Instead, cap it
   to a fixed max-width so it wraps onto multiple lines instead of growing
   wide enough to squeeze the other columns (some people list many areas
   of expertise). */
#kt_project_users_table_pane #kt_permissions_table td:last-child,
#kt_project_users_table_pane #kt_permissions_table th:last-child {
	width: 200px;
	max-width: 200px;
	white-space: normal;
}
/* email has no spaces to wrap at, so it needs a guaranteed minimum width
   or it gets squeezed down to almost nothing by the other columns. */
#kt_project_users_table_pane #kt_permissions_table td:nth-child(4),
#kt_project_users_table_pane #kt_permissions_table th:nth-child(4) {
	min-width: 70px;
	white-space: normal;
	word-break: break-all;
}
/* ลำดับ and ประเภทบุคลากร are always short - keep them compact so the
   freed-up space goes to the name/expertise columns instead. */
#kt_project_users_table_pane #kt_permissions_table td:nth-child(1),
#kt_project_users_table_pane #kt_permissions_table th:nth-child(1),
#kt_project_users_table_pane #kt_permissions_table td:nth-child(6),
#kt_project_users_table_pane #kt_permissions_table th:nth-child(6) {
	width: 1%;
	white-space: nowrap;
}

/* ============ Card / page headings ============ */
.page-heading {
	color: #24292e;
}
.card-header {
	border-bottom: 1px solid var(--brand-gray-light);
}
.separator {
	border-bottom-color: var(--brand-gray-light) !important;
}

/* ============ Tabs (nav-line-tabs used across module detail pages) ============ */
.nav-line-tabs .nav-link.active,
.nav-line-tabs .nav-link.text-active-primary.active {
	color: var(--brand-primary) !important;
	border-bottom: 2px solid var(--brand-accent) !important;
}

/* ============ Forms ============ */
.form-control:focus,
.form-select:focus {
	border-color: var(--brand-primary) !important;
	box-shadow: 0 0 0 0.2rem rgba(52, 139, 203, 0.15) !important;
}
.form-check-input:checked {
	background-color: var(--brand-primary) !important;
	border-color: var(--brand-primary) !important;
}

/* ============ Scrollbar (Webkit) ============ */
::-webkit-scrollbar-thumb {
	background-color: var(--brand-gray) !important;
}
::-webkit-scrollbar-thumb:hover {
	background-color: var(--brand-primary) !important;
}

/* ============ Header height (desktop) ============ */
/* Theme default on >=992px is 80px/80px (header height / reserved content
   offset, both equal). Shrinking the visible header to 60px for a more
   compact look while leaving the reserved offset at 80px on purpose -
   that keeps a small breathing gap between header and page content instead
   of the content sitting flush under a now-shorter bar. */
@media (min-width: 992px) {
	:root {
		--bs-app-header-height: 60px;
		--bs-app-header-height-actual: 80px;
	}
}