/* ProClock Manager CSS */

@font-face {
	font-family: "Dessau-Medium";
	src: url("/require/uikit/dessau-medium.eot");
	src: url("/require/uikit/dessau-medium.woff") format("woff"),
		url("/require/uikit/dessau-medium.ttf") format("truetype");
}

.app_theme_h .uk-alert {
	background: #b22222
}

.app_theme_h .md-btn-primary:not(.md-btn-blue):not(.btn-filter-date),
.app_theme_h .md-btn-primary:not(.md-btn-blue):not(.btn-filter-date):active,
.app_theme_h .md-btn-primary:not(.md-btn-blue):not(.btn-filter-date):focus,
.app_theme_h .md-btn-primary:not(.md-btn-blue):not(.btn-filter-date):hover {
	/* was flat #b22222 — upgraded to the app red GRADIENT so EVERY flat-red /
	   fall-through md-btn-primary renders the gradient app-wide (owner: "all reds
	   → gradient"). !important + background-color longhand mirror the proven
	   .btn-punch-new pattern (line ~948) so this beats any plain inline
	   background-color FiveWeb may emit on the WebButton. See "UNIFIED BUTTON
	   COLOR LANGUAGE" block at file tail.

	   :not(.md-btn-blue):not(.btn-filter-date) EXCLUSIONS (regression fix
	   2026-06-24) — this gradient is painted as a background-IMAGE, which sits
	   ON TOP of any plain background-COLOR. Two NON-red md-btn-primary families
	   were getting reddened because their own rules only set background-color
	   (or a plain inline), not background-image, so the gradient image showed
	   through:
	     • md-btn-blue — FiveWeb-normalized SECONDARY buttons (CHANGE / PAYROLL
	       PROCESSOR INFO / PREVIEW PAY PERIOD, etc.; setclassname('color blue
	       button') → emitted class `md-btn md-btn-primary … md-btn-blue`,
	       verified in compiled fiveweb.lib). FiveWeb injects
	       `.md-btn-blue{background:#2196f3 !important}` (0,1,0) into the page
	       head, but our `.app_theme_h .md-btn-primary` (0,2,0) !important out-
	       specified it → blue went red. Excluding md-btn-blue here lets
	       FiveWeb's injected blue win (it is then the only !important bg on the
	       element). Blue is intentionally LEFT to its own #2196f3.
	     • btn-filter-date — the GREY "Filter" button (clock_miss_punch.prg:726
	       + 6 sibling pages: clock_timecards / clock_timesheets_approval /
	       clock_timesheets_summary / clock_timesheets_tips, etc.), emitted as
	       `md-btn md-btn-primary … btn-filter-date` with a PLAIN inline
	       `background:#797979`. Our gradient `!important` beat the plain inline
	       → grey went red. Excluding it lets the inline grey show.
	   MUST-STAY-RED buttons carry NEITHER class, so they remain matched:
	   SAVE (fall-through md-btn-primary), APPLY (.ls-min-btn.md-btn-primary, own
	   rule below), ADD PUNCH (.btn-punch-new, own rule below). The Filters
	   TOGGLE (#ls_filters_btn) is handled by its own ID rule below, not here. */
	background: var(--pc-btn-red-grad) !important;
	background-color: #b22222 !important;
	color: #fff !important;
}
.app_theme_h .md-btn-primary:not(.md-btn-blue):not(.btn-filter-date):active {
	background: var(--pc-btn-red-grad-active) !important; /* press = reversed gradient */
}

/* FILTERS TOGGLE (#ls_filters_btn, Punch Management clock_miss_punch.prg:762)
   regression fix (2026-06-24) — return it to its ORIGINAL neutral ghost look:
   WHITE fill + grey border (#b0bec5) + dark slate text (#455a64). It is NOT a
   save; it is a filter-panel toggle.

   The button carries `md-btn md-btn-primary` (+ runtime .ls-has-default /
   .ls-filters-active / .uk-active states), so the gradient base rule above
   still MATCHES it (it has neither md-btn-blue nor btn-filter-date). That is
   intentional and harmless EXCEPT for one thing: the gradient is a
   background-IMAGE. The page's own self-contained <style> block
   (clock_miss_punch.prg:262-356) paints every state via background-COLOR
   (#ffffff ghost) + box-shadow (the .ls-has-default amber inset #ffa000 and
   the .ls-filters-active blue dot) — but it never sets background-image, so
   our gradient image rendered ON TOP → the button went RED.

   FIX: blank ONLY the background-image. An ID selector (1,0,0) out-specifies
   our `.app_theme_h .md-btn-primary` (0,2,0), so `background-image:none`
   removes the gradient image; the page's own `background-color:#ffffff
   !important` (also ID 1,0,0) then shows. We deliberately touch NOTHING else:
   the page rules own the border (#b0bec5), text (#455a64), hover/focus wash,
   open/active pressed look, the .ls-has-default amber inset shadow, and the
   .ls-filters-active dot — all driven by background-color / border-color /
   box-shadow, none of which this rule disturbs. So the saved-default amber cue
   and the active-filter dot keep working. CSS-only — no rebuild. */
#ls_filters_btn {
	background-image: none !important;
}

/* FILTERS TOGGLE (#ts_filters_btn, Timesheet Summary clock_timesheets_summary.prg:426)
   regression fix (2026-06-24) — SAME mechanism, same fix as #ls_filters_btn above.
   The TS Filters button carries `md-btn md-btn-mini md-btn-primary` (no md-btn-blue,
   no btn-filter-date), so the gradient base rule (css/manager.css:14, specificity
   0,2,0) still matches it. The page's own <style> block
   (clock_timesheets_summary.prg:202-256) paints the ghost look via background-COLOR
   (#ffffff !important), border (#b0bec5), text (#455a64) and box-shadow — but never
   sets background-image, so our gradient IMAGE rendered ON TOP → the button went RED.

   FIX: blank ONLY the background-image. This ID selector (1,0,0) out-specifies the
   class-class gradient rule (0,2,0), so background-image:none removes the gradient;
   the page's own `background-color:#ffffff !important` (also ID 1,0,0) then shows.
   We touch NOTHING else — the page rules own border, text, hover/focus wash, the
   open/active pressed look, and the .ls-filters-active dot, all driven by
   background-color / border-color / box-shadow, none of which this rule disturbs.
   CSS-only — no rebuild. */
#ts_filters_btn {
	background-image: none !important;
}

.app_theme_h .md-btn-flat-primary,
.app_theme_h .md-btn-flat-primary:active,
.app_theme_h .md-btn-flat-primary:focus,
.app_theme_h .md-btn-flat-primary:hover {
	color: #c62828
}

.app_theme_h .md-btn-flat-primary:active,
.app_theme_h .md-btn-flat-primary:focus,
.app_theme_h .md-btn-flat-primary:hover {
	background: #fff
}

.app_theme_h .uk-badge-primary {
	background: #b22222
}

.app_theme_h .md-card-list-wrapper .md-card-list>ul>li.item-shown.md-card-list-item-selected:before {
	background: #ffebee
}

.app_theme_h .md-card-list-wrapper .md-card-list .md-card-list-item-selected {
	background: #ffebee
}

.app_theme_h .md-card-list-wrapper .md-card-list .md-card-list-item-selected.item-shown {
	background: #fff
}

.app_theme_h .md-card-list-wrapper .md-card-list .md-card-list-item-selected.item-shown:before {
	background: #ffebee
}

.app_theme_h .md-fab.md-fab-accent {
	background: #0277bd
}

.app_theme_h .md-list .uk-nestable-list>li.md-list-item-active,
.app_theme_h .md-list>li.md-list-item-active {
	color: #0277bd
}

.app_theme_h .md-list-addon>li.md-list-item-active .md-list-addon-element,
.app_theme_h .md-list-addon>li.md-list-item-active .md-list-addon-element .material-icons {
	color: #0277bd
}

.app_theme_h .uk-pagination>li>a:hover {
	background: #8dd4fe
}

.app_theme_h .uk-pagination>li.uk-active>a,
.app_theme_h .uk-pagination>li.uk-active>span {
	background: #0277bd;
	color: #fff
}

.app_theme_h .uk-subnav-pill>.uk-active>* {
	background: #0277bd
}

.app_theme_h .uk-tab>li>a:focus,
.app_theme_h .uk-tab>li>a:hover {
	border-bottom-color: #eeadad
}

.app_theme_h .uk-tab>li.uk-active>a {
	border-bottom-color: #b22222
}

.app_theme_h .uk-tab-bottom li>a:focus,
.app_theme_h .uk-tab-bottom li>a:hover {
	border-top-color: #eeadad
}

.app_theme_h .uk-tab-bottom li.uk-active>a {
	border-top-color: #b22222
}

.app_theme_h .uk-tab-left li>a:focus,
.app_theme_h .uk-tab-left li>a:hover {
	border-right-color: #eeadad
}

.app_theme_h .uk-tab-left li.uk-active>a {
	border-right-color: #b22222
}

.app_theme_h .uk-tab-right li>a:focus,
.app_theme_h .uk-tab-right li>a:hover {
	border-left-color: #eeadad
}

