@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;
}

/* =========================================================
   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 {
	border-radius: 0;
	margin-bottom: 0;
}

.table thead th {
	margin: 0;
	padding: .75em;
	text-align: center;
}

.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, select) {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* 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; }

.table tbody td :is(input.form-control, select.form-select, select):focus {
	box-shadow: none;
}

/* Sticky headers for key tables (works when parent scrolls) */
#tblShift thead th,
#tblDtr thead th,
#tblLoa thead th,
#tblDed thead th,
#tblBiometrics thead th,
#tblHoliday thead th,
#tblPendingOt thead th,
#tblPp thead th,
#tblTm thead th {
	position: sticky;
	top: 0;
	z-index: 10;
}

/* =========================================================
   Payroll Page (pp) specifics
   ========================================================= */
/* Add a little breathing room left/right for the Payroll table */
#tblPp tbody tr td { padding: 0 .25em; }

.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;
}

/* =========================================================
   Table column widths (page-specific)
   ========================================================= */
#tblBiometrics tbody tr td:first-child { 
	min-width: 160px; 
	max-width: 160px; 
}

/* Tight button columns for Holiday table (first/last cells) */
#tblHoliday tbody tr td:first-child,
#tblHoliday tbody tr td:last-child {
	padding: 0;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}

#tblHoliday tbody tr td:first-child :is(button, .btn, a.btn),
#tblHoliday tbody tr td:last-child :is(button, .btn, a.btn) {
	margin: 0;
}

.holiday-row.row-locked td {
	background-color: #FFF !important;
}

.holiday-row.row-locked .locked-field {
	background-color: #FFF !important;
}

#tblDtr tbody tr td:first-child input { width: 160px; }

#tblLoa tbody tr td:first-child input,
#tblDed tbody tr td:first-child input { width: 160px; }

#tblLoa :is(th:last-child, td:last-child),
#tblDed :is(th:last-child, td:last-child) {
	width: 1%;
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
}

/* If action buttons are wrapped in Bootstrap rows/cols, remove gutters so buttons sit tight */
#tblLoa tbody td:last-child .row,
#tblDed tbody td:last-child .row {
	--bs-gutter-x: 0;
	--bs-gutter-y: 0;
}

#tblLoa tbody td:last-child .btn,
#tblDed tbody td:last-child .btn { margin: 0; }

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

#tblTm thead th { width: 75px; }
#tblTm { font-size: .8em; }
/* =========================================================
   Card sizing / height matching (home page)
   ========================================================= */
#empCard {
	width: 900px;
	max-width: 900px;
	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; }


/* Make the table area and the right-side card match heights */
.row.row-top-margin-2.g-2 { align-items: stretch; }

.row.row-top-margin-2.g-2 > .col-auto {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.row.row-top-margin-2.g-2 > .col-auto > .table-container {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.table-container > div[id$="_wrapper"] {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.row.row-top-margin-2.g-2 > .col-auto:nth-child(2) > .row,
.row.row-top-margin-2.g-2 > .col-auto:nth-child(2) > .row > .col-auto {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.row.row-top-margin-2.g-2 > .col-auto:nth-child(2) #empCard {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.row.row-top-margin-2.g-2 > .col-auto:nth-child(2) #empCard .card-body {
	flex: 1 1 auto;
	overflow: visible;
}

/* =========================================================
   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)
   ========================================================= */
:root {
	--emp-list-width: 250px;
}

#tblEmp_wrapper .dt-layout-table {
	margin-top: 0 !important;
}

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

#empSearchRow,
#empPagingRow,
#tblEmp {
	width: min(100%, var(--emp-list-width));
}

#tblEmp_wrapper {
	max-width: min(100%, var(--emp-list-width));
}

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

#empSearchRow { justify-content: flex-start; }
#empPagingRow { 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%;
	box-sizing: border-box;
	padding-right: 2rem;
}

#tblEmp {
	width: 100% !important;
}

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

#empPagingRow .pagination {
	margin-bottom: 0;
}
/* =========================================================
   Employee page: make the table area and the right-side card match heights
   ========================================================= */
.emp-table-card-row { align-items: stretch; }

.emp-table-card-row > .col-auto {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.emp-table-card-row > .col-auto > .table-container {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

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

.emp-table-card-row > .col-auto:nth-child(2) > .row,
.emp-table-card-row > .col-auto:nth-child(2) > .row > .col-auto {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.emp-table-card-row > .col-auto:nth-child(2) #empCard {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

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

.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;
}