@charset "utf-8";
/* CSS Document */
html {
  scroll-padding-top: 200px;
}

.btn {
	white-space: nowrap !important;
}

a {
	text-decoration: none;
}
a:not(.btn):hover {
	text-decoration: underline;
}

textarea {
	field-sizing: content;
	resize: none;
}

.container {
	max-width: 1200px;
}

.table th {
	cursor: pointer;
}

.summary-card {
	margin-bottom: 20px;
}
.required label:after {
	content: " *";
	color: red;
}
.sort-icon {
	margin-left: 5px;
}
th.unsorted {
	text-decoration: none;
	font-weight: normal;
	color: #007bff;
}
th.sorted {
	text-decoration: underline overline;
	font-weight: bold;
	color: #007bff;
}
th.sorted > i {
	font-size: x-large;
}
th.btn-col {
	width: 100px;
}
td[expense-name] {
	font-weight: bold;
}
td[action-btn] {
	padding-right: 5px !important;
	padding-left: 5px !important;
}
td[tags] {
	font-size: .8em;
	font-style: italic;
	padding-top: 0 !important;
}
td[receipts] {
	padding-top: 0 !important;
	padding-right: 0 !important;
}
td[notes] {
	color: #ffc107;
	padding-top: 0 !important;
	padding-right: 0 !important;
	padding-left: 11px !important;
}

td[notes-recurring] {
	padding-top: 0 !important;
	padding-right: 0 !important;
	padding-left: 6px !important;
	color: #ffc107;
}

.btn-notes {
	color: #FFC107;
}
.btn-notes:hover {
	color: #F88300;
}
td[month-buttons] {
	padding-top: 0 !important;
}
.month-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
}
.day_of_record {
	font-style: italic;
	padding-left: 10px;
}
.day_of_record-day {
	font-weight: bold;
}
td.no-border {
	border-style: none;
}

.popover {
  max-width: none !important;
}

/* ---------------------------------------------------
   PARENT / CHILD ROW HIGHLIGHTING LOGIC
--------------------------------------------------- */

.expense-row,
.receipt-row {
	border-top-width: 1px;
	border-style: dashed;
}

.child-row {
	margin-bottom: 2px;
}

/* 1. Remove the border between ANY parent row and its child-row */
.table tr:has(+ tr.child-row) > td {
    border-bottom-width: 0 !important;
}

/* 2. Highlight BOTH rows if either the parent OR the child is hovered */
.table-hover > tbody > tr:has(+ tr.child-row):hover > td,              /* Parent hovered -> highlights parent */
.table-hover > tbody > tr:has(+ tr.child-row):hover + tr.child-row > td, /* Parent hovered -> highlights child */
.table-hover > tbody > tr.child-row:hover > td,                          /* Child hovered -> highlights child */
.table-hover > tbody > tr:has(+ tr.child-row:hover) > td {               /* Child hovered -> highlights parent */
    box-shadow: inset 0 0 0 9999px var(--bs-table-hover-bg) !important;
    color: var(--bs-table-hover-color) !important;
}

/* 3. Prevent note icons from turning dark when either row triggers a highlight */
.table-hover > tbody > tr.child-row:hover > td[notes],
.table-hover > tbody > tr.child-row:hover > td[notes-recurring],
.table-hover > tbody > tr:has(+ tr.child-row):hover + tr.child-row > td[notes],
.table-hover > tbody > tr:has(+ tr.child-row):hover + tr.child-row > td[notes-recurring] {
    color: #ffc107 !important; 
}

header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
header h2 {
	padding: 20px;
}

.header-title {
	color: white;
	font-size: 32px;
}

