/* ==========================================================================
   Neumorphism theme — SpectrumTek brand
   Loaded last (see header.php/login.php/forgot_password.php/reset_password.php)
   so it overrides ace.min.css / bootstrap.min.css without !important.
   ========================================================================== */

:root {
	/* Brand colors (from spectrumtek.com) */
	--pc: #539763;          /* primary — sage green */
	--sc: #062b33;          /* secondary — deep teal-navy */
	--deep-navy: #00012e;   /* footer/darkest navy */
	--accent-hover: #020495;/* indigo — hover/focus */
	--accent-cyan: #00b2ff; /* secondary accent */
	--brand-tint: #e5f7ff;  /* light brand tint */

	/* Light neumorphic surface (content, cards, forms, modals) */
	--neu-bg: #e8eef0;
	--neu-light: #ffffff;
	--neu-dark: #c3ccd0;
	--neu-text: #062b33;
	--neu-text-muted: #4b6067;

	/* Dark neumorphic surface (navbar, sidebar) */
	--neu-dark-bg: #062b33;
	--neu-dark-light: #0d3f4a;
	--neu-dark-dark: #00012e;
	--neu-dark-text: #e5f7ff;

	--radius: 14px;
	--radius-sm: 10px;
}

/* ---- shadow recipes, reused via var() below ---- */
/* raised (light):  6px 6px 12px var(--neu-dark), -6px -6px 12px var(--neu-light) */
/* pressed (light):  inset 4px 4px 8px var(--neu-dark), inset -4px -4px 8px var(--neu-light) */
/* raised (dark):   6px 6px 12px var(--neu-dark-dark), -6px -6px 12px var(--neu-dark-light) */
/* pressed (dark):   inset 4px 4px 8px var(--neu-dark-dark), inset -4px -4px 8px var(--neu-dark-light) */

/* Cross-browser hardening: Safari/iOS render native form-control chrome
   (gradients, inset shadows) that fights the neumorphic look unless reset;
   Chrome/Edge (both Chromium) don't need this but it's harmless there. */
input.form-control,
select.form-control,
textarea.form-control,
.btn,
.chosen-container .chosen-single {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html,
body {
	background: var(--neu-bg);
	color: var(--neu-text);
}

.footer {
	background: var(--neu-bg);
	color: var(--neu-text-muted);
}

/* ace.min.css paints an absolutely-positioned, full-height `.main-container:before`
   pseudo-element with a hardcoded white background OVER the body background on every
   page — this is the real reason body-level background rules above appeared to have
   no effect. Must be overridden explicitly, and again for the dark login shell. */
.main-container:before {
	background-color: var(--neu-bg) !important;
}

body.login-layout .main-container:before {
	background-color: var(--neu-dark-bg) !important;
}

/* ==========================================================================
   Navbar (dark neumorphic)
   ========================================================================== */

#navbar.navbar-default {
	background: var(--neu-dark-bg);
	border: none;
	box-shadow: 0 6px 16px rgba(0, 1, 46, 0.35);
}

#navbar .navbar-brand,
#navbar .navbar-title,
#navbar .nav > li > a {
	color: var(--neu-dark-text) !important;
}

/* actual markup is <li class="light-blue dropdown-modal"><a class="dropdown-toggle">,
   NOT <li class="dropdown"> — ace.min.css also defines many `.dropdown-toggle{...!important}`
   context variants, so this needs !important + a specific-enough selector to win. */
#navbar .navbar-buttons .dropdown-toggle {
	background: var(--neu-dark-bg) !important;
	border: none !important;
	border-radius: var(--radius-sm);
	box-shadow: 3px 3px 6px var(--neu-dark-dark), -3px -3px 6px var(--neu-dark-light);
	color: var(--neu-dark-text) !important;
	margin: 6px 4px;
	text-shadow: none !important;
	transition: box-shadow 0.15s ease;
}

#navbar .navbar-buttons .dropdown-toggle:hover,
#navbar .navbar-buttons li.open .dropdown-toggle {
	box-shadow: inset 3px 3px 6px var(--neu-dark-dark), inset -3px -3px 6px var(--neu-dark-light) !important;
}