.app_theme_h .uk-tab-right li.uk-active>a {
	border-left-color: #b22222
}

.app_theme_h .uk-tab-double-header li a:focus,
.app_theme_h .uk-tab-double-header li a:hover {
	border-bottom-color: #dc5959
}

.app_theme_h .uk-tab-double-header li.uk-active>a {
	border-bottom-color: #0277bd
}

.app_theme_h #header_main {
	background: #b22222;
	color: #ffffff;
}

.app_theme_h.header_double_height:after {
	background: #b22222
}

.app_theme_h #top_bar .top_bar_nav>li>a:hover {
	box-shadow: inset 0 -3px 0 #fff
}

.app_theme_h #top_bar .top_bar_nav>li.uk-active a {
	box-shadow: inset 0 -3px 0 #fff
}

.app_theme_h .user_heading {
	background: #c62828
}

.app_theme_h #sidebar_main .menu_section>ul>li ul li.act_item a {
	color: #0277bd
}

.app_theme_h #sidebar_main .menu_section>ul>li.current_section>a>.menu_icon .material-icons {
	color: #0277bd
}

.app_theme_h #sidebar_main .menu_section>ul>li.current_section>a .menu_title {
	color: #0277bd
}

.app_theme_h.sidebar_mini #sidebar_main .menu_section>ul>li>a>.menu_title {
	background: #0277bd;
	color: #fff
}

.app_theme_h.sidebar_mini #sidebar_main .menu_section>ul>li:hover.sidebar_submenu {
	background: #0277bd
}

.app_theme_h.sidebar_mini #sidebar_main .menu_section>ul>li:hover.sidebar_submenu>a .menu_icon .material-icons {
	color: #fff
}

.app_theme_h.sidebar_mini #sidebar_main .menu_section>ul>li:hover.sidebar_submenu ul {
	border-left-color: #0277bd
}

.app_theme_h.sidebar_mini #sidebar_main .menu_section>ul>li.current_section>a>.menu_icon .material-icons {
	color: #0277bd
}

.app_theme_h .clndr .clndr_days .clndr_days_grid .day.today>span {
	background: #0277bd
}

.app_theme_h .DTTT_print_info h6 {
	color: #0277bd
}

.app_theme_h .fc-unthemed .fc-button.fc-state-active:after {
	color: #0277bd
}

.app_theme_h .fc-unthemed .fc-highlight {
	box-shadow: inset 0 0 0 2px #b22222, inset 0 -1px 0 2px #b22222
}

.app_theme_h .tablesorter-altair tbody>tr.row_highlighted>td {
	background: #ffebee
}

.app_theme_h .tablesorter-altair .headerSortDown,
.app_theme_h .tablesorter-altair .headerSortUp,
.app_theme_h .tablesorter-altair .tablesorter-headerAsc,
.app_theme_h .tablesorter-altair .tablesorter-headerDesc,
.app_theme_h .tablesorter-altair .tablesorter-headerSortDown,
.app_theme_h .tablesorter-altair .tablesorter-headerSortUp {
	color: #0277bd
}

.app_theme_h .wizard>.steps {
	background: #b22222
}

.app_theme_h .wizard>.steps>ul>li.current a,
.app_theme_h .wizard>.steps>ul>li.current a:active,
.app_theme_h .wizard>.steps>ul>li.current a:hover {
	background: #dc5959
}

.app_theme_h .wizard>.steps>ul>li.done a,
.app_theme_h .wizard>.steps>ul>li.done a:active,
.app_theme_h .wizard>.steps>ul>li.done a:hover {
	background: #c62828
}

.app_theme_h .md-card-primary {
	border-left-color: #b22222
}

.app_theme_h .waves-effect.md-btn-flat-primary {
	background: 0 0
}

.app_theme_h .waves-effect.md-btn-flat-primary .waves-ripple {
	background: rgba(211, 47, 47, .4)
}

.app_theme_h .search_list_link {
	color: #0277bd
}

.app_theme_i .uk-alert {
	background: #fbc02d
}

.app_theme_i .md-btn-primary,
.app_theme_i .md-btn-primary:active,
.app_theme_i .md-btn-primary:focus,
.app_theme_i .md-btn-primary:hover {
	background: #fbc02d;
	color: #fff
}

.app_theme_i .md-btn-flat-primary,
.app_theme_i .md-btn-flat-primary:active,
.app_theme_i .md-btn-flat-primary:focus,
.app_theme_i .md-btn-flat-primary:hover {
	color: #f57f17
}

.app_theme_i .md-btn-flat-primary:active,
.app_theme_i .md-btn-flat-primary:focus,
.app_theme_i .md-btn-flat-primary:hover {
	background: #fff
}

.app_theme_i .uk-badge-primary {
	background: #fbc02d
}

.app_theme_i .md-card-list-wrapper .md-card-list>ul>li.item-shown.md-card-list-item-selected:before {
	background: #fffde7
}

.app_theme_i .md-card-list-wrapper .md-card-list .md-card-list-item-selected {
	background: #fffde7
}

.app_theme_i .md-card-list-wrapper .md-card-list .md-card-list-item-selected.item-shown {
	background: #fff
}

.app_theme_i .md-card-list-wrapper .md-card-list .md-card-list-item-selected.item-shown:before {
	background: #fffde7
}

.app_theme_i .md-fab.md-fab-accent {
	background: #00acc1
}

.app_theme_i .md-list .uk-nestable-list>li.md-list-item-active,
.app_theme_i .md-list>li.md-list-item-active {
	color: #00acc1
}

.app_theme_i .md-list-addon>li.md-list-item-active .md-list-addon-element,
.app_theme_i .md-list-addon>li.md-list-item-active .md-list-addon-element .material-icons {
	color: #00acc1
}

.app_theme_i .uk-pagination>li>a:hover {
	background: #8ef3ff
}

.app_theme_i .uk-pagination>li.uk-active>a,
.app_theme_i .uk-pagination>li.uk-active>span {
	background: #00acc1;
	color: #fff
}

.app_theme_i .uk-subnav-pill>.uk-active>* {
	background: #00acc1
}

.app_theme_i .uk-tab>li>a:focus,
.app_theme_i .uk-tab>li>a:hover {
	border-bottom-color: #feedc3
}

.app_theme_i .uk-tab>li.uk-active>a {
	border-bottom-color: #fbc02d
}

.app_theme_i .uk-tab-bottom li>a:focus,
.app_theme_i .uk-tab-bottom li>a:hover {
	border-top-color: #feedc3
}

.app_theme_i .uk-tab-bottom li.uk-active>a {
	border-top-color: #fbc02d
}

.app_theme_i .uk-tab-left li>a:focus,
.app_theme_i .uk-tab-left li>a:hover {
	border-right-color: #feedc3
}

.app_theme_i .uk-tab-left li.uk-active>a {
	border-right-color: #fbc02d
}

.app_theme_i .uk-tab-right li>a:focus,
.app_theme_i .uk-tab-right li>a:hover {
	border-left-color: #feedc3
}

.app_theme_i .uk-tab-right li.uk-active>a {
	border-left-color: #fbc02d
}

.app_theme_i .uk-tab-double-header li a:focus,
.app_theme_i .uk-tab-double-header li a:hover {
	border-bottom-color: #fccf5f
}

.app_theme_i .uk-tab-double-header li.uk-active>a {
	border-bottom-color: #00acc1
}

.app_theme_i #header_main {
	background: #fbc02d
}

.app_theme_i.header_double_height:after {
	background: #fbc02d
}

.app_theme_i #top_bar .top_bar_nav>li>a:hover {
	box-shadow: inset 0 -3px 0 #fff
}

.app_theme_i #top_bar .top_bar_nav>li.uk-active a {
	box-shadow: inset 0 -3px 0 #fbc02d
}

.app_theme_i .user_heading {
	background: #f57f17
}

.app_theme_i #sidebar_main .menu_section>ul>li ul li.act_item a {
	color: #00acc1
}

.app_theme_i #sidebar_main .menu_section>ul>li.current_section>a>.menu_icon .material-icons {
	color: #00acc1
}

.app_theme_i #sidebar_main .menu_section>ul>li.current_section>a .menu_title {
	color: #00acc1
}

.app_theme_i.sidebar_mini #sidebar_main .menu_section>ul>li>a>.menu_title {
	background: #00acc1;
	color: #fff
}

.app_theme_i.sidebar_mini #sidebar_main .menu_section>ul>li:hover.sidebar_submenu {
	background: #00acc1
}

.app_theme_i.sidebar_mini #sidebar_main .menu_section>ul>li:hover.sidebar_submenu>a .menu_icon .material-icons {
	color: #fff
}

.app_theme_i.sidebar_mini #sidebar_main .menu_section>ul>li:hover.sidebar_submenu ul {
	border-left-color: #00acc1
}

.app_theme_i.sidebar_mini #sidebar_main .menu_section>ul>li.current_section>a>.menu_icon .material-icons {
	color: #00acc1
}

.app_theme_i .clndr .clndr_days .clndr_days_grid .day.today>span {
	background: #00acc1
}

.app_theme_i .DTTT_print_info h6 {
	color: #00acc1
}