.right-btn {
	margin-left: auto;
}
.btn-hide {
	width: 80px;
}
.btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
}
.btn-info:hover {
    background-color: #138496;
    border-color: #138496;
    color: #fff;
}
.btn-info.disabled,
.btn-info:disabled {
	color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.show-password-button {
	cursor: pointer;
	padding: 5px;
	border: none;
	background-color: #f8f9fa;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	margin-left: 5px;
	font-style: italic;
}
.show-password-button:hover {
	background-color: #e2e6ea;
}
.tags {
	font-size: 1em;
	font-weight: bold;
	font-style: normal;
}
.all-tags {
	font-size: 1.5em;
	font-weight: bold;
	font-style: italic;
}
.active-tag {
	font-weight: bold;
}
.tag {
	display: inline-block;
	background-color: #e0e0e0;
	padding: 2px 5px;
	margin: 2px;
	border-radius: 3px;
	font-weight: normal;
}
.tag .remove-tag {
	margin-left: 5px;
	cursor: pointer;
	font-weight: bold;
}

.filter-select {
	margin-bottom: 12px;
	font-weight: bold;
}
input[type="checkbox"] {
	display: block;
	width: 30px;
	height: 30px;
	margin-left: 12px;
}
.deactivated {
    font-style: italic;
    color: red;
}
legend {
	font-size: 1rem;
}
#encryption_checkbox,
#encryption_password {
	display: none;
}
.receipt-btn {
	width: 50px;
	margin-right: 8px;
}
.receipt-btn-sm {
	width: 32px;
}
.receipt-file,
col[receipt-file] {
	min-width: 500px;
	max-width: 700px;
}
col[receipt-size],
col[receipt-date] {
	min-width: 100px;
	max-width: 100px;
}
.receipt-expense,
col[receipt-encrypt],
col[receipt-expense] {
	min-width: 50px;
	max-width: 50px;
}
th.lock,
th.icon {
	text-align: center;
}
td.receipt-actions {
	padding: 0 10px 4px 10px;
}
td.receipt-encrypt {
	padding: 10px 0 0 0;
	text-align: center;
}
.receipts {
	padding: 20px;
	margin-bottom: 20px;
}
.receipts-input {
	display: none;
}
.receipt {
	background-color: mistyrose;
}
.receipt-encrypted {
	background-color: mintcream;
}
.drop-zone {
	border: 2px dashed #ccc;
	border-radius: 8px;
	text-align: center;
	transition: all 0.3s ease;
	padding: 20px;
	background: #fafafa;
}
.drop-zone.drag-over {
	border-color: #007bff;
	background: #e3f2fd;
	transform: scale(1.02);
}
.drop-zone-content {
	/* Remove pointer-events: none so button can be clicked */
}
.upload-icon {
	font-size: 32px;
	color: #007bff;
}
.drop-zone p {
	margin: 0 0 15px 0;
	color: #666;
}
#fileList {
	margin-top: 15px;
}
.file-item {
	background: #f8f9fa;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	animation: slideIn 0.3s ease;
}
@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.file-info {
	display: flex;
	align-items: center;
	gap: 12px;
}
.file-icon {
	width: 32px;
	height: 32px;
	background: #007bff;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 14px;
}
.file-details h5 {
	margin: 0 0 4px 0;
	color: #333;
	font-size: 14px;
	font-weight: 500;
}
.file-details p {
	margin: 0;
	color: #666;
	font-size: 12px;
}
.remove-btn {
	background: #dc3545;
	color: white;
	border: none;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.remove-btn:hover {
	background: #c82333;
}
#uploadProgress {
	margin-top: 15px;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 4px;
}
#progressBar {
	width: 100%;
	height: 20px;
	margin-bottom: 10px;
}
#progressStatus {
	font-weight: 600;
	color: #007bff;
}

input.warning, select.warning {
	border-color: #ffc107;
	border-width: 2px;
}
.warning-message {
	color: #856404;
	background-color: #fff3cd;
	border: 1px solid #ffc107;
	padding: 10px;
	border-radius: 4px;
	font-size: 14px;
	margin: -10px 0 10px 0;
	display: none;
}
.warning-message.show {
	display: block;
}
.warning-message::before {
	content: "⚠️ ";
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px; 
}
.input-note {
	font-size: 0.85em;
	color: #666;
	margin-top: 5px;
}

#suggestedFilenameGroup {
	margin-top: 10px;
	font-style: italic;
}
#suggestedFilename {
	font-weight: bold;
	cursor: pointer;
}

@media screen and (max-width: 768px) {
	.receipt-file,
	col[receipt-file] {
		min-width: 200px;
		max-width: 200px;
	}
	.receipt-file,
	.receipt-size,
	.receipt-date,
	.receipt-encrypt, 
	.receipt-expense {
		font-size: smaller;
	}
	col[receipt-size],
	col[receipt-date] {
		min-width: 50px;
		max-width: 50px;
	}
	.receipt-expense,
	col[receipt-encrypt],
	col[receipt-expense] {
		min-width: 25px;
		max-width: 25px;
	}
}