#navbar .navbar-buttons .dropdown-toggle .user-info {
	color: var(--neu-dark-text) !important;
}

#navbar .dropdown-menu {
	background: var(--neu-bg);
	border: none;
	border-radius: var(--radius-sm);
	box-shadow: 6px 6px 16px var(--neu-dark), -6px -6px 16px var(--neu-light);
	color: var(--neu-text);
}

#navbar .dropdown-menu > li > a {
	color: var(--neu-text);
}

#navbar .dropdown-menu > li > a:hover {
	background: var(--neu-bg);
	box-shadow: inset 2px 2px 5px var(--neu-dark), inset -2px -2px 5px var(--neu-light);
	color: var(--pc);
}

/* ==========================================================================
   Sidebar (dark neumorphic)
   ========================================================================== */

#sidebar.sidebar {
	background: var(--neu-dark-bg);
	border: none;
	box-shadow: 6px 0 16px rgba(0, 1, 46, 0.25);
}

/* ace's sidebar is `float:left; position:static` with no explicit height —
   it only grows as tall as its own menu items, not the full viewport. On
   any page where the content column is taller (or the viewport itself is
   taller than the menu list), the dark sidebar visibly stops short and the
   page background shows below it. min-height guarantees it always at least
   covers the initial viewport (the navbar isn't fixed-position here, so
   making the sidebar `position:fixed` would desync it from the page's
   normal scroll behavior instead — this is the safer equivalent fix).
   63px = the navbar's actual rendered height (measured directly; its own
   CSS only declares min-height:45px, padding adds the rest). Deliberately
   NOT also adding min-height to .main-container/html/body here — ace
   already ships `.main-content,body,html{min-height:100%}`, and stacking
   another min-height on .main-container compounds with that default and
   overshoots the viewport by an extra navbar-height's worth, pushing
   .footer below the fold instead of fixing anything. */
#sidebar.sidebar {
	min-height: calc(100vh - 63px);
}

/* ace's default 190px sidebar is too narrow for longer labels ("Engagement
   Manager", "Project Summary") at its own font-size, wrapping them onto a
   second line inside a fixed-height row and making them look broken/cut off.
   Widened here — matched at the SAME specificity as ace's own base rule
   (plain .sidebar, not #sidebar) so its own higher-specificity collapsed/
   mobile-state rules (.sidebar.menu-min etc.) still win when those apply. */
.sidebar {
	width: 225px;
}

.sidebar + .main-content {
	margin-left: 225px;
}

/* .footer is a SIBLING of .sidebar (not nested inside .main-content), and
   ace's own default (non-"boxed layout") rule is `.footer{width:100%}` of
   its parent — the full page width starting from x:0, i.e. underneath the
   sidebar, rather than starting after it. That's why the footer bar/text
   reads as off-center / not spanning the actual content column. */
.sidebar ~ .footer {
	margin-left: 225px;
	width: calc(100% - 225px);
}

.sidebar.menu-min ~ .footer {
	margin-left: 43px;
	width: calc(100% - 43px);
}

@media (max-width: 991px) {
	.sidebar ~ .footer {
		margin-left: 0;
		width: 100%;
	}
}

/* Color/background applies in both expanded AND collapsed (icon-only,
   .menu-min) states — safe to leave unscoped. */
#sidebar .nav-list > li > a {
	background: transparent;
	border: none;
	border-radius: var(--radius-sm);
	color: var(--neu-dark-text);
	margin: 4px 10px;
	transition: box-shadow 0.15s ease, background 0.15s ease;
}

/* Layout (flex row, row height, gap) is scoped to :not(.menu-min) — using
   #sidebar (an ID) here would otherwise outrank and silently break ace's own
   .sidebar.menu-min .nav-list>li>a rules (which give it its narrow,
   icon-centered collapsed layout), since an ID beats any number of classes
   regardless of source order. */