.app_theme_i .fc-unthemed .fc-button.fc-state-active:after {
	color: #00acc1
}

.app_theme_i .fc-unthemed .fc-highlight {
	box-shadow: inset 0 0 0 2px #fbc02d, inset 0 -1px 0 2px #fbc02d
}

.app_theme_i .tablesorter-altair tbody>tr.row_highlighted>td {
	background: #fffde7
}

.app_theme_i .tablesorter-altair .headerSortDown,
.app_theme_i .tablesorter-altair .headerSortUp,
.app_theme_i .tablesorter-altair .tablesorter-headerAsc,
.app_theme_i .tablesorter-altair .tablesorter-headerDesc,
.app_theme_i .tablesorter-altair .tablesorter-headerSortDown,
.app_theme_i .tablesorter-altair .tablesorter-headerSortUp {
	color: #00acc1
}

.app_theme_i .wizard>.steps {
	background: #fbc02d
}

.app_theme_i .wizard>.steps>ul>li.current a,
.app_theme_i .wizard>.steps>ul>li.current a:active,
.app_theme_i .wizard>.steps>ul>li.current a:hover {
	background: #fccf5f
}

.app_theme_i .wizard>.steps>ul>li.done a,
.app_theme_i .wizard>.steps>ul>li.done a:active,
.app_theme_i .wizard>.steps>ul>li.done a:hover {
	background: #f57f17
}

.app_theme_i .md-card-primary {
	border-left-color: #fbc02d
}

.app_theme_i .waves-effect.md-btn-flat-primary {
	background: 0 0
}

.app_theme_i .waves-effect.md-btn-flat-primary .waves-ripple {
	background: rgba(251, 192, 45, .4)
}

.app_theme_i .search_list_link {
	color: #00acc1
}

.top_bar_nav>li>a {
	color: #fff;
}

canvas {
	display: block;
	vertical-align: bottom;
}

body {
	background-color: #ececec
}

#page_content_inner {
	padding: 5px
}

.app_theme_h #sidebar_main .menu_section>ul>li.current_section>a .menu_title {
	color: #cc0000
}

.app_theme_h #sidebar_main .menu_section>ul>li.current_section>a>.menu_icon .material-icons {
	color: #cc0000
}

.app_theme_h #sidebar_main .menu_section>ul>li ul li.act_item a {
	color: color: #cc0000 !important;
}

.uk-notify {
	z-index: 1305;
}

.main_logo_top {
	color: #ffffff;
}

#sidebar_main .menu_section {
	margin-top: 20px !important;
}

#sidebar_main .menu_section .li_event a {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

.uk-punch-eb {
	background: #6998c7 !important;
}

.uk-punch-el {
	background: #cb9a6b !important;
}

.uk-datepicker {
	z-index: 2001 !important;
}

.uk-blink {
	animation: 1s blinker linear infinite;
	-webkit-animation: 1s blinker linear infinite;
	-moz-animation: 1s blinker linear infinite;
}

@-moz-keyframes blinker {
	0% {
		opacity: 1.0;
	}

	50% {
		opacity: 0.0;
	}

	100% {
		opacity: 1.0;
	}
}

@-webkit-keyframes blinker {
	0% {
		opacity: 1.0;
	}

	50% {
		opacity: 0.0;
	}

	100% {
		opacity: 1.0;
	}
}

@keyframes blinker {
	0% {
		opacity: 1.0;
	}

	50% {
		opacity: 0.0;
	}

	100% {
		opacity: 1.0;
	}
}

.uk-blink i {
	color: #ffa000 !important;
}

.missed-punch {
	background: #663333 !important;
	color: #ffffff;
}

.uk-blink {
	animation: 1s blinker linear infinite;
	-webkit-animation: 1s blinker linear infinite;
	-moz-animation: 1s blinker linear infinite;
}

@-moz-keyframes blinker {
	0% {
		opacity: 1.0;
	}

	50% {
		opacity: 0.0;
	}

	100% {
		opacity: 1.0;
	}
}

@-webkit-keyframes blinker {
	0% {
		opacity: 1.0;
	}

	50% {
		opacity: 0.0;
	}

	100% {
		opacity: 1.0;
	}
}

@keyframes blinker {
	0% {
		opacity: 1.0;
	}

	50% {
		opacity: 0.0;
	}

	100% {
		opacity: 1.0;
	}
}

.menu_section>ul>li ul li.act_item a,
.menu_section>ul>li.current_section>a>.menu_icon .material-icons,
.menu_section>ul>li.current_section>a .menu_title,
.aside_item_sel a:hover {
	color: #cc0000 !important;
}

.uk-alert-danger {
	background: #cc0000 !important;
}

.uk-badge-danger {
	background: #cc0000 !important;
}

.uk-input-group.uk-input-group-danger .uk-input-group-addon i {
	color: #cc0000 !important;
}

.uk-text-danger {
	color: #cc0000 !important;
}

.uk-accordion-title-danger {
	background: color: #cc0000 !important;
	color: #fff
}

.uk-progress-danger .uk-progress-bar {
	background-color: #cc0000 !important;
}

.uk-notify-message-danger {
	background: #cc0000 !important;
}

.md-preloader-danger svg circle {
	stroke: #cc0000 !important;
}

.timeline_icon_danger {
	background: #cc0000 !important;
}

.md-btn-flat-danger,
.md-btn-flat-danger .uk-active,
.md-btn-flat-danger:active,
.md-btn-flat-danger:focus,
.md-btn-flat-danger:hover {
	color: #cc0000 !important;
}

.md-btn-flat-danger.uk-active {
	color: #cd1e1a;
	background: #f6bebd
}

.md-btn-danger,
.md-btn-danger.uk-active,
.md-btn-danger:active,
.md-btn-danger:focus,
.md-btn-danger:hover {
	background: #cc0000 !important;
}

.md-fab.md-fab-danger {
	background: #cc0000 !important;
}

.md-color-red-600 {
	color: #cc0000 !important;
}

.md-bg-red-600 {
	background-color: #cc0000 !important;
}

.md-card-danger {
	border-left-color: #cc0000 !important;
}

input:not([type]).md-input.md-input-danger,
input[type=text].md-input.md-input-danger,
input[type=password].md-input.md-input-danger,
input[type=datetime].md-input.md-input-danger,
input[type=datetime-local].md-input.md-input-danger,
input[type=date].md-input.md-input-danger,
input[type=month].md-input.md-input-danger,
input[type=time].md-input.md-input-danger,
input[type=week].md-input.md-input-danger,
input[type=number].md-input.md-input-danger,
input[type=email].md-input.md-input-danger,
input[type=url].md-input.md-input-danger,
input[type=search].md-input.md-input-danger,
input[type=tel].md-input.md-input-danger,
input[type=color].md-input.md-input-danger,
select.md-input.md-input-danger,
textarea.md-input.md-input-danger {
	border-color: #cc0000 !important;
}

input:not([type]).md-input.md-input-danger:focus,
input[type=text].md-input.md-input-danger:focus,
input[type=password].md-input.md-input-danger:focus,
input[type=datetime].md-input.md-input-danger:focus,
input[type=datetime-local].md-input.md-input-danger:focus,
input[type=date].md-input.md-input-danger:focus,
input[type=month].md-input.md-input-danger:focus,
input[type=time].md-input.md-input-danger:focus,
input[type=week].md-input.md-input-danger:focus,
input[type=number].md-input.md-input-danger:focus,
input[type=email].md-input.md-input-danger:focus,
input[type=url].md-input.md-input-danger:focus,
input[type=search].md-input.md-input-danger:focus,
input[type=tel].md-input.md-input-danger:focus,
input[type=color].md-input.md-input-danger:focus,
select.md-input.md-input-danger:focus,
textarea.md-input.md-input-danger:focus {
	border-bottom-color: #cc0000 !important;
}

.md-input-wrapper-danger .md-input-bar:after,
.md-input-wrapper-danger .md-input-bar:before {
	background: #cc0000 !important;
}

.md-input-wrapper-danger.md-input-wrapper-count .text-count-wrapper {
	color: #cc0000 !important;
}

.md-list-addon-element .element-status-danger {
	background: #cc0000 !important;
}

.md-input-danger .icheckbox_md {
	border-color: #cc0000 !important;
}

.md-input-danger .iradio_md {
	border-color: #cc0000 !important;
}

.md-input-danger .selectize-input {
	border-color: #cc0000 !important;
}

.parsley-errors-list {
	color: color: #cc0000 !important;
	margin-top: 0
}

.tablesorter-altair td:nth-child(3) .ts-align-right i {
	color: #cc0000 !important;
}

.tablesorter .tablesorter-errorRow td {
	text-align: center;
	cursor: pointer;
	background-color: #cc0000 !important;
	color: #fff;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	max-height: 28px !important;
}

.notification-event-href span:hover {
	text-decoration: underline !important;
}

@media screen and (max-height: 320px) {
	span#version {
		display: none;
	}
}

.icheckbox_md.checked, .icheckbox_md.hover.checked {
	background: #727272 !important;
	border-color: #727272 !important;
}

.iradio_md.checked, .iradio_md.hover.checked {
	border-color: #727272 !important;
}

