:root {
	/* Color palette - Light theme */
	--clr-white-a0: #fff;
	--clr-gray-a10: #f6f7f8;
	--clr-gray-a20: #e3e5e8;
	--clr-gray-a30: #cfd2d6;
	--clr-gray-a40: #898a8a;
	--clr-gray-a50: #626363;
	--clr-gray-a60: #373a3a;
	--clr-gray-a70: #303333;
	--clr-gray-a80: #191b1b;
	--clr-black-a0: #0d0f0f;

	--clr-blue-a0: #2563eb;
	--clr-blue-a10: #3b82f6;
	--clr-blue-a20: #60a5fa;

	--clr-red-a0: #7f1d1d;
	--clr-red-a10: #dc2626;
	--clr-red-a20: #f5385a;
	--clr-red-a30: #f87171;
	--clr-red-a40: #fecaca;
	--clr-red-a50: #fef2f2;

	--clr-orange-a0: #78350f;
	--clr-orange-a10: #f59e0b;
	--clr-orange-a20: #fde68a;
	--clr-orange-a30: #fef3c7;
	--clr-orange-a40: #fffbeb;

	--clr-green-a0: #065f46;
	--clr-green-a10: #1d8b70;
	--clr-green-a20: #1da583;
	--clr-green-a30: #34d399;
	--clr-green-a40: #bbf7d0;

	--clr-overlay-light: rgba(6, 8, 12, 0.45);
	--clr-overlay-dark: rgba(0, 0, 0, 0.7);
	--clr-hover-light: rgba(0, 0, 0, 0.05);
	--clr-hover-dark: rgba(255, 255, 255, 0.1);
	--clr-shadow-light: rgba(7, 10, 17, 0.06);
	--clr-shadow-dark: rgba(0, 0, 0, 0.3);

	/* Color palette - Dark theme */
	--clr-dark-a0: var(--clr-black-a0);
	--clr-dark-a10: var(--clr-gray-a80);
	--clr-dark-a20: var(--clr-gray-a60);
	--clr-dark-a30: var(--clr-gray-a50);
	--clr-dark-a40: var(--clr-gray-a40);
	--clr-dark-a50: var(--clr-gray-a30);
	--clr-dark-a60: var(--clr-gray-a20);
	--clr-dark-a70: var(--clr-gray-a10);

	--clr-dark-border: #374151;

	/* Semantic colors - Dark theme */
	--bg: var(--clr-dark-a0);
	--card: var(--clr-dark-a10);
	--text: var(--clr-dark-a70);
	--muted: var(--clr-dark-a50);
	--muted-light: var(--clr-dark-a60);
	--accent: var(--clr-blue-a20);
	--accent-2: var(--clr-blue-a10);

	--border: var(--clr-dark-border);
	--button-bg: var(--clr-dark-a30);
	--button-hover: var(--clr-dark-a40);

	--danger: var(--clr-red-a20);
	--danger-border: var(--clr-red-a10);

	--holiday-bg: var(--clr-red-a0);
	--holiday-border: var(--clr-red-a10);
	--personal-bg: var(--clr-orange-a0);
	--personal-border: var(--clr-orange-a10);
	--sick-bg: var(--clr-orange-a0);
	--deficit-bg: var(--clr-red-a0);
	--deficit-border: var(--clr-red-a10);
	--overtime-bg: var(--clr-green-a10);
	--overtime-border: var(--clr-green-a0);

	--overlay: var(--clr-overlay-dark);
	--hover-overlay: var(--clr-hover-dark);
	--shadow: var(--clr-shadow-dark);

	--input-bg: var(--clr-dark-a20);
	--input-border: var(--clr-dark-a30);

	--gap: 0.5em;
}

* {
	box-sizing: border-box;
}

*:not(html) {
	scrollbar-width: thin;
}

body {
	font-family: "Roboto", system-ui, Segoe UI, Roboto, Arial, sans-serif;
	background: var(--bg);
	color: var(--text);
	margin: 0;
	padding: 0;
	line-height: 1.5;
	font-size: 14px;
	gap: var(--gap);
	overflow-x: hidden;
	overflow-y: hidden;
}