#sidebar:not(.menu-min) .nav-list > li > a {
	align-items: center;
	display: flex;
	gap: 10px;
	height: auto;
	line-height: 1.3;
	min-height: 42px;
	padding: 9px 14px;
}

#sidebar:not(.menu-min) .nav-list > li > a > .menu-icon {
	flex-shrink: 0;
	margin: 0;
	text-align: center;
	width: 18px;
}

#sidebar:not(.menu-min) .nav-list > li > a > .menu-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#sidebar .nav-list > li > a:hover {
	background: var(--neu-dark-bg);
	box-shadow: 3px 3px 8px var(--neu-dark-dark), -3px -3px 8px var(--neu-dark-light);
	color: #ffffff;
}

/* Collapsed (icon-only) mode: hovering an icon flies out a label popup.
   ace's default popup has a light background (#F5F5F5) but this element
   inherits our light sidebar text color from the rule above — invisible
   light-on-light. Give the popup its own explicit dark neumorphic skin so
   it's readable regardless of what ace's own skin would have done. */
.sidebar.menu-min .nav-list > li > a > .menu-text {
	background: var(--neu-dark-bg) !important;
	border: none !important;
	box-shadow: 4px 4px 12px rgba(0, 1, 46, 0.45);
	color: var(--neu-dark-text) !important;
}

#sidebar .nav-list > li.active > a,
#sidebar .nav-list > li.active.open > a {
	background: var(--neu-dark-bg);
	box-shadow: inset 3px 3px 8px var(--neu-dark-dark), inset -3px -3px 8px var(--neu-dark-light);
	color: var(--accent-cyan);
}

#sidebar .nav-list > li .menu-icon {
	color: inherit;
}

#sidebar .sidebar-toggle {
	background: var(--neu-dark-bg);
	border: none;
	box-shadow: 3px 3px 6px var(--neu-dark-dark), -3px -3px 6px var(--neu-dark-light);
}

#sidebar .sidebar-toggle:hover {
	box-shadow: inset 2px 2px 5px var(--neu-dark-dark), inset -2px -2px 5px var(--neu-dark-light);
}

/* ==========================================================================
   Cards / widget-box (light neumorphic)
   ========================================================================== */

.widget-box {
	background: var(--neu-bg);
	border: none;
	border-radius: var(--radius);
	box-shadow: 6px 6px 12px var(--neu-dark), -6px -6px 12px var(--neu-light);
	margin-bottom: 20px;
}

.widget-box .widget-header {
	background: var(--neu-bg);
	border: none;
	border-radius: var(--radius) var(--radius) 0 0;
	border-bottom: 3px solid var(--pc);
}

.widget-box .widget-header.widget-header-blue {
	background: var(--neu-bg);
}

.widget-box .widget-title {
	color: var(--neu-text);
}

.widget-box .widget-body,
.widget-box .widget-main {
	background: transparent;
}

/* Several list pages (e.g. manager/project_list.php, employee/timesheet_list.php)
   render a bare .widget-main directly under .page-content with no .widget-box
   wrapper at all. Give that standalone case its own card treatment so every page
   reads consistently as "raised panels on a light surface" — the rule above keeps
   it transparent again once nested inside an already-styled .widget-box. */
.widget-main {
	background: var(--neu-bg);
	border-radius: var(--radius);
	box-shadow: 6px 6px 12px var(--neu-dark), -6px -6px 12px var(--neu-light);
	margin-bottom: 20px;
	padding: 20px;
}

.widget-box .widget-main {
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
	padding: 16px;
}

.page-header {
	border-bottom: 2px solid var(--neu-dark);
	color: var(--neu-text);
}

/* ==========================================================================
   Infobox stat cards (admin dashboard)
   ========================================================================== */

.infobox {
	background-color: var(--neu-bg);
	border: none !important;
	border-radius: var(--radius-sm);
	box-shadow: 4px 4px 10px var(--neu-dark), -4px -4px 10px var(--neu-light);
	color: var(--neu-text);
}

.infobox-content {
	color: inherit;
}

.infobox-data-number {
	text-shadow: none;
}