.iradio_md.checked:after {
	background: #727272 !important;
}

/* ===== ProClock hold-over visual polish (feature/ui-improvements) =====
   Mirrors the mobile "Modern" theme. Appended override block: wins by
   source-order + !important. Presentation-only. Revert by deleting this block.
   Selectors verified against the existing rules above (esp. wizard
   .wizard>.steps>ul>li.current/done a forms) so specificity matches/beats. */
:root {
	--pc-header-grad: linear-gradient(180deg, #5d6775 0%, #3f4854 100%);
	--pc-header-solid: #3f4854;
	--pc-header-fg: #ffffff;
	--pc-accent-red: #b22222;
	--pc-accent-red-hover: #cc0000;
	--pc-btn-red-grad: linear-gradient(180deg, #b22222 0%, #cc0000 100%);
	--pc-btn-red-grad-active: linear-gradient(180deg, #cc0000 0%, #b22222 100%);
	--pc-danger-tint: #fdecea;
	--pc-danger-text: #7f1d1d;
	--pc-success: #7cb342;
	--pc-neutral: #5d6775;
	--pc-neutral-hover: #3f4854;
	--pc-radius-modal: 14px;
	--pc-radius-btn: 8px;
}

/* employee header + main top bar -> slate gradient (fg stays white).
   Literal gradient + solid fallback (NOT var(--pc-header-grad)): an
   unresolved custom property drops the whole declaration and lets the
   inline blue (clockpuncalldash.prg:123 `background:#1976d2`, plain inline,
   NOT !important) show through. The inline is non-important, so this
   !important rule wins on every page (verified equivalent on the TS Summary
   header clock_rep_summary.prg:8215). The unscoped `.user_heading` selector
   covers pages where app_theme_h is not on the wrapper.

   SPECIFICITY BUMP (2026-06-18): the deployed clockpuncalldash.exe
   (binary strings line 937) emits `<div class="user_heading"
   style="background: #1976d2;padding:5px;">` nested as `.md-card >
   .user_heading` — a PLAIN (non-!important) inline blue. A bare
   `.user_heading` (0,1,0) !important rule already beats a plain inline by
   spec, but the live header stayed blue, so the selector is hardened to the
   DOM-accurate `.app_theme_h .md-card .user_heading` (0,3,0) to defeat any
   stale-deploy / stray base-theme rule (e.g. manager.css:145
   `.app_theme_h .user_heading{#c62828}`, 0,2,0). Markup did NOT drift
   between source and the .exe — CSS alone fixes this, NO rebuild needed. */
.app_theme_h .md-card .user_heading,
.md-card .user_heading,
.app_theme_h .user_heading,
.user_heading {
	background: #3f4854 !important; /* solid fallback */
	background: linear-gradient(180deg, #5d6775 0%, #3f4854 100%) !important;
	color: var(--pc-header-fg) !important;
}
.app_theme_h #header_main,
#header_main {
	background: var(--pc-header-grad) !important;
	color: var(--pc-header-fg) !important;
}
.app_theme_h.header_double_height:after {
	background: var(--pc-header-solid) !important;
}

/* avatar fills the circle, face biased upward */
.thumbnail img,
.thumbnailZ img,
.user_heading_avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center 30% !important;
}

/* red alert -> soft tint + accent rule (danger still reads red).
   NOTE: scoped to .app_theme_h .uk-alert only — the LEAVE-RED
   .uk-alert-danger (line 645) is intentionally NOT overridden here. */
.app_theme_h .uk-alert {
	background: var(--pc-danger-tint) !important;
	color: var(--pc-danger-text) !important;
	border-left: 4px solid var(--pc-accent-red) !important;
}

/* FILTERS-panel "Minimum shift length" APPLY button -> mobile-app RED button
   gradient (same as ADD PUNCH). The APPLY buttons in BOTH the Punch Management
   (#ls_filters / clock_miss_punch.prg:871) and Timesheet Summary
   (#ts_filters / clock_timesheets_summary.prg:473) filter dropdowns carry
   `md-btn md-btn-primary md-btn-mini ls-min-btn`, so the generic
   `.app_theme_h .md-btn-primary` slate rule above (0,2,0) was catching them.
   This rule reddens ONLY APPLY: the intersection `.ls-min-btn.md-btn-primary`
   (0,3,0) BEATS the slate rule on specificity AND source order. The paired
   CLEAR buttons (`md-btn md-btn-mini ls-min-btn`, NO md-btn-primary) are
   structurally excluded — they lack md-btn-primary, so they cannot match.
   `.ls-min-btn` appears EXACTLY 4× in the codebase (APPLY+CLEAR ×2 panels),
   so nothing else is affected. APPLY has no inline background, so CSS alone
   fixes this — NO rebuild needed. :active reverses the gradient. */
.app_theme_h .ls-min-btn.md-btn-primary {
	background: var(--pc-btn-red-grad) !important;
	background-color: #b22222 !important;
	color: #fff !important;
}
.app_theme_h .ls-min-btn.md-btn-primary:active {
	background: var(--pc-btn-red-grad-active) !important;
}

/* ADD PUNCH button (.btn-punch-new) -> mobile-app RED button gradient.
   The deployed clockpuncalldash.exe (binary strings line 1004) emits:
     <a class="md-btn md-btn-wave waves-effect waves-button md-btn-block
        md-btn-primary btn-punch-new"
        style="...background-color:#d32f2f;color:#fff;height:35px;">ADD PUNCH</a>

   :not(.disabled) GUARD DROPPED (2026-06-18): the binary REFUTES the
   disabled-class theory — the live button carries NO `disabled` class (its
   full class list is exactly md-btn md-btn-wave waves-effect waves-button
   md-btn-block md-btn-primary btn-punch-new). The guard was harmless but
   lowered robustness and added confusion, so the red rule now matches
   UNCONDITIONALLY. `.app_theme_h .btn-punch-new` (0,2,0) ties the
   `.app_theme_h .md-btn-primary` slate rule above (0,2,0) and wins on LATER
   source order; the unscoped `.btn-punch-new` (0,1,0) covers non-app_theme_h
   pages. Both !important.

   The live inline is the `background-color` LONGHAND (plain, non-!important).
   A `background:` shorthand !important already resets background-color, but
   the matching `background-color: #b22222 !important` longhand is added to
   remove all cascade ambiguity vs the inline `background-color:#d32f2f`.
   Markup did NOT drift between source and the .exe — CSS alone fixes this,
   NO rebuild needed. :active reverses the gradient. */
.app_theme_h .btn-punch-new,
.btn-punch-new {
	background: var(--pc-btn-red-grad) !important;
	background-color: #b22222 !important; /* beats plain longhand inline background-color:#d32f2f */
	color: #fff !important;
}
.app_theme_h .btn-punch-new:hover,
.app_theme_h .btn-punch-new:active,
.btn-punch-new:hover,
.btn-punch-new:active {
	background: var(--pc-btn-red-grad-active) !important;
}

/* START BREAK status pill -> status-legend blue #2196f3 (= UIkit uk-badge-primary base).
   WHY THIS RULE EXISTS (corrects the prior "just remove the override" fix):
   status2color() (common/common_punch.prg:1462) maps 'SB' (START BREAK) ->
   `uk-badge-primary` — it is the ONLY status mapped to primary. The original
   branch override (`.app_theme_h .uk-badge-primary -> var(--pc-accent-red)`)
   was removed on the theory that it had reddened SB, but removal did NOT
   de-red it: a PRE-EXISTING rule `.app_theme_h .uk-badge-primary
   {background:#b22222}` (manager.css:35, from commit 4363ed8 "Colors
   updates", PREDATING this branch) already colors uk-badge-primary the same
   #b22222 red. So SB stayed red — violating the operator requirement that
   START BREAK be a DISTINCT, NON-RED functional color.

   SCOPE IS PROVABLY SB-ONLY: every LIVE consumer of `uk-badge-primary` in the
   codebase is START BREAK. Verified by grep across all .prg — the live uses
   are: the status pill (status2color SB, common_punch.prg:1462) and the SB
   legend swatches (common_punch.prg:5003, clock_timesheets_approval.prg:1391,
   clock_timecards.prg:1178) — all SB. (clock_timesheets_approval.prg:1002 is
   a commented-out `uk_badge("NO RECORDS","uk-badge-primary")` — dead code.
   clock_timesheets_summary.prg:592 has its OWN inline `.uk-badge-primary
   {background:#2196f3 !important}` and hardcodes a non-manager stylesheet, so
   manager.css never reaches it.) No live element OTHER than SB uses
   uk-badge-primary, so re-hueing it CANNOT bleed onto any non-status element
   or any other pill (each keeps its own class: SD/EB/EL uk-badge-success ±
   uk-punch-eb/-el, SL uk-badge-warning, TI uk-badge-danger, ED
   uk-badge-default).

   COLOR SOURCE (authoritative, not a guess): #2196f3 is the customer's
   status legend color for START BREAK (SB), distinct from END BREAK slate
   (#688098/#6998c7), from leave-red / tips-red, and from every other
   manager pill color, satisfying "distinct functional color, not red".
   (Previously wrongly set to END BREAK's slate #688098 — corrected here.)

   This override (specificity tie with line 35, later source order, + the
   !important) wins over the pre-existing red WITHOUT editing the pre-branch
   line — so deleting this whole polish block still cleanly reverts to prior
   behavior ("revert by deleting this block" contract intact). */
.app_theme_h .uk-badge-primary {
	background: #2196f3 !important;
}

/* wizard: rail tinted, current=accent, done=success green.
   Selectors match the existing >ul>li.current a / >ul>li.done a forms. */
.app_theme_h .wizard>.steps {
	background: var(--pc-danger-tint) !important;
}
.app_theme_h .wizard>.steps>ul>li.current a,
.app_theme_h .wizard>.steps>ul>li.current a:active,
.app_theme_h .wizard>.steps>ul>li.current a:hover {
	background: var(--pc-accent-red) !important;
	color: #fff !important;
}
.app_theme_h .wizard>.steps>ul>li.done a,
.app_theme_h .wizard>.steps>ul>li.done a:active,
.app_theme_h .wizard>.steps>ul>li.done a:hover {
	background: var(--pc-success) !important;
	color: #fff !important;
}

/* filter-button radius (#ls_filters_btn / #ts_filters_btn): DEFERRED to a
   .prg follow-up. These ids live ONLY on standalone-head pages that never
   link /css/manager.css — clock_miss_punch.prg (links ./css/uikit.min.css +
   ./css/print.css) and clock_timesheets_summary.prg (head hardcodes a literal
   <link> to /require/uikit/proclock_manager.min.css, which the
   common_global.prg:53-57 rewrite does NOT touch — it only swaps
   getCore():aStyleSheet entries, never hardcoded <link> strings). Both pages
   already define #*_filters_btn with !important in an inline <style> and the
   button carries an inline border-radius:6px (see in-file comments
   clock_miss_punch.prg:260 / clock_timesheets_summary.prg:200). The radius
   change belongs in those inline <style> blocks and cannot be reached from
   manager.css. */
/* Billing Setup page — switch the page TEXT from the theme Roboto to the
   native system UI stack (San Francisco on macOS / Segoe UI on Windows), the
   same change that fixed the sidebar sub-labels' too-heavy Roboto look. The
   system stack renders lighter/cleaner so the labels, field values, and
   section headers read less heavy WITHOUT touching weight or color (this is
   font-family ONLY — the sidebar's color/weight overrides were sidebar-
   specific and are deliberately NOT applied here).

   SCOPE: anchored on #form_edit, the page's unique top-level <form> wrapper
   (template/billing/setup.html:107 — verified the ONLY id="form_edit" in the
   repo, so no other page is affected). The descendant selector covers the
   page's labels (label, .md-input-wrapper label), field values
   (input.md-input, .field), and section headers (.heading_c, .heading_b),
   plus the subscription tab's .uk-text-large copy. Material Icons glyphs
   (the green save FAB's "save" icon, credit-card icons) keep their own
   font-family via .material-icons / the Font Awesome `fa*` classes, which we
   do NOT override, so iconography is untouched. */
#form_edit,
#form_edit label,
#form_edit input.md-input,
#form_edit .field,
#form_edit .heading_c,
#form_edit .heading_b,
#form_edit .heading_b .sub-heading,
#form_edit .uk-text-large,
#form_edit .md-list-heading,
#form_edit .uk-text-small,
#form_edit .inline-label {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

/* ===== end ProClock hold-over visual polish ===== */

/* Sticky filter-header opaque mask.
   The filter tiles row (Select Employee / Select Department / Pay Period /
   Settings) is a UIkit sticky wrapper:
     <div class="uk-grid uk-grid-small" data-uk-sticky="{... clsactive:'top_active'}">
   When pinned, UIkit adds the `top_active` class and sets position:fixed.
   The wrapper itself has NO background (no inline style on the div — verified
   clock_miss_punch.prg:606), so scrolling punch rows show through the grid
   gutters between the tiles. A background on the `.uk-grid` ALONE cannot mask
   those gaps: the inter-tile gutters are the children's left-padding plus
   UIkit's negative/grid margins, which fall OUTSIDE the grid's painted box
   (a baked-in page-local `.top_active { background:#fff }` already proved
   insufficient — rows still bled through). The fix is to COLLAPSE the gutters
   while pinned so the opaque #ececec band is contiguous and meets the tile
   edges: zero the grid's margins (overrides the page-local
   `.top_active { margin-left:0 !important }` via `.uk-grid.top_active`
   specificity (0,2,0) + !important) and zero the tile columns' left-padding
   (`.uk-grid.top_active > [class*="uk-width"]`, no competing rule). Because
   `top_active` is applied ONLY while pinned, normal gutters return when
   unpinned. Leave the page-local height:140px alone. The .md-card tiles keep
   their own white backgrounds and are unaffected. Shared by Punch Management,
   Timesheet Summary, Timesheet Approval, and Timecards (all use the identical
   sticky `uk-grid` wrapper with clsactive:'top_active'). */
.uk-grid.top_active {
	margin: 0 !important;            /* zero the grid's negative left-margin AND any grid-margin gaps so the band is contiguous */
	background: #ececec !important;
}
.uk-grid.top_active > [class*="uk-width"] {
	padding-left: 0 !important;      /* close the inter-tile gutters while pinned (top_active is only present when pinned) */
}

/* Sidebar main-menu sub-labels (Punch Management, Timesheet Summary, etc.):
   the nested sub-item anchors LOOKED BOLDER than the main category labels
   (EMPLOYEES, TIMESHEETS, REPORTS, BILLING, SETUP) — but the real cause was
   COLOR, not weight. The main category labels (span.menu_title inside the
   top-level >li>a) sit at the served Altair theme's muted grey #212121
   (main.min.css: `#sidebar_main .menu_section>ul>li>a{font:500 14px/25px ...;
   color:#212121}`). The sub-labels here were being forced to near-black
   (#000) — and darker text reads as heavier. So even though the subs are
   weight 400 (UNDER the mains' weight 500), the near-black color made them
   read bolder than the grey categories.

   THE FIX: paint the sub-labels a muted grey #757575 — LIGHTER than the
   #212121 category labels above them — at a solid weight 400. Since the
   categories are near-black, the only way for the subs to be not-bolder is
   to be lighter; #757575 is clearly lighter than #212121 (and matches the
   menu icon grey ~#727272 for visual consistency), so the subs can no longer
   read bolder than the categories. Kept at solid weight 400 — NOT the faint
   thin 300, which looked washed-out. Removed the two prior dead-ends that
   chased this the wrong way: color:#000000 (the actual culprit — darker, not
   lighter) and letter-spacing:0.5px (a glyph-density workaround that never
   addressed the color difference). The all-caps/mixed-case and weight 400
   were never the problem.

   SCOPE: still anchored on html body + the a[href] attribute hook and the
   nested `> ul > li ul li:not(.act_item) a[href]` chain — top-level labels
   (span.menu_title) are a span inside the top-level >li>a, NOT a nested li>a,
   so the mains are NEVER touched. ACTIVE-ITEM CAVEAT: the theme paints the
   active sub-item red via
   `.menu_section>ul>li ul li.act_item a{color:#cc0000 !important}` (line ~638).
   The li:not(.act_item) scope leaves the active sub-item's red intact.

   FONT: switched the sub-label font from the theme Roboto to the native system
   UI stack (San Francisco on macOS / Segoe UI on Windows), which renders
   lighter/cleaner so the mixed-case text reads less heavy without thinning the
   weight. Weight 400 kept. The grey was then nudged darker in steps
   (#757575 -> #616161, Material grey-700; then #616161 -> #424242, Material
   grey-800) per operator preference, still clearly lighter than the #212121
   category labels so the sub-labels stay not-bolder than the categories. The
   active item (red #cc0000) and the main labels (span.menu_title, still
   Roboto) are untouched. */
html body #sidebar_main .menu_section > ul > li ul li:not(.act_item) a[href] {
	font-weight: 400 !important;
	color: #424242 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

/* CHECKED CHECKBOX → modern green. The earlier red→neutral/slate softening
   added a `.icheckbox_md.checked { background:#727272 }` rule above (grey),
   which caught the icheck checkbox accent. Restore a modern checkmark green
   (Material green 600 (darker)). The theme draws the box via .icheckbox_md and
   the tick via `.icheckbox_md.checked:after { color:#fff }` (Material Icons
   glyph), so painting the box green keeps the white tick legible — no :after
   override needed. Scoped to .icheckbox_md ONLY (radios .iradio_md untouched). */
.icheckbox_md.checked,
.icheckbox_md.hover.checked {
	background: #43a047 !important;
	border-color: #43a047 !important;
}

/* ===== TASK 1 — Billing Setup page title → BOLD + WHITE on the slate band =====
   The "Billing Setup" title sits in the slate header band atop the Billing
   Setup page (template/billing/setup.html:112-114):
     <div class="user_heading md-bg-grey-300" ...>
       <div class="user_heading_content">
         <h2 class="heading_b"><span class="sub-heading"
              style="color: #000000;" id="user_edit_position">Billing Setup</span>
   The .user_heading band is painted with the slate gradient by the polish
   block above, so the title's black text read poorly. The title <span> carries
   a PLAIN (non-!important) inline `color:#000000`, so a scoped !important rule
   beats it. SCOPE: the id #user_edit_position is UNIQUE across the entire repo
   (verified — appears only on this Billing Setup title), so this affects NO
   other page title. CSS alone fixes this — NO rebuild needed. */
#user_edit_position {
	color: #ffffff !important;
	font-weight: 700 !important;
}

/* ===== TASK 2 — SETUP active-page menu now turns red at ANY nesting depth =====
   ROOT CAUSE (proven by cascade resolution, not assumed):
   The sidebar active LEAF is colored via the act_item class, which the navbar
   JS (common/navbar.prg:271) DOES set on the clicked leaf <li> at every depth
   (`$(element).closest("li").addClass("act_item")`), so (a) the class IS set on
   Managers. The theme/manager active-red selectors use DESCENDANT combinators
   (`.menu_section>ul>li ul li.act_item a`) so (b) the selector DOES reach 3-level
   depth. The actual culprit is (c) OUR OWN grey sub-label override
   (`html body #sidebar_main .menu_section > ul > li ul li:not(.act_item) a[href]
    { color:#424242 !important }`, ~line 1154): at 3-LEVEL depth the active leaf
   anchor (Managers) is ALSO a descendant of the NON-active intermediate <li>
   ("Users", which lacks act_item), so the `:not(.act_item)` qualifier FAILS to
   exclude it — the rule matches the Managers anchor through the Users ancestor.
   That grey rule's specificity (1,3,7) + !important BEATS the existing active-red
   rules (manager.css:638 `.menu_section>ul>li ul li.act_item a` = (0,2,5) !imp;
   manager.css:500 is malformed `color: color:#...` and is dropped by the parser),
   so Managers fell back to grey. The 2-level TIMESHEETS→Tips case is unaffected
   because Tips' only <li> ancestor IS the act_item leaf, so the grey :not() rule
   never matches it and the red wins.

   FIX (CSS — no .prg/behavior fix needed): add depth-AGNOSTIC active-red rules
   that match the active leaf at ANY depth and out-rank the grey override. Same
   red (#cc0000) the theme already uses for active items. Two selectors:
     • `html body #sidebar_main .menu_section ul li ul li.act_item a[href]`
       ties the grey rule at (1,3,7) and wins on LATER source order (this block
       follows line 1154) — covers 2-level AND 3-level nested leaves.
     • `html body #sidebar_main .menu_section li.act_item a[href]` (1,3,4) covers
       top-level (level-1) leaf items.
   Both verified winners across 2-level / 3-level / top-level via cascade
   resolution. The grey :not(.act_item) rule still correctly greys all NON-active
   sub-labels (it just no longer suppresses the active leaf at depth 3). */
html body #sidebar_main .menu_section ul li ul li.act_item a[href],
html body #sidebar_main .menu_section li.act_item a[href] {
	color: #cc0000 !important;
}

