@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&display=swap");

/* =========================================================
   Design Tokens
   ========================================================= */
:root {
	--gray-medium: #F7F7F7;
	--gray-light: #EDEBE9;
	--gray-border: #C6C7C8;
	--emp-list-width: 250px;
}

/* =========================================================
   Base + Typography
   ========================================================= */
body {
	font-family: "Fira Code", monospace;
	margin: 0;
	background-color: var(--gray-light);
	height: 100vh;
	overflow-y: auto;
}

* { letter-spacing: -.05em; }

/* Fomantic/Semantic UI sets its own heading fonts; force headings to use the app font */
h1, h2, h3, h4, h5, h6,
.ui.header {
	font-family: "Fira Code", monospace;
}

h1,
.pp .card-header,
.modal-title { text-transform: uppercase; }

a { text-decoration: none; }

/* =========================================================
   Layout
   ========================================================= */
.main-wrapper {
	display: flex;
	height: 100vh;
	overflow: hidden;
}

.inner-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	background-color: var(--gray-light);
	overflow: hidden;
}

.navbar {
	padding: .75em 1em;
	height: 60px;
	color: var(--bs-secondary);
	background-color: var(--gray-medium);
	border-bottom: solid 1px var(--gray-border);
}

.content-button-group {
	padding: 0 1em;
}

.main-content {
	flex: 1;
	overflow: auto;
	padding: 0 1em;
	margin: 1em;
	background-color: var(--gray-medium);
	border-radius: var(--bs-border-radius);
}

/* Height matching container (no internal scrolling here; page scroll/paging handles overflow) */
.table-container { max-height: none; }

/* =========================================================
   Utilities
   ========================================================= */
.row-top-margin-1 { margin-top: 5rem; }
.row-top-margin-2 { margin-top: 1rem; }
.row-top-margin-3 { margin-top: .5rem; }

.row-bottom-margin-1 { margin-bottom: 5rem; }
.row-bottom-margin-2 { margin-bottom: 1rem; }
.row-bottom-margin-3 { margin-bottom: .5rem; }

.no-event { pointer-events: none; }
.input-group-text { min-width: 130px; }
/* =========================================================
   Forms
   ========================================================= */
input, select, textarea { letter-spacing: normal; }

/* Subtle input background (Bootstrap 5.3 .bg-info-subtle color scheme)
   Applies to all inputs except checkbox/radio (includes table inputs and DT search). */
.modal :where(input, textarea, select):enabled:not([type="checkbox"]):not([type="radio"]):not([readonly]),
.card :where(input, textarea, select):enabled:not([type="checkbox"]):not([type="radio"]):not([readonly]) {
	background-color: var(--bs-info-bg-subtle, rgba(var(--bs-info-rgb), 0.12));
}

/* Card summary inputs should stay white even when readonly/disabled (Bootstrap overrides) */
.card-summary :is(input.form-control, textarea.form-control, select.form-select),
.card-summary :is(input.form-control, textarea.form-control, select.form-select):disabled,
.card-summary :is(input.form-control, textarea.form-control, select.form-select)[readonly] {
	background-color: var(--bs-body-bg, #fff);
	opacity: 1;
}

/* Fix border-radius when using <input list="..."> inside input-groups (datalist) */
.input-group .form-control[list] {
	border-top-left-radius: 0.375rem;
	border-bottom-left-radius: 0.375rem;
}

/* Reduce spacing between adjacent action buttons that are each wrapped in .col-auto */
.col-auto + .col-auto > button { margin-left: -15px; }

/* Icon-mode buttons (processing/success states) */
.btn-icon-mode .btn-spinner,
.btn-icon-mode .btn-checkmark { display: none; }

.btn-icon-mode.is-processing .btn-icon { display: none; }
.btn-icon-mode.is-processing .btn-spinner { display: inline-block; }

.btn-icon-mode.is-success .btn-icon { display: none; }
.btn-icon-mode.is-success .btn-checkmark { display: inline-block; }

button.btn-icon-mode .btn-icon-slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* =========================================================
   Modals
   ========================================================= */
.modal .modal-content { transition: filter 0.5s ease; }

.modal.loading .modal-content {
	position: relative;
	filter: brightness(0.8);
	pointer-events: none;
}

.modal.loading .modal-content::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(1px);
	z-index: 1000;
}