.infobox.infobox-dark {
	box-shadow: 4px 4px 10px rgba(0, 1, 46, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.25);
	color: #ffffff;
}

.infobox.infobox-dark .infobox-content,
.infobox.infobox-dark .infobox-icon {
	color: inherit;
}

/* .page-content is the dashboard's light content area (ace hardcodes it #FFF).
   Deliberately NOT touching .main-content/.main-content-inner here — those same
   classes also wrap the login/forgot/reset pages as the full-page container, so
   styling them here would paint light over the dark login shell. */
.page-content {
	background: var(--neu-bg);
}

/* ace hardcodes .table-header (the list-page label bar, e.g. "Employee List")
   with a solid bright-blue background — a different class than .widget-header,
   easy to miss since it's not nested in a .widget-box either. */
.table-header {
	background: var(--neu-bg);
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	border-bottom: 3px solid var(--pc);
	color: var(--neu-text);
	font-weight: 600;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	background: var(--neu-bg) !important;
	border: none !important;
	border-radius: var(--radius-sm) !important;
	box-shadow: 4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light) !important;
	color: var(--neu-text) !important;
	transition: box-shadow 0.15s ease, transform 0.05s ease;
}

.btn:hover {
	box-shadow: 5px 5px 10px var(--neu-dark), -5px -5px 10px var(--neu-light) !important;
	color: var(--pc) !important;
}

.btn:active,
.btn.active {
	box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
	transform: translateY(1px);
}

.btn[disabled],
.btn.disabled {
	box-shadow: 2px 2px 4px var(--neu-dark), -2px -2px 4px var(--neu-light);
	opacity: 0.55;
}

.btn-primary,
.btn.btn-primary {
	background: var(--pc) !important;
	border-color: var(--pc) !important;
	box-shadow: 4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light);
	color: #ffffff !important;
	padding: 6px 14px !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:focus {
	background: var(--pc) !important;
	border-color: var(--pc) !important;
	color: #ffffff !important;
	filter: brightness(1.06);
}

.btn-primary:active,
.btn.btn-primary:active {
	box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.25), inset -3px -3px 6px rgba(255, 255, 255, 0.15);
}

.btn-info,
.btn.btn-info {
	background: var(--accent-cyan) !important;
	border-color: var(--accent-cyan) !important;
	color: #062b33 !important;
}

.btn-info:hover,
.btn.btn-info:hover {
	filter: brightness(1.08);
}

.btn-white,
.btn.btn-white {
	background: var(--neu-bg) !important;
	color: var(--pc) !important;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/* Several forms across the app (e.g. admin/employee_add.php's Emp Id field)
   never got the .form-control class in the markup — just Bootstrap grid
   classes on a bare <input>. Rather than hand-edit dozens of view files,
   catch plain text-like inputs generically so nothing renders as an
   unstyled native browser input next to properly-classed neighbors. */
/* ace.min.css re-declares input backgrounds at several specificity tiers
   (bare `input[type=...]`, then `.form-group input[type=...]` at (0,2,0),
   likely more contexts beyond that) — rather than chase each one, these core
   rules use !important so they hold regardless of which ace tier matches. */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
select,
textarea {
	background: var(--neu-bg) !important;
	border: none !important;
	border-radius: var(--radius-sm) !important;
	box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light) !important;
	color: var(--neu-text) !important;
	transition: box-shadow 0.15s ease;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
textarea:focus {
	box-shadow: inset 2px 2px 5px var(--neu-dark), inset -2px -2px 5px var(--neu-light), 0 0 0 3px rgba(2, 4, 149, 0.18) !important;
	outline: none;
}

/* ace's custom checkbox/radio replacements (class="ace") and toggle switches
   (class="ace-switch") — recolor the "on"/checked states to brand green
   instead of ace's default blue. */
.ace-switch .lbl::before {
	background: var(--neu-bg) !important;
	box-shadow: inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light) !important;
	border: none !important;
}

.ace-switch input:checked + .lbl::before {
	background: var(--pc) !important;
}