/* ===== TASK 3 — Managers cards (SETUP → Users → Managers) restyle =====
   Card markup: clockempl.prg:11827-11909. Each card is
     <div id="contact_list"> ... <div class="list-empl" ...>
       <div class="md-card md-card-hover">
         <div class="md-card-head md-bg-blue-400">   (employee/manager: BLUE)
         <div class="md-card-head md-bg-orange-300">  (admin "Paysoft Support": ORANGE)
   SCOPE: anchored on `#contact_list .list-empl` (the unique Managers-page card
   grid id + per-card class) so nothing else on any page is touched.

   (3a) HEADER BACKGROUNDS — set by CLASS (md-bg-blue-400 / md-bg-orange-300),
   each `background-color:#... !important` in the theme (blue #42a5f5, orange
   #ffb74d). A scoped (1,3,0) !important rule out-specifies the theme's (0,1,0)
   !important and applies a top→bottom gradient fade (lighter top → darker
   bottom, matching the slate-gradient idiom). `background:` shorthand wins; a
   `background-color` longhand fallback is added for cascade clarity. CSS alone
   — NO rebuild needed (the hue source is a class, not a per-card inline). */
#contact_list .list-empl .md-card-head.md-bg-blue-400 {
	background-color: #3f72b8 !important; /* solid fallback */
	background: linear-gradient(180deg, #5b9bd5 0%, #3f72b8 100%) !important;
}
#contact_list .list-empl .md-card-head.md-bg-orange-300 {
	background-color: #e08e1b !important; /* solid fallback */
	background: linear-gradient(180deg, #f5a623 0%, #e08e1b 100%) !important;
}