/* Subtle modal open/close polish */
.modal.fade .modal-dialog {
	transform: scale(0.95);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.modal.fade.show .modal-dialog { transform: scale(1); opacity: 1; }
.modal-backdrop.fade { opacity: 0; transition: opacity 0.3s ease; }
.modal-backdrop.fade.show { opacity: 0.5; }

/* Modal header palette */
.modal-header {
	background-color: var(--bs-dark);
	color: #FFF;
}

/* =========================================================
   Spinners + Loading Overlays
   ========================================================= */
.modal-spinner,
.table-spinner,
.tab-spinner {
	border: 4px solid #f3f3f3;
	border-top: 4px solid var(--bs-secondary);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	animation: spin 1s linear infinite;
	margin: auto;
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 10;
}

.modal-spinner { top: 42%; left: 50%; }

.tab-loading-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.12);
	z-index: 20;
	display: none;
	pointer-events: all;
	cursor: progress;
}

.tab-loading-overlay .tab-spinner { top: 42%; left: 50%; }

@keyframes spin {
	0%   { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Card loading state */
#empCard.is-loading .card-header,
#empCard.is-loading .card-body {
	filter: brightness(0.92);
}

/* =========================================================
   Tables (Bootstrap 5)
   ========================================================= */
.table thead th {
	position: sticky;
	top: 0;
	margin: 0;
	padding: .75em;
	text-align: center;
	background-color: var(--bs-light) !important;
	z-index: 10;
}

.table.table-sm,
.table.table-sm :is(input.form-control, select.form-select) {
	font-size: 0.875rem;
}

.table tbody td {
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

/* Inputs inside tables (keep them flat / cell-like) */
.table tbody td :is(input.form-control, select.form-select) {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

#tblPendingOt tbody tr td,
#tblPp tbody tr td,
#tblTs tbody tr td:not(:has(.btn-group button)),
#tblTsv tbody tr td:not(:has(input:not([type="radio"]):not([type="checkbox"]))),
#tblTm tbody tr td,
#tblSs tbody tr td:not(:has(select)) {
	padding: 0 .25em;
}

#tblDtr thead th:first-child,
#tblBiometrics thead th:first-child {
	width: 150px;
	min-width: 150px;
}

#tblSs thead th {
	width: 75px;
	min-width: 75px;
}

/* Optional: keep focus from re-introducing shadows in some themes */
/* Tighter rows for Employee table */
#tblEmp :is(thead th) { padding: 0.5em 0.75em; }
#tblEmp tbody td { padding: 0 .5em; line-height: 1.2; }
#tblEmp tbody td { vertical-align: middle; }

/* =========================================================
   Payroll Page (pp) specifics
   ========================================================= */
/* Add a little breathing room left/right for the Payroll table */
.pp input:not([type="checkbox"]) { width: 90px; }

.pp .input-group-text {
	min-width: 130px;
	max-width: 130px;
	text-transform: uppercase;
}
.pp .card-summary .input-group-text {
	min-width: 150px;
	max-width: 150px;
}
.pp .card-summary input:not([type="checkbox"]) { width: 120px; }

input[name="pp_oe1_label"],
input[name="pp_oe2_label"],
input[name="pp_oe3_label"] {
	min-width: 130px !important;
	max-width: 130px !important;
}

input[name="pp_ded3_label"],
input[name="pp_ded4_label"],
input[name="pp_ded5_label"] {
	min-width: 130px !important;
	max-width: 130px !important;
}

/* =========================================================
   Card sizing / height matching (home page)
   ========================================================= */
#empCard {
	border-radius: 0;
	height: auto;
}
.card .nav-tabs .nav-link.active { font-weight: 600; } /* active card tab */
/* If a card itself is marked active by JS, bold its header text */
.card#empCard.active .card-header,
.card#empCard.is-active .card-header { font-weight: 600; }


/* =========================================================
   LOA balance cards
   ========================================================= */
.card-loa { width: 230px; }

input[name="pay_rate"] { 
	min-width: 122.5px !important; 
	max-width: 122.5px !important; 
}

/* =========================================================
   Employee page: external DataTables controls (Search + Pagination)
   ========================================================= */
#tblEmp_wrapper .dt-layout-table { margin-top: 0 !important; }

.dt-host-hidden { display: none !important; }

#empSearchRow,
#empPagingRow,
.emp-list-col {
	width: min(100%, var(--emp-list-width)) !important;
	max-width: min(100%, var(--emp-list-width)) !important;
}

#tblEmp_wrapper,
#tblEmp {
	width: 100% !important;
	max-width: 100% !important;
}

#empSearchRow,
#empPagingRow {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

#empSearchRow .dt-search,
#empSearchRow .dataTables_filter,
#empSearchRow .dt-search-with-icon,
#empSearchRow .dt-search label,
#empSearchRow .dataTables_filter label {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
}

#empSearchRow input[type="search"],
#empSearchRow input[type="text"] {
	width: 100%;
	max-width: 100%;
	margin-left: 0 !important;
	box-sizing: border-box;
	padding-right: 2rem;
}