input.ace:checked + .lbl::before,
.checkbox input.ace:checked + .lbl::before,
.radio input.ace:checked + .lbl::before {
	background: var(--pc) !important;
	border-color: var(--pc) !important;
}

.control-label {
	color: var(--neu-text-muted);
	font-weight: 600;
}

.checkbox label,
.radio label {
	color: var(--neu-text);
}

.input-group-addon {
	background: var(--neu-bg);
	border: none;
	box-shadow: inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
}

/* Chrome/Safari paint a solid highlight square behind autofilled fields (e.g. saved
   username/password) that ignores background/box-shadow — neutralize it so it doesn't
   look like a mismatched patch sitting on top of the neumorphic input. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--neu-text);
	box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light), 0 0 0 1000px var(--neu-bg) inset !important;
	transition: background-color 9999s ease-in-out 0s;
}

/* the person/lock icon sits inside .input-icon-right, absolutely positioned over the
   input's edge — force it transparent so no leftover ace icon-button background box
   from a different .ace-icon context bleeds through. */
.input-icon > .ace-icon {
	background: none !important;
	border: none !important;
}

/* ==========================================================================
   Tables / DataTables
   ========================================================================== */

.dataTables_wrapper,
.table-responsive {
	background: var(--neu-bg);
	border-radius: var(--radius);
	box-shadow: 6px 6px 12px var(--neu-dark), -6px -6px 12px var(--neu-light);
	padding: 14px;
}

table.table {
	background: transparent;
}

table.table > thead > tr > th {
	background: transparent;
	border-bottom: 2px solid var(--pc);
	color: var(--neu-text);
}

table.table-striped > tbody > tr:nth-of-type(odd) {
	background: rgba(255, 255, 255, 0.55);
}

table.table > tbody > tr > td,
table.table > tbody > tr > th {
	border-top: 1px solid var(--neu-dark);
}

table.table-bordered,
table.table-bordered > thead > tr > th,
table.table-bordered > tbody > tr > td {
	border-color: var(--neu-dark);
}

table.table-hover > tbody > tr:hover {
	background: rgba(83, 151, 99, 0.08);
}

/* DataTables' own pagination */
.dataTables_paginate .paginate_button {
	background: var(--neu-bg) !important;
	border: none !important;
	border-radius: var(--radius-sm);
	box-shadow: 3px 3px 6px var(--neu-dark), -3px -3px 6px var(--neu-light);
	color: var(--neu-text) !important;
	margin: 0 3px;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
	background: var(--pc) !important;
	box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(255, 255, 255, 0.15);
	color: #ffffff !important;
}

.dataTables_paginate .paginate_button:hover {
	background: var(--neu-bg) !important;
	box-shadow: inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
	color: var(--pc) !important;
}

.dataTables_paginate .paginate_button.disabled {
	opacity: 0.4;
}

.dataTables_filter input,
.dataTables_length select {
	background: var(--neu-bg);
	border: none;
	border-radius: var(--radius-sm);
	box-shadow: inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
}

/* Custom hardcoded pagination widget (ul.setPaginate, duplicated inline in each header.php) */
ul.setPaginate {
	padding: 0;
}

ul.setPaginate li {
	display: inline-block;
	margin: 0 3px;
}

ul.setPaginate li a {
	background: var(--neu-bg) !important;
	border-radius: var(--radius-sm);
	box-shadow: 3px 3px 6px var(--neu-dark), -3px -3px 6px var(--neu-light);
	color: var(--neu-text) !important;
	display: inline-block;
	padding: 6px 12px;
}

ul.setPaginate li a:hover {
	box-shadow: inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
	color: var(--pc) !important;
}

ul.setPaginate li.active a,
ul.setPaginate li a.active {
	background: var(--pc) !important;
	box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(255, 255, 255, 0.15);
	color: #ffffff !important;
}

/* ==========================================================================
   Modals
   ========================================================================== */

.modal-content {
	background: var(--neu-bg);
	border: none;
	border-radius: var(--radius);
	box-shadow: 10px 10px 24px var(--neu-dark), -10px -10px 24px var(--neu-light);
}