/* (3c) RED DATA VALUES — Email / Phone / Pay-Period VALUES carry
   `class="uk-text-danger"` with a PLAIN inline `style="display:initial;"` (NO
   inline color — verified clockempl.prg:11890/11897/11902). Globally
   .uk-text-danger is the warning red (#cc0000, line 657) which we must NOT touch.
   Scoping to the card body (`#contact_list .list-empl .md-card-content
   .md-list-heading .uk-text-danger`, (1,4,0) !important) re-hues ONLY these card
   data values to brand slate #5d6775 — red stays reserved for real warnings
   elsewhere. The inline `display:initial` has no color, so this !important wins.
   CSS alone — NO rebuild needed. */
#contact_list .list-empl .md-card-content .md-list-heading .uk-text-danger {
	color: #5d6775 !important;
}

/* (3b) "Emp No: XXXX" VALUE text — PARTIAL CSS FIX + FLAG.
   The LABEL "Emp No:" sits in `<span class="uk-text-truncate">` inside the
   `.md-card-head-text` <h3>; on BLUE manager cards the <h3> already gets white
   (inline on the h3), so the label reads white. We also force the truncate
   label white here for the admin/orange card for consistency (the admin h3 has
   no white inline). This part IS CSS-fixable:
   ────────────────────────────────────────────────────────────────────────── */
#contact_list .list-empl .md-card-head-text .uk-text-truncate {
	color: #ffffff !important;
}
/* ⚠️ FLAGGED FOR .prg FIX (NOT done here — needs operator approval to rebuild):
   The Emp No / Adm No VALUE itself is a BARE inner <span> with an inline
   !important color and NO class hook:
     manager (blue):  <span style="display:initial;color: #1a237e!important;font-weight:700; !important;">  (clockempl.prg:11875 — dark NAVY)
     admin (orange):  <span class="uk-text-danger" style="display:initial;color: #000000!important;font-weight:700; !important;">  (clockempl.prg:11878 — BLACK)
   An inline `!important` declaration CANNOT be overridden by any external
   stylesheet rule (it outranks every author rule, !important or not), and the
   value span has no class to hook for the manager case. So the navy/black Emp-No
   VALUE cannot be turned white from manager.css. FIX REQUIRED IN clockempl.prg:
   change the inline `color:#1a237e!important` (11875) and `color:#000000!important`
   (11878) to `color:#ffffff` (or drop the inline color so it inherits the white
   h3) — then rebuild clockempl.exe. Reported, not done. */

/* ════════════════════════════════════════════════════════════════════════════
   (4) MANAGERS-CARD employee NAME — weight + font + long-name fit.
   SETUP → Users → Managers. Card markup verified at clockempl.prg:11871-11886:
     <h3 class="md-card-head-text uk-text-center" style="color:#fff !important">
         FERNANDES ESPINDOLA LUCAS            ← the NAME: a BARE TEXT NODE in <h3>
         <span class="uk-text-truncate">DEVELOPER</span>        ← role line
         <span class="uk-text-truncate">Emp No: …</span>        ← emp-no line
     </h3>
   The NAME element is the <h3 class="md-card-head-text"> itself (its own text
   node). The .md-card-head-text rule lives in the bundled Altair/Material theme
   (NOT in css/), so it's a normal author rule we can outrank with !important.
   CRUCIAL: the NAME text carries NO inline font-size / font-weight / white-space
   (the only inline on the <h3> is `color:#fff` for managers — verified). So the
   NAME's weight, font, size, and wrapping are ALL CSS-overridable here — NO .prg
   rebuild needed for the NAME. (Contrast the Emp-No VALUE span above, which DOES
   carry inline !important and stays flagged in (3b).)
   Scoped to `#contact_list .list-empl` → only the Managers cards are affected.
   ──────────────────────────────────────────────────────────────────────────── */

/* (4a) NAME: one step less bold (700→600), system UI font (cleaner/lighter +
   slightly narrower → helps long names fit), and a hair smaller (15px) so a
   two-line name sits neatly. */
#contact_list .list-empl .md-card-head-text {
	font-weight: 600 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 15px !important;
	line-height: 1.25 !important;
}

/* (4b) LONG-NAME FIT: the NAME is the <h3>'s bare text node. The theme's
   .md-card-head-text may clip it (nowrap / fixed height). Force clean wrapping
   so e.g. "FERNANDES ESPINDOLA LUCAS" lays out on two lines fully INSIDE the
   tile instead of clipping or shoving the role/Emp-No out of place. The role +
   Emp-No are separate .uk-text-truncate child spans (handled in 4c) — this rule
   governs the NAME text only. `height:auto` releases any fixed head-text height
   so the head grows to fit a two-line name and cards still align in the grid. */