#empPagingRow .dt-paging,
#empPagingRow .dataTables_paginate {
	margin: 0;
}

#empPagingRow .pagination { margin-bottom: 0; }

/* =========================================================
   Employee toolbar + split layout
   ========================================================= */
.emp-toolbar-row,
.emp-table-card-row {
	align-items: stretch;
}

.emp-toolbar-row > [class*="col-"],
.emp-table-card-row > [class*="col-"] {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.emp-list-col {
	flex: 0 0 auto;
}

.emp-toolbar-actions,
.emp-card-col {
	flex: 1 1 auto;
	min-width: 0;
}

.emp-toolbar-row {
	align-items: center;
}

.emp-toolbar-actions {
	display: flex;
	align-items: center;
	min-width: 0;
}

.emp-toolbar-group {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}

@media (min-width: 992px) {
	.emp-toolbar-group {
		margin-left: auto;
	}
}

@media (max-width: 991.98px) {
	.emp-toolbar-actions,
	.emp-toolbar-group {
		justify-content: flex-start;
	}

	.emp-toolbar-group {
		margin-left: 0;
	}
}

.emp-table-card-row > .emp-list-col > .table-container,
.emp-table-card-row .table-container > div[id$="_wrapper"],
.emp-table-card-row > .emp-card-col > #empCard {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.emp-table-card-row > .emp-card-col > #empCard .card-body {
	flex: 1 1 auto;
	overflow: visible;
}

@media (min-width: 992px) {
	.emp-toolbar-row,
	.emp-table-card-row {
		flex-wrap: nowrap;
	}
}

@media (max-width: 991.98px) {
	.emp-toolbar-actions,
	.emp-toolbar-group {
		justify-content: flex-start;
	}
}

.dt-search-with-icon {
	position: relative;
	display: inline-block;
}

.dt-search-with-icon input[type="search"] {
	padding-right: 1.75rem;
}

.dt-search-with-icon .dt-search-icon {
	position: absolute;
	right: .5rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	line-height: 1;
}

/* #tblEmp-specific override so the icon stays inside the full-width input */
#empSearchRow .dt-search-with-icon {
	display: block;
	width: 100%;
}

#empSearchRow .dt-search-with-icon input[type="search"] {
	width: 100%;
	padding-right: 2rem;
	box-sizing: border-box;
}

#empSearchRow .dt-search-with-icon .dt-search-icon { right: .75rem; }

/* =========================================================
   Shift & Schedule
   ========================================================= */
.ss-board-card .ss-grid-toolbar { 
	display: flex;
	gap: .75rem;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap; 
}

.ss-board-card .ss-grid-feedback:empty { display: none; }
.ss-board-card .ss-grid-responsive { overflow-x: auto; }
.ss-board-card .ss-grid-table { 
	width: 100%; 
	min-width: 1160px; 
	margin-bottom: 0; 
}
.ss-board-card .ss-grid-table th,.ss-board-card .ss-grid-table td {
	vertical-align: middle;
	white-space: nowrap;
}
.ss-board-card .ss-col-meta { min-width: 140px; }
.ss-board-card .ss-col-name { min-width: 220px; }
.ss-board-card .ss-col-dept { min-width: 170px; }
.ss-board-card .ss-day-head { min-width: 120px; text-align: center; }
.ss-board-card .ss-day-select { 
	min-width: 94px;
	font-weight: 700;
	border-radius: .375rem;
	border-width: 1px;
	background-image: none;
	padding-right: .75rem;
	text-align: center;
	text-align-last: center;
}
.ss-board-card .ss-day-select.ss-empty { 
	color: #6c757d;
	font-weight: 400;
	background-color: #fff;
}
.ss-board-card .ss-day-cell.has-value { background: transparent; }
.ss-board-card .ss-legend { 
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
}
.ss-board-card .ss-legend-item {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .875rem;
	line-height: 1.2;
}
.ss-board-card .ss-legend-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.1rem;
	padding: .18rem .5rem;
	border: 1px solid rgba(0,0,0,.16);
	border-radius: .375rem;
	font-weight: 700;
}
.ss-board-card .ss-legend-swatch { 
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.18);
	flex: 0 0 10px;
}
.ss-board-card .ss-headcount-cell {
	text-align: center;
	font-weight: 700;
}
.ss-board-card .ss-toolbar-actions {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* =========================================================
   TimeCard Manager
   ========================================================= */
.tm-timesheet-cell { 
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0; 
}
.tm-timesheet-swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.18);
	flex: 0 0 10px;
}
.tm-timesheet-label {
	display: inline-block;
	min-width: 0;
}