.modal-header {
	border-bottom: 2px solid var(--pc);
}

.modal-footer {
	border-top: 1px solid var(--neu-dark);
}

.modal-backdrop {
	background: var(--deep-navy);
}

.modal-backdrop.in {
	opacity: 0.6;
}

/* ==========================================================================
   Alerts / badges
   ========================================================================== */

.alert {
	background: var(--neu-bg);
	border: none;
	border-radius: var(--radius-sm);
	box-shadow: 4px 4px 10px var(--neu-dark), -4px -4px 10px var(--neu-light);
}

.alert-success {
	border-left: 4px solid var(--pc);
	color: #2d5c39;
}

.alert-danger {
	border-left: 4px solid #c0392b;
	color: #8c2f24;
}

.badge,
.label {
	background: var(--pc);
	border-radius: 999px;
	box-shadow: 2px 2px 5px var(--neu-dark), -2px -2px 5px var(--neu-light);
	color: #ffffff;
}

.badge.badge-info,
.label-info {
	background: var(--accent-cyan);
	color: #062b33;
}

/* ==========================================================================
   Login / Forgot / Reset password pages
   (body.login-layout > .main-container > .login-container > #login-box)
   ========================================================================== */

/* body has no explicit height, so its box (and therefore its background)
   only extends as far as the login content does — on any viewport taller
   than that content, html's own (light) background shows through below it.
   min-height:100vh guarantees the dark shell covers the full screen. */
body.login-layout {
	background: var(--neu-dark-bg);
	min-height: 100vh;
}

.login-layout .main-container,
.login-layout .main-content {
	min-height: 100vh;
}

/* ace.min.css ships .login-layout-prefixed rules at (0,3,0) specificity for the
   login screen specifically (e.g. `.login-layout .widget-box .widget-main`) — these
   beat plain `.widget-box`/`.widget-main` rules above, so every login-card override
   below is re-declared with the same `.login-layout` prefix to win on specificity. */

.login-layout .login-container #login-box.widget-box,
.login-layout .login-container #signup-box.widget-box {
	background: var(--neu-bg) !important;
	border: none !important;
	border-radius: var(--radius);
	box-shadow: 12px 12px 28px rgba(0, 1, 46, 0.45), -8px -8px 20px rgba(13, 63, 74, 0.15);
	overflow: hidden;
}

.login-layout .widget-box .widget-body,
.login-layout .widget-box .widget-main {
	background: transparent !important;
}

.login-layout .login-container .widget-main {
	padding: 28px 32px 20px !important;
}

/* brand wordmark: brand green + soft light-on-dark, replacing ace's stock
   red/grey (both use !important, so overrides need it too) */
.login-layout .login-container h1 span.red {
	color: var(--pc) !important;
}

.login-layout .login-container h1 span.grey {
	color: var(--neu-dark-text) !important;
}

.login-layout .login-container h4.blue {
	color: var(--accent-cyan) !important;
}

.login-layout .login-container .header.blue {
	color: var(--sc) !important;
}

.login-layout .login-container .ace-icon.green {
	color: var(--pc) !important;
}

/* the login-failure alert renders directly on the dark page background
   (it sits above #login-box, not inside it) — ace's default alert-danger
   text color is a dark brick red meant for a light card and is nearly
   unreadable here, so give it its own raised light chip like elsewhere. */
.login-layout .login-container > .alert {
	background: var(--neu-bg);
	border: none;
	border-left: 4px solid #c0392b;
	border-radius: var(--radius-sm);
	box-shadow: 6px 6px 14px rgba(0, 1, 46, 0.4), -4px -4px 10px rgba(13, 63, 74, 0.12);
	color: #8c2f24;
	padding: 12px 16px;
	text-align: left;
}

.login-layout .form-control {
	background: var(--neu-bg) !important;
}

.login-layout .form-control::placeholder {
	color: var(--neu-text-muted);
	opacity: 1;
}

