/* The app's look: loaded after inventory.css / main.css / app.css and overrides the 2006
   styles (yellow nav, lavender boxes, green/red notes) with a calm wine-and-neutral theme. */

:root {
	--wine: #7b1e34;
	--wine-2: #a3293f;
	--wine-3: #8c2236;
	--tint: #fbeff2;
	--tint-2: #f7e8ec;
	--ink: #2b2629;
	--muted: #7a7275;
	--line: #ebe4e6;
	--line-2: #dccfd3;
	--bg: #f7f4f5;
	--card: #fff;
	--radius: 10px;
	--shadow: 0 1px 3px rgba(60, 10, 25, 0.06), 0 1px 1px rgba(60, 10, 25, 0.03);
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: 13px;
	line-height: 1.45;
	margin: 0;
}
a { color: var(--wine-2); text-decoration: none; }
a:hover { color: var(--wine-3); text-decoration: underline; }
button.link { color: var(--wine-2); }

/* ---- Banner -------------------------------------------------------------------------------- */
.topBanner {
	height: 56px;
	background: linear-gradient(90deg, #6e1a2e 0%, var(--wine) 55%, #8a2440 100%);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.dbImage { margin: 10px 8px 0 14px; height: 36px; width: auto; }
.databaseTitle { line-height: 56px; font-size: 17px; letter-spacing: 0.01em; }
.projectMenu > summary { height: 56px; }
.projectList { top: 52px; }
.headerTools { line-height: 56px; }
.bannerTitle { padding-left: 2px; }

/* ---- Navigation: white tab bar --------------------------------------------------------------- */
.navigation {
	background: #fff;
	height: auto;
	padding: 0 16px;
	margin: 0;
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow);
	position: relative;
	z-index: 1;
}
.navigationTitle { display: none; }
.navigation ul { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; }
.navigation li { display: block; margin: 0; }
.navigation li a {
	display: block;
	padding: 13px 12px 11px;
	color: #5d5458;
	font-size: 13px;
	border-bottom: 2px solid transparent;
	text-decoration: none;
}
.navigation li a:hover { background: none; color: var(--wine); border-bottom-color: var(--line-2); }
.navigation li a.current { color: var(--wine); font-weight: 600; border-bottom-color: var(--wine-2); }

/* ---- Page ---------------------------------------------------------------------------------- */
main.page { display: block; padding: 22px 24px 40px; }
main.page > div[style*="margin: 15px"] { margin: 0 !important; }

.title {
	border: 0;
	padding: 0;
	margin: 0 0 16px;
	font: normal 24px Georgia, "Times New Roman", serif;
	color: #222;
	text-align: left;
}
div[align="center"] > .title { text-align: center; }
.subHeader, .subTitle {
	border-bottom: 1px solid var(--line);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 600;
	padding-bottom: 4px;
}
.welcome { font-size: 15px; padding: 40px 0; color: var(--muted); }
.welcome .projectName { color: var(--wine); }

/* ---- Notes ---------------------------------------------------------------------------------- */
.note, .noteError {
	background: #e9f6ec;
	border: 1px solid #c9e7d1;
	color: #22633a;
	border-radius: 8px;
	padding: 8px 12px;
	margin: 0 0 14px;
	line-height: 1.4;
	font-size: 13px;
}
.noteError { background: #fdecef; border-color: #f0c6cf; color: #8c2236; }
.archiveNote {
	margin: 0;
	border-radius: 0;
	border-width: 0 0 1px;
	text-align: center;
	background: #fff8e6;
	border-color: #f1e0b0;
	color: #7a5a10;
	font-size: 12px;
	padding: 6px;
}

/* ---- Tables -------------------------------------------------------------------------------- */
main.page table:not(.people) {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	border-collapse: separate;
	border-spacing: 0;
	box-shadow: var(--shadow);
	overflow: hidden;
}
main.page form table:not(.people), main.page .editBox table:not(.people), main.page table table:not(.people) { border: 0; box-shadow: none; border-radius: 0; background: transparent; overflow: visible; }
td.heading, th.heading {
	background: #faf7f8;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 10px 8px;
	white-space: nowrap;
}
td.heading a { color: var(--muted); }
td.heading a:hover { color: var(--wine); }
main.page table td { padding: 8px; border-bottom: 1px solid #f3eef0; vertical-align: top; }
main.page table tr:last-child td { border-bottom: 0; }
main.page form table td, main.page table table td { border-bottom: 0; padding: 5px 8px; vertical-align: middle; }
main.page form table tr:hover > td.cell { background: none; }
.highlight, table.striped tr:nth-child(even) { background: #fcfafb; }
main.page table:not(.people) tr:hover > td.cell, table.striped tr:hover > td { background: var(--tint); }
table.small td, table.small th { font-size: 12px; }

/* ---- Filters and pagination ---------------------------------------------------------------- */
.filters { border: 0; padding: 0; margin: 0 0 14px; }
.filters strong { font-weight: 600; color: var(--muted); }
.sizedLine { border: 0; line-height: 32px; margin-bottom: 10px; }
.pagination { border: 0; margin-top: 18px; padding: 0; color: var(--muted); }
.pagination a {
	border: 1px solid var(--line-2);
	border-radius: 6px;
	padding: 4px 9px;
	color: var(--ink);
	background: #fff;
	text-decoration: none;
	margin: 0 2px 4px 0;
}
.pagination a:hover { border-color: var(--wine-2); color: var(--wine); }
.pagination a.active { background: var(--wine-2); border-color: var(--wine-2); color: #fff; }

/* ---- Forms --------------------------------------------------------------------------------- */
input[type=text], input[type=password], input[type=number], input[type=date], select, textarea {
	font: 13px var(--font);
	color: var(--ink);
	padding: 6px 8px;
	border: 1px solid var(--line-2);
	border-radius: 6px;
	background: #fff;
	box-sizing: border-box;
	max-width: 100%;
}
textarea { min-height: 60px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--wine-2); box-shadow: 0 0 0 3px rgba(163, 41, 63, 0.15); }
input[type=submit], button[type=submit]:not(.link):not(.btn) {
	font: 600 13px var(--font);
	background: var(--wine-2);
	border: 1px solid var(--wine-3);
	color: #fff;
	border-radius: 6px;
	padding: 8px 18px;
	cursor: pointer;
}
input[type=submit]:hover { background: var(--wine-3); }
main.page form td:first-child { color: #5d5458; }
.required { color: var(--wine-2); }
.submit { float: none; margin: 10px 0 0; }

/* Edit boxes (profile editor) and line/bill forms become cards. */
.editBox {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 16px;
	margin: 0 16px 16px 0;
}
.editBox { width: 420px; box-sizing: border-box; }
.editBox .title { font-size: 18px; margin-bottom: 10px; }
.editBox table + .title { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.editBox table { width: 100%; }
.editBox td:first-child { width: 38%; white-space: normal; line-height: 1.25; font-size: 12px; }
main.page .editBox input[type=text], main.page .editBox textarea, main.page .editBox select { width: 100%; }
/* Record forms (line, LEC, bill, office): a centred card with the title inside. */
.form, main.page > div[align="center"] > form {
	display: inline-block;
	text-align: left;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 22px 26px 18px;
	margin-top: 4px;
}
.form .title { text-align: left; margin-bottom: 14px; }
main.page form input[type=text], main.page form textarea { width: 300px; }
main.page form select { min-width: 200px; }
main.page .filters select { width: auto; min-width: 280px; }
/* Fields that also appear on the printed profile: a thin accent on the left. */
.onProfile { background: none; }
.onProfile input, .onProfile select, .onProfile textarea { border-left: 3px solid #e3b7c2; }
.fieldBox { border-bottom: 0; }
fieldset.locked input, fieldset.locked select, fieldset.locked textarea { background: #f6f2f3; color: #555; border-color: var(--line); }

/* ---- Small screens ---------------------------------------------------------------------- */
@media (max-width: 700px) {
	main.page { padding: 16px 12px 32px; overflow-x: auto; }
	.navigation li a { padding: 10px 8px; }
	.headerTools { padding-right: 10px; }
}

@media print {
	.topBanner, .navigation { display: none; }
	body { background: #fff; }
	main.page table:not(.people), .editBox { box-shadow: none; }
}

/* Profile editor: two columns of cards. */
main.page .container { width: 880px; max-width: 100%; text-align: left; }

/* ---- List page heads, dialogs, toasts ------------------------------------------------------- */
.listPage { max-width: 960px; margin: 0 auto; }
.pageHead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.pageHead .title { margin: 0; }
.listPage table { width: 100%; }
.billSearch .searchRow { display: flex; gap: 8px; }
.billSearch .searchRow input[type=text] { width: 280px; }
.billSearch .searchLinks { margin: 14px 0 0; color: var(--muted); }

dialog.modal {
	border: 0;
	padding: 0;
	border-radius: 14px;
	width: min(560px, 94vw);
	max-height: 90vh;
	box-shadow: 0 24px 60px rgba(40, 5, 15, 0.35);
	color: var(--ink);
	font: 13px var(--font);
}
dialog.modal:has(.editBox) { width: min(940px, 96vw); }
dialog.modal::backdrop { background: rgba(35, 15, 22, 0.45); backdrop-filter: blur(2px); }
.modalHead {
	position: sticky; top: 0; z-index: 2;
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 20px 12px;
	background: #fff;
	border-bottom: 1px solid var(--line);
}
.modalHead h2 { margin: 0; font: normal 20px Georgia, "Times New Roman", serif; }
.modalClose { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.modalClose:hover { background: var(--tint); color: var(--wine); }
.modalBody { padding: 16px 20px 20px; }
.modalFoot {
	position: sticky; bottom: 0; z-index: 2;
	padding: 12px 20px;
	background: #fff;
	border-top: 1px solid var(--line);
	display: flex; justify-content: flex-end;
}
.modalFoot[hidden] { display: none; }
.modalBody .bottomLine { display: none; }
.modalFoot > .submitBar, .modalFoot > .formActions { flex: 1; padding-top: 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
/* Inside the dialog the form is the dialog: no second card. */
.modalBody .form, .modalBody div[align="center"] > form { display: block; border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }
.modalBody div[align="center"] { text-align: left; }
.modalBody form table { width: 100%; }
.modalBody form input[type=text], .modalBody form textarea { width: 100%; }
.modalBody .container { width: auto; }
.modalBody .editBox { width: calc(50% - 8px); margin: 0 0 16px; }
.modalBody .editBox:nth-of-type(odd) { margin-right: 16px; }
.modalBody input[type=submit] { float: right; }
@media (max-width: 760px) { .modalBody .editBox { width: 100%; margin-right: 0; } }

.toast {
	position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
	background: #2b2629; color: #fff; padding: 10px 18px; border-radius: 999px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); font-size: 13px;
	transition: opacity 0.5s, transform 0.5s;
}
.toast.gone { opacity: 0; transform: translate(-50%, 8px); }
.modalBody form table td { padding: 5px 4px; }
/* Labels size to their text (never clipped); inputs take the rest. */
.modalBody form table td:first-child { width: 1%; white-space: nowrap; color: #5d5458; padding-right: 12px; }
.modalBody .editBox table td:first-child { width: 38%; white-space: normal; line-height: 1.25; }

/* Required fields: one marker style everywhere, with its key beside the Save button. */
.required { color: var(--wine-2); font-weight: 600; }
.submitBar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-top: 8px; }
.requiredKey { color: var(--muted); font-size: 11px; margin-right: auto; }
.modalBody input[type=submit] { float: none; }

/* ---- List search and filters ---- */
.wideList { max-width: none; margin: 0 15px; }
.filterBar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.filterBar .searchBox { position: relative; display: flex; align-items: center; flex: 1 1 200px; min-width: 0; max-width: 380px; }
.filterBar .searchBox .icon { position: absolute; left: 11px; color: var(--muted); pointer-events: none; }
main.page .filterBar input[type=search] {
  width: 100%; padding: 8px 12px 8px 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit;
}
main.page .filterBar select { width: auto; min-width: 0; max-width: 190px; padding: 7px 8px; border-radius: 8px; }
main.page .filterBar select.active { border-color: var(--wine); color: var(--wine); background: var(--tint); }
.filterBar .btn { padding: 7px 14px; }
.filterBar .clearFilters { color: var(--muted); font-size: 0.92em; }
.filterBar .filterCount { margin-left: auto; color: var(--muted); font-size: 0.92em; white-space: nowrap; }
.emptyList, tr.emptyRow td { padding: 28px; text-align: center; color: var(--muted); }
.headActions { display: flex; gap: 8px; align-items: center; }
.pageHead .titleBack { margin-left: 10px; font-size: 0.6em; font-weight: 400; }
@media (max-width: 640px) {
  .filterBar .searchBox { max-width: none; flex-basis: 100%; }
  .filterBar .filterCount { margin-left: 0; }
}

/* ---- Icons (Lucide, inlined; see src/icons.ts) ---- */
.btn .icon, button .icon { margin-right: 6px; }
.btn, button.submit { display: inline-flex; align-items: center; }
.clearFilters { display: inline-flex; align-items: center; gap: 3px; }
.clearFilters .icon { width: 14px; height: 14px; }
td.heading a .icon { width: 12px; height: 12px; margin-left: 3px; vertical-align: -1px; }
.rowAction { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.rowAction .icon { width: 14px; height: 14px; opacity: 0.8; }
button.rowAction .icon { margin-right: 0; }
.headerTools a, .headerTools button { display: inline-flex; align-items: center; gap: 5px; }
.headerTools .icon { width: 15px; height: 15px; margin: 0; opacity: 0.85; }

/* ---- Lines import ---- */
dialog.modal:has(.importForm) { width: min(860px, 96vw); }
.importForm p { line-height: 1.5; }
.importHelp { margin: 0 0 14px; padding-left: 18px; color: #5d5458; line-height: 1.55; }
.importForm h3 { margin: 18px 0 8px; font-size: 14px; }
.importTable { width: 100%; }
.importTable td { padding: 5px 8px; vertical-align: top; }
.importSummary { font-size: 14px; }
.importWarn { color: var(--wine); }
.importColumns { font-size: 12px; margin-top: 14px; }
.importTemplate a { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.muted { color: var(--muted); }
.formActions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }

/* Icon-only row actions (edit, delete) */
.rowAction.iconOnly { padding: 4px; border-radius: 6px; color: var(--muted); }
.rowAction.iconOnly .icon { width: 16px; height: 16px; opacity: 1; }
.rowAction.iconOnly:hover { background: var(--tint); color: var(--wine); }
.rowAction.iconOnly.danger:hover { background: #fdecec; color: #b42318; }
td.rowActions { width: 1%; padding-left: 4px; text-align: right; }
td.rowActions .rowAction, td.rowActions form { vertical-align: middle; }
.visuallyHidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* A format hint ("MM/DD/YYYY") beside its field, on the same line */
.withHint { display: flex; align-items: center; gap: 8px; }
.withHint input { flex: 1; min-width: 0; }
.fieldHint { color: var(--muted); font-size: 11px; white-space: nowrap; }