#contact_list .list-empl .md-card-head-text {
	white-space: normal !important;
	overflow-wrap: break-word !important;
	word-break: break-word !important;
	overflow: visible !important;
	height: auto !important;
	text-overflow: clip !important;
}

/* (4c) ROLE + Emp-No lines stay correctly positioned BELOW the (possibly
   two-line) NAME. The theme gives these `.uk-text-truncate` spans
   white-space:nowrap (single-line, ellipsis) which is what we want for them —
   we only force them to render as their own full-width lines so they sit
   directly under the wrapped name rather than running inline after it. Keeps
   the head layout consistent whether the name is one or two lines. */
#contact_list .list-empl .md-card-head-text .uk-text-truncate {
	display: block !important;
	font-weight: 600 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   (4d) GRADIENT HEADER CONTAINER long-name CONTAINMENT — the ACTUAL bug fix.
   SETUP → Users → Managers.
   ROOT CAUSE (verified in the bundled Altair/Material theme main.min.css):
     `.md-card-head { height:160px; position:relative;
                      border-bottom:1px solid rgba(0,0,0,.12) }`
   The header container carries a FIXED `height:160px` (plain rule, NO
   !important, NO inline on the <div> — clockempl.prg:11842/11844/11846 emit
   only the bg class). For a 1-line name the avatar (82px + 16px margin-top) +
   name + role + Emp-No fit inside 160px. For a LONG name like
   "FERNANDES ESPINDOLA LUCAS" the <h3> wraps to two lines, so the stacked
   content is TALLER than 160px; with the container locked at 160px AND the
   theme leaving `overflow` at its default `visible`, the bottom "Emp No" line
   SPILLS OUT THE BOTTOM of the painted gradient box into the white card body
   (the stray navy "8918"). The prior fix grew the TEXT element
   (.md-card-head-text, 4a/4b) but NEVER released the PARENT container's fixed
   160px height — so the container kept clipping/overflowing.

   FIX: scoped `#contact_list .list-empl .md-card-head` (specificity 1,2,0)
   out-specifies the bare theme `.md-card-head` (0,1,0), so:
     • height:auto  — releases the fixed 160px so the header GROWS to fit a
                      two-line name + role + Emp-No.
     • min-height:160px — short-name cards keep their CURRENT size + the avatar
                      alignment unchanged (only long-name cards grow taller).
     • overflow:visible — explicit; the grown box paints its full content, no
                      clip. (Harmless for short cards.)
     • padding-bottom:16px — guarantees a little breathing room under the last
                      line so a tight two-line name never sits flush against the
                      bottom edge.
   The gradient background is set on this same `.md-card-head.md-bg-blue-400 /
   .md-bg-orange-300` element (rules 3a above) as a `linear-gradient(180deg…)`,
   which by default paints the element's FULL (grown) box — so the gradient
   covers the taller header with no gap. Cards in a row may end up different
   heights (a long-name card is taller than its 1-line neighbours); that's
   acceptable per spec — each card is internally clean, with name+role+Emp-No
   all INSIDE the gradient. CSS alone — NO .prg rebuild needed (the 160px is a
   theme class rule, not a per-card inline). */