.login-layout .login-container .btn-primary,
.login-layout .login-container .btn.btn-primary {
	background: var(--pc) !important;
	border-color: var(--pc) !important;
	box-shadow: 4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light);
	color: #ffffff !important;
	transition: box-shadow 0.15s ease, filter 0.15s ease;
}

.login-layout .login-container .btn.btn-primary:hover {
	filter: brightness(1.08);
}

.login-layout .login-container .btn.btn-primary:active {
	box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.25), inset -3px -3px 6px rgba(255, 255, 255, 0.15) !important;
}

/* the "I forgot my password" strip: ace hardcodes a bright blue rectangle
   here (`.login-box .toolbar{background:#5090C1}`) that clashes with
   everything else and breaks the card's rounded bottom corners. Replace it
   with a quiet footer that reads as part of the same card. */
.login-layout .login-container .login-box .toolbar,
.login-layout .login-container .signup-box .toolbar {
	background: var(--neu-bg) !important;
	border-top: 1px solid var(--neu-dark) !important;
	padding: 12px 20px !important;
}

/* ace constrains each toolbar cell to width:50% (it's designed for two links
   side by side); with only the forgot-password link present that halves the
   available width and wraps "I forgot my password" onto two lines. */
.login-layout .login-container .toolbar > div {
	width: auto !important;
}

.login-layout .login-container .forgot-password-link,
.login-layout .login-container .user-signup-link {
	color: var(--sc) !important;
	font-weight: 600;
	transition: color 0.15s ease;
	white-space: nowrap;
}

.login-layout .login-container .forgot-password-link:hover,
.login-layout .login-container .user-signup-link:hover {
	color: var(--pc) !important;
}

.login-layout .login-container .forgot-password-link .ace-icon,
.login-layout .login-container .user-signup-link .ace-icon {
	color: inherit;
}

/* ==========================================================================
   Chosen dropdown (used on ~15 pages: manager/project_list, assign_team,
   employee/timesheet_list, admin/project_detail, etc.) — this plugin hides the
   real <select> and renders its own markup, so generic .form-control rules
   never reach it; it needs its own dedicated skin to match.
   ========================================================================== */

.chosen-container-single .chosen-single {
	background: var(--neu-bg);
	border: none;
	border-radius: var(--radius-sm);
	box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
	color: var(--neu-text);
	height: 38px;
	line-height: 36px;
}

.chosen-container-single .chosen-single div b {
	background: none;
}

.chosen-container-single .chosen-single div b:before {
	color: var(--neu-text-muted);
	content: "\f0d7";
	font-family: FontAwesome;
	font-size: 12px;
	position: absolute;
	right: 4px;
	top: 11px;
}

.chosen-container.chosen-container-active.chosen-with-drop .chosen-single {
	box-shadow: inset 2px 2px 5px var(--neu-dark), inset -2px -2px 5px var(--neu-light), 0 0 0 3px rgba(2, 4, 149, 0.18);
}

.chosen-container .chosen-drop {
	background: var(--neu-bg);
	border: none;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	box-shadow: 6px 6px 16px var(--neu-dark), -6px -6px 16px var(--neu-light);
}

.chosen-container-single .chosen-search input[type="text"] {
	background: var(--neu-bg) !important;
	border: none;
	border-radius: var(--radius-sm);
	box-shadow: inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
	color: var(--neu-text);
}

.chosen-container .chosen-results li {
	color: var(--neu-text);
}

.chosen-container .chosen-results li.highlighted {
	background: var(--pc);
	color: #ffffff;
}

.chosen-container .chosen-results li.disabled-result {
	color: var(--neu-text-muted);
}

.chosen-container-multi .chosen-choices {
	background: var(--neu-bg);
	border: none;
	border-radius: var(--radius-sm);
	box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
}

.chosen-container-multi .chosen-choices li.search-choice {
	background: var(--pc);
	border: none;
	box-shadow: 2px 2px 4px var(--neu-dark);
	color: #ffffff;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:after {
	color: #ffffff;
}

/* ==========================================================================
   Date-range picker input + popup (manager/timesheet_list, emp_report, etc.)
   The bound input has no .form-control class in the markup at all, so it
   needs an explicit attribute selector rather than relying on the class.
   ========================================================================== */