.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	gap: 0;
	/* padding: 30px; */
}

.content {
	display: flex;
	flex-direction: row;
	gap: 0.5em;
	flex: 1 1 auto;
	min-height: 0;
}

a {
	color: var(--muted);
	text-decoration: underline dotted;
	transition: filter 0.2s;
}

a:hover {
	filter: brightness(120%);
}

h1 {
	font-size: 1.5em;
	margin: 0;
	font-weight: 600;
}

label {
	font-size: 1em;
	color: var(--muted);
	font-weight: 500;
	cursor: pointer;
}

.small {
	font-size: 0.9em;
	color: var(--muted);
	line-height: 1.4;
}

#calendar-small {
	border: 1px solid var(--border);
	padding: 0.2em 1em;
	border-radius: 50px;
}

.card {
	min-height: 60px;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap: var(--gap);
	background: transparent;
	/* border: 1px solid var(--card); */
	border-radius: 10px;
	padding: 0.75em 1em;
}

button {
	min-height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	background: var(--button-bg);
	border: none;
	padding: 8px 10px;
	border-radius: 8px;
	cursor: pointer;
	font-size: inherit;
	color: var(--text);
	transition: background 0.2s, color 0.2s;
}

button:hover {
	filter: brightness(110%);
}

button.primary {
	background: var(--accent-2);
	color: white;
	border: none;
}

button.ghost {
	background: transparent;
	border: 1px solid var(--border);
}

input,
select,
textarea {
	font-size: inherit;
	font-family: inherit;
}

input[type="time"],
input[type="number"],
select,
input[type="text"],
textarea {
	padding: 0.9em;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--card);
	color: var(--text);
}

input[type="number"] {
	width: 100%;
	padding-right: 0.3em;
}

textarea {
	height: 56px;
	resize: none;
	font-family: inherit;
}

input[type="checkbox"],
input[type="radio"],
select {
	cursor: pointer;
}

input[type="time"] {
	cursor: text;
}

/* Checkbox styles */
input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.3em;
	height: 1.3em;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: transparent;
	position: relative;
	transition: all 0.2s;
}

input[type="checkbox"]:checked {
	background: var(--accent);
	border-color: var(--accent);
}

input[type="checkbox"]:checked::after {
	content: "✓";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 1em;
	font-weight: bold;
}

header {
	width: 320px;
	flex: 1 0 1;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	overflow-y: auto;
	max-height: 100vh;
	gap: var(--gap);
	padding-right: 1em;
	margin-right: var(--gap);
	/* border-right: 1px solid var(--border); */
	background-color: var(--clr-dark-a10);
}

header,
.sidebar {
	padding: 28px 24px;
}

.header-top {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-bottom: 8px;
}

header h1:first-of-type {
	font-size: 1.24em;
	font-weight: 800;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border);
	width: 100%;
}

#toggleSidebar {
	display: none;
	background: transparent;
	color: inherit;
	padding: 8px 12px;
	min-height: 36px;
	font-size: 1.2em;
	border-radius: 6px;
}

#toggleSidebar svg {
	width: 1.5em;
	height: 1.5em;
	min-width: 20px;
	min-height: 20px;
	fill: currentColor;
}

.sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--overlay);
	z-index: 799;
}

.sidebar-overlay.show {
	display: block;
}

.controls {
	display: flex;
	gap: var(--gap);
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	width: 100%;
}

.controls-dois {
	display: flex;
	gap: var(--gap);
	flex-direction: inherit;
	flex-wrap: nowrap;
	width: 100%;
	justify-content: space-between;
}

.controls .card {
	align-items: center;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
}

.controls label {
	margin: 0;
}

.standard-hours-wrapper {
	display: flex;
	flex-direction: column;
	gap: 1em;
	width: 100%;
	flex-wrap: nowrap;
}