#contact_list .list-empl .md-card-head {
	height: auto !important;
	min-height: 160px !important;
	overflow: visible !important;
	padding-bottom: 16px !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   (FIX #3) EMPLOYEES-page card GRID — UNIFORM HEIGHT for even masonry rows.
   SETUP nav → "Employees" (clockempl.prg MAINEMPL_UI, mode=1). #contact_list is
   laid out by UIkit-2 UIkit.grid (clockempl.prg ~11972) — a MASONRY grid that
   absolutely-positions each card shortest-column-first. When cards differ in
   height (photo vs gray placeholder, a wrapped long name, the department line)
   the columns stagger and the "rows" stop lining up. Forcing a UNIFORM card
   height makes masonry lay them in even rows.
   This SUPERSEDES rule 4d directly above (height:auto; min-height:160px, which
   let heads grow) — for even rows we FIX the head height and CLIP overflow.
   Kept CSS-only so UIkit.grid.filter() (pay-period / department / search) keeps
   working; a flex/CSS-grid switch would break that JS filter. Static deploy —
   NO .prg rebuild.
   NOTE on long names: a true per-NAME 2-line ellipsis can't be scoped cleanly
   because the <h3 class="md-card-head-text"> mixes the NAME text node with the
   role/emp-no child <span>s. So we fix the head height + overflow:hidden, which
   uniformly CLIPS an over-long 3rd line. Names still wrap to 2 lines (rules
   4a/4b); anything past the fixed head is clipped instead of pushing the card
   taller and breaking the row. Heights: head 160 + body 140 = card 300. */
#contact_list .list-empl .md-card {
	height: 300px !important;			/* uniform outer height → even masonry rows */
	overflow: hidden !important;
}
#contact_list .list-empl .md-card-head {
	height: 160px !important;			/* fixed — supersedes 4d height:auto */
	min-height: 160px !important;
	max-height: 160px !important;
	overflow: hidden !important;
	padding-bottom: 8px !important;
}
#contact_list .list-empl .md-card-content {
	height: 140px !important;			/* 300 − 160 head */
	overflow: hidden !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   UNIFIED BUTTON COLOR LANGUAGE (owner George, confirmed 2026-06-24)
   PILOT phase — validated on 3 pages (clockcomp / clockde1 / clockde2) before
   the full .prg sweep, but written to be correct + complete for the WHOLE app
   (css/manager.css is the live served sheet — common_global.prg:53-55 swaps
   /require/uikit/proclock_manager.min.css → /css/manager.css).

   THE LANGUAGE:
     • SAVE / commit  = RED GRADIENT (the app's existing --pc-btn-red-grad, same
                        as ADD PUNCH `.btn-punch-new`) + slightly rounded corners.
     • CANCEL / dismiss = WHITE fill + BRAND-RED OUTLINE + rounded + light-red
                        hover tint.
     • SECONDARY      = blue (UNCHANGED — left to its existing rendering).
     • HELP           = orange (UNCHANGED).
     • ALL buttons    = slightly rounded corners (not boxy).
     • Existing FLAT reds → upgraded to the red GRADIENT.

   ⚠️ STYLING SURFACE IS THE md-btn-* CLASSES — NOT `.color.*.button`.
   FiveWeb normalizes ALL legacy WebButton tokens ('color red button',
   'color blue button', 'color cancel button', 'color white button', etc.) into
   the Material classes md-btn-primary / md-btn-success / md-btn-warning /
   md-btn-danger at RUNTIME. The literal token strings carry NO selectors in any
   served stylesheet, so a `.color.red.button` rule would never match. (Confirmed
   by the team's full button audit.) Therefore SAVE/red is delivered by upgrading
   the md-btn-primary base rule (and md-btn-danger) to the gradient — see below
   and the patched base rule at css/manager.css:14-26.

   NOT REDDENED: md-btn-success — it is ACCEPT / Approve / CONFIRM
   (common_punch.prg), not a save. Green→red save conversion is done per-button
   by HARBOUR-DEV, not by a blanket success override here.
   ──────────────────────────────────────────────────────────────────────────── */

/* (A) GLOBAL ROUNDED CORNERS — every button app-wide gets slightly rounded
   corners. The served base `.md-btn` (template/tips/style.css:3448) and the
   UIkit `.uk-button` (tips/style.css:130) are boxy at border-radius:2px. Bump
   to --pc-radius-btn (8px). Covers the FiveWeb `.button` class too (the bare
   `.button` class is emitted ONLY by FiveWeb setclassname('… button'), i.e. it
   is always a real button — verified no `.button` rule on non-buttons in served
   CSS). !important beats the base 2px rule; per-button inline radius is rare. */
.md-btn,
.uk-button,
.button {
	border-radius: var(--pc-radius-btn) !important;
}

/* (B) SAVE / RED — flat reds upgraded to the app red GRADIENT.
   The PRIMARY save/fall-through path (md-btn-primary, the runtime target of the
   normalized 'color red button' save tag) is upgraded IN PLACE at the theme base
   rule css/manager.css:14-26 (background → var(--pc-btn-red-grad), !important +
   background-color longhand). This block additionally upgrades md-btn-danger
   (the other flat red — Abort / save-and-exit) to the SAME gradient so every
   currently-red button renders the gradient app-wide. :active reverses. */
.md-btn-danger,
.md-btn-danger.uk-active,
.md-btn-danger:focus,
.md-btn-danger:hover,
.md-btn-danger:active {
	background: var(--pc-btn-red-grad) !important;
	background-color: #b22222 !important; /* solid fallback + beats any plain inline bg */
	color: #fff !important;
	border: none !important;
}
.md-btn-danger:active {
	background: var(--pc-btn-red-grad-active) !important;
}

/* (C) CANCEL / DISMISS — white fill + brand-red (#b22222 / --pc-accent-red)
   OUTLINE + rounded + light-red hover tint (--pc-danger-tint), brand-red text.

   SELECTOR = `.md-btn-default:not(.uk-form-file)` (both `.app_theme_h`-scoped and
   the bare form). The `:not(.uk-form-file)` guard is REQUIRED (team-lead decision
   2026-06-24): FiveWeb's file-upload controls emit the COMPOUND class
   `uk-form-file md-btn md-btn-default` (tips/style.css:1502 `div.uk-form-file.md-btn`),
   so excluding `.uk-form-file` keeps every upload control untouched app-wide while
   still styling all real cancel buttons (no cancel is a uk-form-file).
   GROUND TRUTH (HARBOUR-DEV extracted the emitted-HTML strings from the compiled
   fiveweb.lib via `strings`, so this is verified, not inferred): FiveWeb maps the
   WebButton `white` token → `md-btn md-btn-default`, and the token switch is FIXED
   — arbitrary strings (e.g. zName/setclassname('pc-btn-cancel')) do NOT pass
   through; they fall through to md-btn-primary. So FiveWeb gives a cancel exactly
   ONE distinct, CSS-styleable surface: md-btn-default, reached via the `white`
   token. HARBOUR-DEV tags pilot cancels `setclassname('color white button')`
   (the live idiom, already used in clockmails/clockmsgs) → renders md-btn-default
   → this rule styles them. (Saves go to md-btn-primary = the red gradient above;
   cancels CANNOT reuse md-btn-primary/danger, hence md-btn-default.)

   ⚠️ KNOWN GLOBAL COLLISION (md-btn-default is overloaded — flagged for George's
   ruling BEFORE the app-wide .prg sweep; PILOT pages clockcomp/clockde1/clockde2
   are CLEAN — none use the white token or an upload control, verified):
   This rule restyles EVERY md-btn-default app-wide, which also includes:
     • WebButton `white`-token buttons: History (oButHist) on clockmails:170 /
       clockmsgs:183; clock_timesheets_submit; connect — these become the cancel
       look (acceptable-ish; they're secondary actions).
     • RAW-HTML md-btn-default (6 occurrences, NOT cancels):
         - maintenance.prg:121/122/260/261 Save/Cancel/Update (carry inline
           background:#1976d2 blue — my !important outline rule WILL override
           them to white+red-outline).
         - clocklogin.prg:43 the LOGIN "Save" button (no inline bg → fully flips
           to the cancel look). ⚠️ user-facing on login.
         - common/common_punch.prg:1323 "Add Punches" action links (no inline bg
           → fully flip). ⚠️ appear on punch pages.
   The `:not(.uk-form-file)` guard (above) spares FiveWeb's file-upload controls.
   The REMAINING collisions — login Save (clocklogin.prg:43), Add-Punches
   (common_punch.prg:1323), maintenance Save/Update (maintenance.prg), and the
   bare-md-btn-default White/History buttons (clockmails/clockmsgs/
   clock_timesheets_submit/connect) — are NOT individually CSS-excludable without
   also excluding legit cancels (FiveWeb gives no per-page body/container hook —
   every page renders the same `<body class="header_full sidebar_main_open …">` /
   `#page_content` — and no custom-class passthrough). Per team-lead decision
   (2026-06-24) those shared md-btn-default consumers are ACCEPTED to inherit this
   look app-wide for the PILOT and will be addressed at sweep time. For the PILOT
   scope this rule is collision-free on the 3 target pages (clockcomp/clockde1/
   clockde2 — none use the white token or an upload control, verified). */
.app_theme_h .md-btn-default:not(.uk-form-file),
.md-btn-default:not(.uk-form-file) {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #b22222 !important;
	border: 2px solid #b22222 !important;
	border-radius: var(--pc-radius-btn) !important;
	box-shadow: none !important; /* outline reads cleaner without the md-btn drop shadow */
}
.app_theme_h .md-btn-default:not(.uk-form-file):hover,
.app_theme_h .md-btn-default:not(.uk-form-file):focus,
.md-btn-default:not(.uk-form-file):hover,
.md-btn-default:not(.uk-form-file):focus {
	background: var(--pc-danger-tint) !important;       /* #fdecea — light red tint */
	background-color: var(--pc-danger-tint) !important;
	color: #cc0000 !important;
	border-color: #cc0000 !important;
}
.app_theme_h .md-btn-default:not(.uk-form-file):active,
.md-btn-default:not(.uk-form-file):active {
	background: #fbdedb !important;                      /* slightly deeper tint on press */
	background-color: #fbdedb !important;
}

/* ===== end UNIFIED BUTTON COLOR LANGUAGE ===== */

/* ============================================================================
   SAVED-FILTER UI — green-when-saved bubble + bolder SAVE button
   (Punch Management ONLY — clock_miss_punch.prg. The Timesheet Summary page
   #ts_filters_btn has the blue .ls-filters-active dot but NO saved-default
   feature — no .ls-has-default, no .ls-saved-tag, no save button — see
   clock_timesheets_summary.prg:251 — so none of these rules can match there
   and its dot correctly stays blue.)

   George's asks (2026-06-25):
     1. KEEP blue dot for "filter enabled"            → untouched below.
     2. Saved (.ls-has-default) → dot turns GREEN      → rule (A).
     3. HIDE the "· saved" text tag (.ls-saved-tag)    → rule (B).
     4. Make the in-panel SAVE button a BOLDER, more
        saturated green when ENABLED (.ls-savedef-on)  → rule (C).

   CSS-ONLY: every base rule lives in the page's own in-page <style> block
   (clock_miss_punch.prg:262-356 button cues, :541-562 save button). These
   manager.css overrides win on specificity (and carry !important as a belt-
   and-suspenders against the in-page block's load order), so NO .prg edit and
   NO Harbour rebuild are required — ships via the --css deploy path.
   ----------------------------------------------------------------------------

   (A) DOT GOES GREEN WHEN SAVED.
   The dot is the ::after on #ls_filters_btn.ls-filters-active (page rule, blue
   #1a75d2, specificity 1,1,0). The dot only renders while a filter is ENABLED
   (.ls-filters-active). When a default is ALSO saved, .ls-has-default is
   present too, so this selector (1,2,0 + pseudo) out-specifies the page's blue
   rule and repaints the SAME dot green: blue = enabled-but-not-saved, green =
   saved. (#4caf50 = Material Green 500 — the exact green the save button uses
   for its saved state, so dot and button read as one "saved" cue.) */
#ls_filters_btn.ls-has-default.ls-filters-active::after {
	background: #4caf50 !important;
}

/* (B) HIDE THE "· saved" TEXT TAG.
   The green dot now carries the saved state, so the runtime-injected
   <span class="ls-saved-tag" aria-hidden="true">· saved</span>
   (clock_miss_punch.prg:1313) is redundant. It is already aria-hidden, so
   display:none removes no accessible information. The amber inset shadow on
   #ls_filters_btn.ls-has-default is intentionally left as-is — it is the
   saved cue for the case where a default is saved but no filter is currently
   active (no dot showing). */
#ls_filters_btn.ls-has-default .ls-saved-tag {
	display: none !important;
}

/* (C) BOLDER, SATURATED SAVE BUTTON WHEN ENABLED.
   Enabled = .ls-savedef-row.ls-savedef-on (set on save AND on load when a
   saved default exists). The page's enabled look is subtle — green TEXT
   (#4caf50) on a pale #e8f5e9 fill. Make "active" unmistakable: a SOLID,
   saturated green fill with a white glyph and bold weight. The DISABLED state
   (no .ls-savedef-on → grey #90a4ae glyph, no fill — page rule, untouched)
   stays clearly distinct.

   FILL = #4caf50 (Material Green 500) — the EXACT green the saved dot uses in
   rule (A) above, so the enabled save button and the saved dot read as one
   green. Hover steps one shade darker to #43a047 (Material Green 600) so the
   button still reads as actionable. (Was #43a047 fill / #2e7d32 hover.)

   WHITE DISK GLYPH: the glyph is <i class="material-icons">save</i>, a font
   icon (clock_miss_punch.prg:894). Material Icons render in the inherited
   `color`, and the page's base rules set color on the BUTTON (.ls-icon-save),
   not on the <i>, so color:#ffffff on the button inherits down to the glyph.
   Belt-and-suspenders, the second rule below targets the .material-icons <i>
   directly so the disk is forced white regardless of any inherited-vs-direct
   color edge case — confirmed no other rule sets color on .material-icons in
   this context (the menu/sidebar .material-icons rules don't match here, and
   the in-page .ls-icon-btn .material-icons rule sets only font-size). */
.ls-savedef-row.ls-savedef-on .ls-icon-save {
	background: #4caf50 !important;       /* Material Green 500 — matches the saved dot (rule A) */
	border-color: #4caf50 !important;
	color: #ffffff !important;
	font-weight: 700 !important;
}
.ls-savedef-row.ls-savedef-on .ls-icon-save .material-icons {
	color: #ffffff !important;            /* force the disk glyph white on the green fill */
}
.ls-savedef-row.ls-savedef-on .ls-icon-save:hover {
	background: #43a047 !important;       /* Material Green 600 — a touch darker on hover */
	border-color: #43a047 !important;
	color: #ffffff !important;
}
.ls-savedef-row.ls-savedef-on .ls-icon-save:hover .material-icons {
	color: #ffffff !important;
}
/* ===== end SAVED-FILTER UI ===== */