input[name="daterange"],
input.daterangepicker-input {
	background: var(--neu-bg);
	border: none;
	border-radius: var(--radius-sm);
	box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
	color: var(--neu-text);
	padding: 8px 12px;
}

.daterangepicker {
	background: var(--neu-bg);
	border: none;
	border-radius: var(--radius-sm);
	box-shadow: 8px 8px 20px var(--neu-dark), -8px -8px 20px var(--neu-light);
}

.daterangepicker:before,
.daterangepicker:after {
	display: none;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
	background-color: var(--pc);
	border-color: var(--pc);
}

.daterangepicker td.in-range {
	background-color: var(--brand-tint);
	color: var(--neu-text);
}

.daterangepicker .ranges li {
	background: var(--neu-bg);
	border: none;
	box-shadow: 2px 2px 5px var(--neu-dark), -2px -2px 5px var(--neu-light);
	color: var(--sc);
}

.daterangepicker .ranges li.active,
.daterangepicker .ranges li:hover {
	background: var(--pc);
	border: none;
	color: #ffffff;
}

.daterangepicker .calendar-table {
	background: var(--neu-bg);
	border: none;
}

/* ==========================================================================
   Bootstrap-datepicker popup — light-touch skin (calendar chrome only;
   not chasing pixel-perfect neumorphism here per the deferred-scope note,
   but it should not look visually broken/mismatched against everything else)
   ========================================================================== */

.datepicker {
	background: var(--neu-bg);
	border: none;
	border-radius: var(--radius-sm);
	box-shadow: 8px 8px 20px var(--neu-dark), -8px -8px 20px var(--neu-light);
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
	background: var(--brand-tint);
}

.datepicker table tr td.active.day,
.datepicker table tr td.active.day:hover {
	background-color: var(--pc) !important;
	background-image: none !important;
	color: #ffffff;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
	background-color: var(--brand-tint) !important;
	background-image: none !important;
	color: var(--neu-text);
}

.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next {
	color: var(--sc);
}

/* ==========================================================================
   Responsive: aligned to ace.min.css's own breakpoints (max-width:991px is
   its tablet/sidebar-collapse tier, max-width:767px is its phone tier) rather
   than introducing new arbitrary cutoffs.
   ========================================================================== */

@media (max-width: 991px) {
	.widget-main,
	.widget-box {
		box-shadow: 4px 4px 10px var(--neu-dark), -4px -4px 10px var(--neu-light);
	}

	.infobox {
		margin-bottom: 10px;
	}
}

@media (max-width: 767px) {
	:root {
		--radius: 10px;
		--radius-sm: 8px;
	}

	/* ace's mobile sidebar becomes an off-canvas overlay above the content —
	   give it a solid cast shadow (rather than the desktop dual soft shadow)
	   so it clearly reads as "floating over," not "part of," the page. */
	#sidebar.sidebar.responsive-attached,
	#sidebar.sidebar.menu-min ~ .main-content #sidebar,
	.nav-collapse #sidebar {
		box-shadow: 6px 0 20px rgba(0, 1, 46, 0.5);
	}

	.widget-main,
	.widget-box {
		box-shadow: 3px 3px 8px var(--neu-dark), -3px -3px 8px var(--neu-light);
		padding: 14px;
	}

	.widget-box .widget-main {
		padding: 12px;
	}

	.login-layout .login-container #login-box.widget-box,
	.login-layout .login-container #signup-box.widget-box {
		box-shadow: 6px 6px 16px rgba(0, 1, 46, 0.45), -4px -4px 12px rgba(13, 63, 74, 0.15);
	}

	/* larger touch targets on phones */
	.btn {
		min-height: 40px;
		padding-bottom: 10px;
		padding-top: 10px;
	}

	.form-control {
		min-height: 40px;
	}

	.dataTables_wrapper,
	.table-responsive {
		padding: 8px;
	}

	#navbar .navbar-buttons .dropdown-toggle .user-info small {
		display: none;
	}
}