.time-inputs-row {
	display: flex;
	gap: 6px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.time-inputs-row input[type="time"] {
	width: 100%;
}

.time-inputs-row .arrow {
	font-size: 0.75em;
	color: var(--muted-light);
}

.time-inputs-row label {
	font-size: 0.85em;
	color: var(--muted-light);
	font-weight: 500;
	margin-top: 4px;
}

.hours-summary {
	font-size: 0.9em;
	color: var(--muted-light);
	text-align: center;
}

.hours-summary span {
	font-weight: normal;
}

.standard-hours-wrapper > label,
.card label[for="workSchedule"],
.card label[for="cycleStartDay"],
.card label[for="rounding"] {
	font-size: 1em;
	font-weight: 600;
	width: 100%;
}

#workSchedule,
#cycleStartDay {
	width: fit-content;
	max-width: 5.7em;
	margin-top: 4px;
}

#rounding {
	margin-top: 4px;
	min-width: 10em;
	max-width: 17em;
	width: fit-content;
}

#fileInput {
	display: none;
}

#dadosBotoes #exportBtns {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	margin-bottom: 6px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

#dadosBotoes button#clearData {
	background: var(--bg);
	color: var(--text);
}
#dadosBotoes button#clearData:hover {
	background: var(--danger);
	/* border: 1px solid var(--danger-border); */
}

/* calendar */
main.calendar {
	flex: 1;
	overflow-y: hidden;
	flex-direction: row;
	justify-content: flex-start;
	display: flex;
	gap: var(--gap);
	align-items: stretch;
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: 24px 14px;
}

.card.month {
	padding: 0 16px 0 0;
	height: 100%;
	width: 100%;
	flex: 3 1 0;
	justify-content: flex-start;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: scroll;
	user-select: none;
}

.month-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	width: 100%;
}

.month-header-nav {
	display: flex;
	gap: var(--gap);
	align-items: center;
}

#monthLabel {
	font-weight: 600;
	font-size: inherit;
	width: 200px;
	text-align: center;
}

.nav-btn {
	background: transparent;
	border: none;
	padding: 10px;
	border-radius: 8px;
	cursor: pointer;
}
.nav-btn svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	font-size: inherit;
	color: var(--muted);
	margin-bottom: 6px;
	font-weight: 500;
	width: 100%;
}

.weekdays > div {
	text-align: center;
	text-transform: uppercase;
}

.days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.32em;
}

.day {
	min-height: auto;
	background: transparent;
	color: var(--text);
	border-radius: 12px;
	padding: 12px;
	border: 1px solid var(--border);
	position: relative;
	cursor: pointer;
	aspect-ratio: 1/1;
	display: flex;
	flex-direction: column;
	text-align: left;
	gap: 3px;
	overflow: hidden;
	transition: filter 0.2s, background-color 0.2s, border-color 0.2s;
}

.day:hover {
	filter: brightness(120%);
}

.day.inactive {
	opacity: 0.35;
}

.day.selected {
	outline: 1px solid var(--accent-2);
}

.day.holiday {
	background: var(--holiday-bg);
	border-color: var(--holiday-border);
}

.day.personal-day-off {
	background: var(--personal-bg);
	border-color: var(--personal-border);
}

.day.sick-leave {
	background: var(--sick-bg);
	border-color: var(--personal-border);
}

.day.deficit {
	background: var(--deficit-bg);
	border-color: var(--deficit-border);
	border-width: 1px;
}

.day.overtime {
	background: var(--overtime-bg);
	border-color: var(--overtime-border);
	border-width: 1px;
}

.day .date-num {
	font-size: inherit;
	color: var(--muted);
	font-weight: 500;
}

.day .summary {
	font-size: inherit;
}

.day.out-of-cycle {
	opacity: 0.1;
	border: 1px dashed var(--border);
}

.day .summary.folga-text {
	color: var(--clr-orange-a10);
	font-weight: 500;
}

.day .summary.feriado-text {
	color: var(--clr-red-a20);
	font-weight: 500;
}

.day .summary.atestado-text {
	color: var(--clr-orange-a20);
	font-weight: 500;
}

.day .info-horario-atestado {
	font-size: 11px;
	color: var(--clr-orange-a20);
	margin-top: 2px;
}

.day .info-atestado-extra {
	font-size: 10px;
	color: var(--clr-orange-a10);
	margin-top: 2px;
}

.day .indicador-extra {
	font-size: 10px;
	color: var(--clr-green-a30);
	margin-top: 2px;
	font-weight: 500;
}

.day .indicador-deficit {
	font-size: 10px;
	color: var(--clr-red-a20);
	margin-top: 2px;
	font-weight: 500;
}

.day .indicador-tolerancia {
	font-size: 10px;
	color: var(--clr-green-a0);
	margin-top: 2px;
}

/* sidebar */
.sidebar {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex: 1 0 0;
	height: 100%;
	min-height: 0;
	max-height: 100%;

	gap: var(--gap);
	border-left: 1px solid var(--border);
	padding-left: 1em;
	margin-left: var(--gap);

	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 1em;
}

.sidebar > .card {
	flex: 0 0 fit-content;
	min-height: 0;
}

.sidebar h3 {
	margin: 0;
	font-size: 1em;
	font-weight: 500;
}

.row {
	display: flex;
	gap: var(--gap);
	align-items: center;
}

.totals {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.totals .line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}

.totals .line span {
	font-size: inherit;
	color: var(--muted);
	text-overflow: ellipsis;
	overflow: hidden;
}

.totals .line strong {
	font-size: inherit;
	font-weight: 600;
}

/* modal */
#modal {
	display: none;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
	position: fixed;
	inset: 0;
	align-items: center;
}

#modal.show {
	display: flex;
}

.hidden {
	display: none !important;
}

.modal-backdrop {
	position: fixed;
	inset: 0;
	background: var(--overlay);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 20px;
}

.modal {
	background: var(--card);
	padding: 18px;
	border-radius: 10px;
	width: 30em;
	max-height: 100%;
	max-width: 100%;
	align-items: stretch;
	overflow-x: hidden;
	overflow-y: scroll;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin-bottom: 10px;
}

.modal h2 {
	margin: 0;
	font-size: 1.25em;
}

button.close-btn {
	background: transparent !important;
	border: none;
	font-size: inherit;
	line-height: 1;
	color: var(--muted);
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background 0.2s, color 0.2s;
	flex-shrink: 0;
	min-height: unset;
}

.close-btn:hover {
	background: var(--hover-overlay);
	color: var(--text);
}

.form-grid {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: var(--gap);
}

.form-grid label.checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
}

.form-grid svg {
	width: 1em;
	height: 1em;
	min-width: 20px;
	min-height: 20px;
	fill: currentColor;
	flex-shrink: 0;
}

.form-grid label svg {
	align-self: flex-start;
	margin-top: 2px;
}

.form-grid label {
	display: inline-flex;
}

#modal input[type="time"] {
	width: 100%;
	text-align: center;
}

textarea#note {
	width: 100%;
}

.fields-wrapper {
	display: flex;
	flex-direction: row;
	gap: var(--gap);
	width: 100%;
	justify-content: space-between;
}

.fields-container {
	display: flex !important;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var(--gap);
	width: 100%;
	justify-content: space-between;
}

.fields-container input[type="time"] {
	flex: 1;
}

.time-fields-container {
	display: flex !important;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var(--gap);
	width: 100%;
	justify-content: space-between;
}

div#modal div.modal.card svg {
	width: 2em;
	height: 2em;
	fill: currentColor;
}

div#modal div.modal.card div.fields-container div {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 1em;
	width: 100%;
}
div#modal div.modal.card div.time-fields-container div {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 1em;
	width: 100%;
}
div#modal div.modal.card div.time-fields-container div label:first-child {
	width: 2em;
	overflow: hidden;
}

.actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--gap);
	margin-top: 1.3em;
}

.actions-right {
	margin-left: auto;
	display: flex;
	gap: 8px;
}

/* Footer styles */
footer {
	margin: 0 0 0 0;
	padding: 16px 24px 16px 24px;
	border-top: 1px solid var(--border);
	font-size: 1em;
	color: var(--muted);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: var(--gap);
}

.footer-top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	gap: 2em;
}

.footer-bottom {
	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: center;
	width: 100%;
}

footer svg {
	width: 1.75em;
	height: 1.75em;
	min-width: 20px;
	min-height: 20px;
	fill: currentColor;
	align-self: center;
}

/* Theme selector */
.theme-selector {
	display: inline-flex;
	align-items: center;
	gap: var(--gap);
}

.theme-selector a {
	display: inline-flex;
}

.theme-selector a svg {
	align-self: center;
}

button:hover,
.nav-btn:hover {
	background: var(--button-hover);
}

@media (max-width: 1024px) {
	.container,
	.content {
		flex-direction: column;
	}

	header {
		width: 100%;
		max-height: none;
		overflow-y: visible;
		border: 0;
		padding: 12px 24px;
		margin: 0;
	}

	header h1:first-of-type {
		padding-bottom: 0;
		border: 0;
		font-size: 1.2em;
	}

	.header-top {
		padding-bottom: 10px;
		border-bottom: 1px solid var(--border);
	}

	main.calendar {
		max-height: none;
	}

	.calendar {
		flex-direction: column;
	}

	.controls {
		overflow-x: auto;
		overflow-y: hidden;
		flex-direction: row;
		align-items: stretch;
	}

	.time-inputs-row input[type="time"] {
		width: fit-content;
	}

	.controls .card {
		flex: 0 1;
		min-width: max-content;
	}

	.controls-dois {
		flex-direction: row;
		flex-wrap: nowrap;
		flex-shrink: 0;
		overflow-x: auto;
		overflow-y: hidden;
		justify-content: flex-start;
		width: unset;
	}

	.controls-dois .card {
		flex-shrink: 0;
		min-width: max-content;
	}

	.calendar .month .month-header-nav {
		white-space: nowrap;
	}

	.sidebar {
		border: 0;
		margin: 0;
	}

	.sidebar .totals .line {
		flex-direction: column;
		align-items: flex-start;
	}

	.sidebar .totals .line > span {
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.hours-summary {
		display: none;
	}

	.standard-hours-wrapper {
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.time-inputs-row {
		flex-wrap: nowrap;
	}

	.day {
		aspect-ratio: 5/4;
	}
}

@media (max-width: 770px) {
	.calendar .card.month .month-header div#calendar-small {
		display: none;
	}

	.days {
		gap: 0.2em;
	}

	.day {
		overflow: hidden;
		justify-content: center;
		text-align: center;
	}

	.day .summary,
	.day .indicador-extra {
		display: none;
	}

	.calendar .month .month-header {
		flex-direction: column;
		margin-bottom: 0;
	}

	.calendar .month .month-header div.small {
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 0.84em;
	}

	.time-fields-container {
		flex-direction: column;
	}

	#toggleSidebar {
		display: flex;
		flex: 0;
	}

	.sidebar {
		position: fixed;
		top: 0;
		right: 0;
		height: 100vh;
		transform: translateX(100%);

		z-index: 800;
		max-inline-size: 17rem;
		max-block-size: none;
		transform-origin: 0 50%;
		transition: 0s visibility ease, 0.25s transform ease, inline-size 0s ease,
			opacity 1s ease;
		transition-delay: 0s, 0s, 0s, 0s;
		transition-delay: 0s;
		background-color: var(--card);
		padding: 1em;
		overflow-y: scroll;
		overflow-x: hidden;

		display: initial;
	}

	.sidebar.show {
		transform: translateX(0);
	}

	.sidebar .card {
		background-color: transparent;
		border-radius: 10px;
		padding: 0.75em 1em;
		flex: 1;
	}

	.sidebar .card:not(:last-of-type) {
		border-bottom: 1px solid var(--border);
		border-radius: 0;
		padding-bottom: 1em;
	}

	footer {
		margin-top: 1em;
		font-size: 0.9em;
	}

	.footer-top {
		flex-direction: row;
		align-items: flex-start;
		gap: inherit;
	}

	.footer-bottom {
		justify-content: center;
	}

	.standard-hours-wrapper {
		gap: 0.5em;
	}

	button.close-btn {
		width: 1.5em;
		height: 1.5em;
	}

	.weekdays > div {
		font-size: 0.9em;
	}
}