/*
    erminder Site CSS -- modernized port of erminder.web/Content/Site.css.
    Preserves the legacy layout, brand palette, tag-cloud weights, datamenu
    chrome, table row classes (done/reconciled/future/deleted), editor-label
    /-field/-caption/-watermark utilities, and validation styles.

    Brand palette (kept verbatim):
      --color-brand-dark   #660600  (header headings)
      --color-brand-medium #005F8F  (main menu background)
      --color-brand-light  #008ED6  (datamenu background / link color)
*/

:root {
    --color-brand-dark: #660600;
    --color-brand-medium: #005F8F;
    --color-brand-light: #008ED6;
    --color-link-hover: #1d60ff;
    --color-link-active: #12eb87;
    --color-text: #696969;
    --color-text-strong: #000;
    --color-table-border: #e8eef4;
    --color-row-hover: #e8eef4;
    --color-input-border: #ccc;
    --color-watermark: #90c6e2;
    --color-greeting: green;
    --color-validation: #ff1000;
    --color-deposit: green;
    --color-withdrawal: red;
    --color-reconciled-bg: #baf1a3;
    --color-done-bg: gold;
    --color-deleted-bg: pink;
    --color-future-bg: beige;

    --font-default: Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, sans-serif;
    --font-heading: "Segoe UI", Arial, Helvetica, sans-serif;
    --font-tagline: Georgia, serif;
}

* { box-sizing: border-box; }

html { overflow-y: scroll; }

body {
    background-color: #fff;
    font-size: 75%;
    font-family: var(--font-default);
    margin: 0;
    padding: 0;
    color: var(--color-text);
}

a:link, a:visited {
    color: var(--color-brand-light);
    text-decoration: underline;
}
a:hover { color: var(--color-link-hover); text-decoration: none; }
a:active { color: var(--color-link-active); }

p, ul { margin-bottom: 20px; line-height: 1.6em; }

/* HEADINGS */
h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: var(--color-brand-medium);
    font-family: var(--font-heading);
}
h1 { font-size: 2em; padding-bottom: 5px; margin-bottom: 0; }
h2 { padding: 0 0 5px 0; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }
h5, h6 { font-size: 1em; }

/* PRIMARY LAYOUT ELEMENTS */
.page {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#header {
    position: relative;
    margin-bottom: 0;
    color: #000;
    padding: 0;
}

#header h1 {
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-size: 32px !important;
}

#main {
    padding: 5px 30px 15px 30px;
    background-color: #fff;
    margin-bottom: 30px;
}

#footer {
    color: #999;
    padding-top: 50px;
    text-align: center;
    line-height: normal;
    margin: 0;
    font-size: .9em;
}

#sidebar {
    position: absolute;
    top: 100px;
    left: 25px;
    width: 190px;
}

/* TITLE / LOGO / TAGLINE */
div#title {
    display: block;
    float: left;
    text-align: left;
    margin-left: -30px;
}

div#title #logo { padding-top: 0; }

div#title #tagline {
    display: block;
    margin-left: 32px;
    font-family: var(--font-tagline);
    color: var(--color-brand-medium);
    text-decoration: none;
}

/* USER CONTROL BOX (top-right login link / profile / logout) */
#usercontrolbox {
    position: absolute;
    top: 20px;
    width: 90%;
    text-align: right;
}

#usercontrolbox a {
    font-style: italic;
    font-size: 7pt;
    font-weight: normal;
    color: var(--color-greeting);
    text-decoration: none;
}

/* MAIN TAB MENU (header navigation) */
#menucontainer {
    margin-top: 40px;
    margin-left: 125px;
}

ul#menu {
    border-bottom: 1px solid var(--color-brand-medium);
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: right;
}

ul#menu li {
    display: inline;
    list-style: none;
    white-space: nowrap;
}

ul#menu li a {
    padding: 6px 12px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: var(--color-brand-medium);
    color: #fff;
}

ul#menu li a:hover {
    background-color: var(--color-brand-light);
    text-decoration: none;
}

ul#menu li.selected a,
ul#menu li a.active {
    background-color: #fff;
    color: var(--color-brand-medium);
    border: 1px solid var(--color-brand-medium);
}

/* DATA TAB MENU (per-page contextual actions) */
ul#datamenu {
    padding: 4px 0 0 0;
    position: relative;
    margin: 0 0 -10px 0;
    text-align: right;
    list-style: none;
}

#datamenucontainer { min-height: 1px; }

ul#datamenu li {
    display: inline-block;
    list-style: none;
    margin-left: 6px;
}

ul#datamenu li:first-child { margin-left: 0; }

ul#datamenu li a {
    padding: 6px 12px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: var(--color-brand-light);
    color: #fff;
}

ul#datamenu li a:hover {
    background-color: var(--color-greeting);
    text-decoration: none;
}

ul#datamenu li.selected a {
    background-color: #fff;
    color: var(--color-brand-light);
    border: 1px solid var(--color-brand-light);
    padding: 5px 11px;
}

/* FORM CONTROLS */
fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
    font-size: 12px;
    font-family: var(--font-default);
}

form.inlineForm { margin-left: 0; }

/* Grid-based entry-form layout for the fillups / ev-charges /
   service-history add forms. Each direct-child <label> becomes a
   flex-column with the field caption stacked above its input, all
   laid out on a responsive auto-fit grid. ef-span-2 / ef-span-all
   modifiers control wider fields (tags, comment, notes). The
   ef-actions row hosts the save button + any side messages. */
fieldset.entry-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
    column-gap: 1em;
    row-gap: 0.7em;
    padding-top: 1em;
    background-color: #fafbfc;
}
fieldset.entry-form > legend {
    padding: 0 0.4em;
}
fieldset.entry-form > label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    color: var(--color-greeting);
    text-transform: lowercase;
    letter-spacing: 0.02em;
}
fieldset.entry-form > label > input,
fieldset.entry-form > label > textarea,
fieldset.entry-form > label > .date-picker {
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    color: var(--color-default-text);
}
fieldset.entry-form > label.ef-span-2 {
    grid-column: span 2;
}
fieldset.entry-form > label.ef-span-all {
    grid-column: 1 / -1;
}
fieldset.entry-form > label.ef-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.4em;
    font-size: 12px;
    align-self: end;
    padding-bottom: 4px;
}
fieldset.entry-form > label.ef-checkbox > input { width: auto; }
fieldset.entry-form > .ef-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1em;
    padding-top: 0.4em;
    border-top: 1px solid #eee;
    margin-top: 0.3em;
}
fieldset.entry-form > .ef-actions > .mpg {
    margin-right: auto;
    font-size: 12px;
    color: var(--color-greeting);
}
fieldset.entry-form > .ef-actions > button {
    padding: 6px 18px;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"] {
    border: 1px solid var(--color-input-border);
    font-size: 12px;
    font-family: var(--font-default);
    padding: 2px 4px;
}

input[type="password"] {
    width: 200px;
    border: 1px solid var(--color-input-border);
    font-size: 12px;
    font-family: var(--font-default);
    padding: 2px 4px;
}

input:focus,
button:focus,
textarea:focus,
select:focus {
    box-shadow: 0 0 2pt 1pt var(--color-brand-light);
    outline: none;
}

input[name="tags"],
input[name="newTags"] {
    width: 98%;
    min-width: 95px;
    min-height: 26px;
}

input#addNoteInline { width: 75%; }

#addNote input[type="text"] { width: 100%; }

button,
input[type="submit"],
input[type="button"] {
    font-family: var(--font-default);
    font-size: 12px;
    padding: 3px 10px;
    cursor: pointer;
}

/* TABLES */
table {
    border: solid 1px var(--color-table-border);
    border-collapse: collapse;
}

table tbody tr:hover { background-color: var(--color-row-hover); }

table td {
    padding: 3px 5px;
    border: solid 1px var(--color-table-border);
    line-height: 1.4em;
    vertical-align: top;
}

table th {
    padding: 4px 5px;
    text-align: left;
    background-color: var(--color-table-border);
    border: solid 1px var(--color-table-border);
}

/* MISC */
.clear { clear: both; }
.error { color: red; }

/* Any date-bearing column cell (td.date) and any input rendered
   inside it -- as well as any standalone .date-classed input -- gets
   right alignment so values line up with their column header.
   `text-align` on the input alone does not affect the date text in
   most browsers (the date control has its own shadow DOM), so we
   also push the WebKit datetime-edit wrapper to the right. */
td.date,
td.date input,
input.date { text-align: right; }
td.date input[type="date"]::-webkit-datetime-edit,
input.date[type="date"]::-webkit-datetime-edit {
    display: block;
    width: 100%;
    text-align: right;
}
td.date input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input.date[type="date"]::-webkit-datetime-edit-fields-wrapper {
    justify-content: flex-end;
}

/* VALIDATION */
.field-validation-error { color: var(--color-validation); }
.field-validation-valid { display: none; }
.input-validation-error {
    border: 1px solid var(--color-validation);
    background-color: #ffeeee;
}
.validation-summary-errors {
    font-weight: bold;
    color: var(--color-validation);
}
.validation-summary-valid { display: none; }

.erResponse {
    color: var(--color-validation);
    font-style: italic;
}

/* EDITOR / DISPLAY HELPERS */
.display-label,
.editor-label {
    margin: 1em 0 0 0;
    display: block;
    color: var(--color-brand-medium);
    font-weight: bold;
}

.editor-watermark {
    color: var(--color-watermark);
    font-style: italic;
    padding-left: 2px;
}

.display-field,
.editor-field {
    margin: 0.5em 0 0 0;
}

.editor-caption {
    display: block;
    font-size: 8pt;
    font-style: italic;
}

.editor-table { border: 0; }
.editor-table th,
.editor-table td { border: 0; padding: 10px; }

.text-box { width: 20em; }
.text-box.multi-line { height: 6.5em; }
.tri-state { width: 6em; }

/* TAG CLOUD */
ul.tagcloud {
    margin-top: -10px;
    padding: 2px;
    line-height: 2.4em;
    text-align: center;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 4px;
    column-gap: 6px;
}

ul.tagcloud li {
    list-style-type: none;
    display: inline-block;
    padding-left: 0.9em;
    padding-right: 0.9em;
    vertical-align: middle;
    white-space: nowrap;
}

span.tagcloud-tag { display: inline-block; }

.weight1, .weight2, .weight3, .weight4, .weight5,
.weight6, .weight7, .weight8, .weight9, .weight10 {
    font-size: 1.2em;
}

.tagcloudfooter { clear: both; }

h1 .editor, h2 .editor, h3 .editor, h4 .editor, li .editor, div .editor {
    font-family: var(--font-default);
    font-style: italic;
    font-size: 7pt;
    font-weight: normal;
    color: var(--color-greeting);
}

/* [x] remove-tag links hidden until hover (preserves legacy behavior) */
h1 .x, li .x {
    margin-left: -.6em;
    vertical-align: super;
    font-family: var(--font-default);
    font-size: 7pt;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    visibility: hidden;
}

.editor-container .editor-items {
    visibility: hidden;
    float: right;
    margin-left: 3em;
}

.editor-container .editor-items a {
    -webkit-touch-callout: none;
    -webkit-user-select: none !important;
    user-select: none !important;
}

.editor-container .editor-items a + a {
    margin-left: 0.5em;
}

/* item-description h2: bare links visible inline after the name; matches
   legacy My/Budget.cshtml and Tags.cshtml rename/delete strip placement. */
.item-description {
    margin: 0.5em 0;
}
.item-description .editor-items {
    margin-left: 0.75em;
    font-size: 0.65em;
    font-weight: normal;
    vertical-align: middle;
}
.item-description .editor-items a {
    -webkit-touch-callout: none;
    -webkit-user-select: none !important;
    user-select: none !important;
}
.item-description .editor-items a + a {
    margin-left: 0.5em;
}
.item-description form {
    display: inline-flex;
    gap: 0.5em;
    align-items: center;
}
.item-description form input[type="text"] {
    font-size: 0.7em;
    font-weight: normal;
    padding: 2px 4px;
    min-width: 18em;
}

label {
    -webkit-user-select: none !important;
    user-select: none !important;
}

h1 .tagcloud-tag:hover .x,
li:hover .x,
.editor-container:hover .editor-items {
    visibility: visible;
}

@media only screen and (max-device-width: 800px) {
    h1 .x, li .x, .editor-container .editor-items {
        visibility: visible;
    }
}

.weight6  .x,
.weight7  .x,
.weight8  .x,
.weight9  .x,
.weight10 .x {
    /* All weights render at the same font-size now, so the [x] offset is
       a single value rather than the per-weight ramp from the legacy CSS. */
    margin-left: -.7em;
}

/* DATA-TYPE STYLES */
/* Display-mode budget table uses fixed layout so columns align at
   load time. The inline-editor variant switches to auto layout so
   the Tags column can grow (stealing width from Note) when a chip
   demands more horizontal space than 12em allows. */
table.budget {
    table-layout: fixed;
    width: 100%;
}
table.budget.budget-with-inline-editor { table-layout: auto; }
table.budget col.col-date       { width: 5.8em; }
table.budget col.col-amount     { width: 10.5em; }
table.budget col.col-tags       { width: 14em; }
table.budget col.col-balance    { width: 8em; }
table.budget col.col-reconciled { width: 8em; }
table.budget td, table.budget th { overflow: hidden; }
table.budget td.editor-container { word-break: break-word; }

/* Inline add/edit rows must allow overflow so the TagChipInput's
   absolute-positioned suggestion list can hang below the cell
   instead of being clipped by the row's overflow-hidden. */
table.budget tr.add-entry-row td,
table.budget tr.editing-row td {
    padding: 4px 5px;
    vertical-align: middle;
    overflow: visible;
}
table.budget tr.add-entry-row td.date,
table.budget tr.editing-row td.date { white-space: nowrap; }
/* Inline add/edit rows: standalone text/date/amount inputs share the
   same 24px min height as the TagChipInput container so the four
   editor cells align on top and bottom regardless of which inputs
   the row actually renders. We exclude the chip-input's INNER
   <input> from the standalone-input min-height rule so it doesn't
   push the container taller than its own border-box height. The
   note input lives inside a NoteAutocompleteInput wrapper div so
   we target it via its class rather than the > td > input selector. */
table.budget tr.add-entry-row > td > input[type="text"],
table.budget tr.add-entry-row > td > input[type="date"],
table.budget tr.editing-row > td > input[type="text"],
table.budget tr.editing-row > td > input[type="date"],
table.budget tr.add-entry-row .amount-cell-inner input.amount-input,
table.budget tr.editing-row .amount-cell-inner input.amount-input,
table.budget tr.add-entry-row .note-autocomplete input,
table.budget tr.editing-row .note-autocomplete input,
table.budget tr.add-entry-row .tag-chip-input,
table.budget tr.editing-row .tag-chip-input {
    box-sizing: border-box;
    min-height: 24px;
}
table.budget tr.add-entry-row > td > input[type="text"],
table.budget tr.editing-row > td > input[type="text"],
table.budget tr.add-entry-row .amount-cell-inner input.amount-input,
table.budget tr.editing-row .amount-cell-inner input.amount-input,
table.budget tr.add-entry-row .note-autocomplete input,
table.budget tr.editing-row .note-autocomplete input {
    width: 100%;
    padding: 2px 4px;
    font: inherit;
}
table.budget tr.add-entry-row .amount-cell-inner input.amount-input,
table.budget tr.editing-row .amount-cell-inner input.amount-input { text-align: right; }

/* NoteAutocompleteInput dropdown -- replaces the native <datalist>
   the browser would otherwise pop out for <input list="...">. The
   wrapper is a relative-positioned full-width box so the dropdown
   sits flush under the input and spans the same column width.
   Items wrap rather than truncate so long notes are readable
   without needing tooltip positioning gymnastics on top of the
   dropdown. */
.note-autocomplete {
    position: relative;
    width: 100%;
}
.note-autocomplete .note-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    margin: 1px 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-input-border, #ccc);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
    max-height: 14em;
    overflow-y: auto;
    width: 100%;
}
.note-autocomplete .note-suggestions li {
    cursor: pointer;
    padding: 4px 6px;
    border-bottom: 1px solid #eee;
}
.note-autocomplete .note-suggestions li:last-child {
    border-bottom: none;
}
.note-autocomplete .note-suggestions li.highlighted,
.note-autocomplete .note-suggestions li:hover {
    background: #f0f0f0;
}
.note-autocomplete .note-suggestions .suggestion-note {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    font-weight: 500;
    color: #222;
}
.note-autocomplete .note-suggestions .suggestion-meta {
    font-size: 0.8em;
    color: #666;
    line-height: 1.3;
    margin-top: 1px;
    display: flex;
}
.note-autocomplete .note-suggestions .suggestion-meta span {
    flex-shrink: 0;
    padding-right: 1em;
    white-space: nowrap;
}
.note-autocomplete .note-suggestions .suggestion-meta .meta-check {
    width: 9em;
}
.note-autocomplete .note-suggestions .suggestion-meta .meta-date {
    width: 6.5em;
}
.note-autocomplete .note-suggestions .suggestion-meta .meta-amount {
    width: 12em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.note-autocomplete .note-suggestions .suggestion-meta .meta-amount.negative {
    color: var(--color-withdrawal);
}
.note-autocomplete .note-suggestions .suggestion-meta .meta-amount.positive {
    color: var(--color-deposit);
}
.note-autocomplete .note-suggestions .suggestion-meta .meta-tags {
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-brand-light);
}

/* Amount column in the inline editor: the typed amount input is
   preceded by a fixed-width sign + currency prefix span that reads
   visually like the rendered amounts (-$12.50 or $12.50) without
   making the typed characters part of the input value. The prefix
   is a 2ch right-aligned box -- so the "$" sits at the same X in
   both W and D states -- and stays hidden until the input is
   focused OR has a value, so an empty resting add row doesn't show
   a dangling "$" with no amount next to it. The whole cell picks
   up the same red / green text class as a saved entry, so the
   input text inherits the color. The input keeps an opaque white
   background so the row's reconciled-green / hover-gray fill
   doesn't bleed through into the typing area. */
table.budget td.amount-cell { overflow: visible; }
table.budget td.amount-cell .amount-cell-inner {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    line-height: 1.2;
}
table.budget td.amount-cell .amount-prefix {
    display: inline-block;
    width: 2ch;
    min-width: 2ch;
    text-align: right;
    cursor: pointer;
    user-select: none;
    flex: 0 0 auto;
    white-space: pre;
    visibility: hidden;
}
table.budget td.amount-cell:focus-within .amount-prefix,
table.budget td.amount-cell:has(input.amount-input:not(:placeholder-shown)) .amount-prefix {
    visibility: visible;
}
table.budget td.amount-cell input.amount-input {
    flex: 1 1 0;
    min-width: 0;
    color: inherit;
    background: #fff;
}
/* Amount validation flash: when Submit/Save fires with the amount
   empty, the parent applies .amount-error to swap in a dashed red
   border + focus the field. The flag clears on the next keystroke
   so the border disappears as soon as the user starts correcting. */
table.budget td.amount-cell input.amount-input.amount-error {
    border: 1px dashed var(--color-validation, red);
    outline: none;
}

/* Note column when it hosts the inline editor. The cell stays a
   normal table-cell (no display:flex on the <td>) so its background
   fills the full cell height -- critical for the reconciled-green /
   hover-gray bleed-through when an adjacent Tags chip-list grows
   the row taller than the note input. */
table.budget td.note-with-controls .note-input,
.notes-table td.note-with-controls .note-input { width: 100%; }
table.budget td.note-with-controls .erResponse,
.notes-table td.note-with-controls .erResponse {
    font-size: 0.85em;
    margin-top: 2px;
}

/* Balance column action stack for add/edit (Add+cancel or Save+cancel). */
table.budget tr.add-entry-row .entry-actions,
table.budget tr.editing-row .entry-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}
table.budget tr.add-entry-row .entry-actions button,
table.budget tr.editing-row .entry-actions button {
    font: inherit;
    padding: 1px 8px;
}

/* Reconcile-toggle link in the Reconciled column for add/edit rows. */
table.budget tr.add-entry-row .reconcile-toggle,
table.budget tr.editing-row .reconcile-toggle {
    display: inline-block;
    white-space: nowrap;
}

/* When the user toggles "reconcile" on the add or edit row, give the
   row the same reconciled-row background treatment as a saved
   reconciled entry, so it's visually obvious what's about to be
   persisted. */
table.budget tr.add-entry-row.reconciled td,
table.budget tr.editing-row.reconciled td {
    background-color: var(--color-reconciled-bg);
}

.budgetWithdrawal {
    text-align: right;
    color: var(--color-withdrawal);
    white-space: nowrap;
}

.budgetDeposit {
    text-align: right;
    color: var(--color-deposit);
    white-space: nowrap;
}

tr.done td { background-color: var(--color-done-bg); }
td.reconciled, tr.reconciled td { background-color: var(--color-reconciled-bg); }
td.hiddenReconciled {
    height: 0;
    padding: 0;
    border-top: 1px solid var(--color-reconciled-bg);
}
tr.deleted td { background-color: var(--color-deleted-bg); }
tr.future td {
    font-style: italic;
    font-size: smaller;
    background-color: var(--color-future-bg);
}

input.addNoteInline[name="note"] { width: 80%; }

/* note + entry editors and inline forms */
.note-editor,
.entry-editor {
    background: #fafafa;
    border: 1px solid #ddd;
    padding: 10px 15px;
    margin: 15px 0;
}
.note-editor h2,
.entry-editor h2 { margin-top: 0; }
.note-editor label,
.entry-editor label { display: block; margin-top: 6px; font-size: 12px; }
.note-editor input[type="text"],
.note-editor input[type="date"],
.note-editor textarea,
.entry-editor input[type="text"],
.entry-editor input[type="date"],
.entry-editor input[type="number"] { width: 100%; margin-top: 2px; }

.note-editor button + button,
.entry-editor button + button,
.budget-entry-form button + button { margin-left: 0.5em; }

/* tag-cloud filter */
.tagcloud-filter {
    padding: 8px 0 12px 0;
}
.tagcloud-filter input { width: 210px; }
.tagcloud-filter .editor-caption { display: inline-block; margin-left: 8px; }

/* Watermark / placeholder styling (legacy: jquery.watermark applied
   color #90C6E2 italic to inputs that had a watermark attribute). */
.tagcloud-filter input::placeholder,
.note-editor input::placeholder,
.note-editor textarea::placeholder,
.entry-editor input::placeholder,
.budget-entry-form input::placeholder {
    color: #90C6E2;
    font-style: italic;
    opacity: 1;
}

/* Markdown rendering wraps note bodies in <p>. Inside table cells the
   default 1em top/bottom paragraph margin pushes single-line notes to
   3x their needed height -- strip those margins. Single-paragraph
   notes (the common case) then render at the same height as a bare-
   text cell. Multi-paragraph notes still get their visual separation
   between <p> blocks via the markdown renderer's <br>/paragraph
   spacing, just with the surrounding container margin removed. */
.notes-table td p,
.notes-table td .linkable p {
    margin: 0;
    line-height: inherit;
}
/* If a single <p> is the only child of .linkable (true for the vast
   majority of notes: short text rendered as one paragraph), drop its
   block-level layout so it sits flush in the row at table-cell line
   height. Multi-paragraph notes keep block <p> via the :not(:only-child)
   path below and visually separate as expected. */
.notes-table td .linkable p:only-child {
    display: inline;
}

.notes-table {
    width: 100%;
    table-layout: auto;
}
.notes-table colgroup col.col-date  { width: 5.8em; }
.notes-table colgroup col.col-since { width: 7em; }
.notes-table colgroup col.col-done  { width: 6.5em; }
.notes-table colgroup col.col-tags  { width: 14em; }

/* Match the inline editor's compact row padding for display rows so
   switching between an editing row and its neighbors doesn't make
   the table appear to "breathe" between renders. */
.notes-table td {
    padding: 4px 5px;
    vertical-align: middle;
}

/* Inline add / inline edit rows in the notes table -- inputs sit
   directly under the column headers, so labels and placeholder
   watermarks are unnecessary. Match budget inline rows. */
.notes-table tr.add-note-row td,
.notes-table tr.editing-row td { padding: 4px 5px; vertical-align: middle; }
.notes-table tr.add-note-row input[type="text"],
.notes-table tr.editing-row input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    padding: 2px 4px;
    font: inherit;
}
/* Validation flash on the inline note input: parallels the
   .amount-error treatment on the budget amount field. */
.notes-table tr.add-note-row input.note-error,
.notes-table tr.editing-row input.note-error {
    border: 1px dashed var(--color-validation, red);
    outline: none;
}
.notes-table tr.add-note-row .entry-actions,
.notes-table tr.editing-row .entry-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    font-size: 0.85em;
}
.notes-table tr.add-note-row .entry-actions button,
.notes-table tr.editing-row .entry-actions button {
    font-size: 1em;
    padding: 1px 6px;
}

/* Page content fade: while a page is reloading we keep the prior
   content rendered and overlay a translucent dim layer instead of
   lowering the wrapper's opacity. The overlay approach lets us hoist
   specific elements (the tag-jump input) above it so the user can
   keep interacting with them while the data refresh is in flight. */
.page-content {
    position: relative;
}
.page-content::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 200ms ease-in-out;
}
.page-content.is-reloading {
    pointer-events: none;
}
.page-content.is-reloading::before {
    opacity: 0.55;
}

/* The tag-jump filter input stays bright and interactive even while
   the rest of the page is dimmed: lift it above the ::before overlay
   via z-index and re-enable pointer events. */
.page-content .tagcloud-filter {
    position: relative;
    z-index: 2;
}
.page-content.is-reloading .tagcloud-filter {
    pointer-events: auto;
}

/* Blazor error UI overlay */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* PRINT */
@media print {
    #usercontrolbox, #header, #datamenucontainer, #sidebar, h1,
    #main > div.editor-field, #main > div > ul.tagcloud,
    #main > div > .tagcloudfooter, #main > h2 > a, h3,
    td.editor-container > .editor-items, table + a, #footer {
        display: none;
    }
    #main { padding: 0; margin: 0; }
}

/* Tag chip input: shared by every entry-form tag list. NOT used by the
   #tag jump box at the top of the page. */
.tag-chip-input {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    min-height: 1.7em;
    padding: 2px 4px;
    border: 1px solid #ccc;
    background: #fff;
    font: inherit;
    cursor: text;
    box-sizing: border-box;
}
.tag-chip-input .chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 4px;
    background: var(--color-deposit-bg, #e6f0ff);
    border: 1px solid #b3cce0;
    border-radius: 3px;
    font-size: 0.95em;
    line-height: 1.3;
}
.tag-chip-input .chip-text { white-space: nowrap; }
.tag-chip-input .chip-remove {
    background: transparent;
    border: 0;
    padding: 0 2px;
    margin: 0;
    font: inherit;
    color: #666;
    cursor: pointer;
    line-height: 1;
}
.tag-chip-input .chip-remove:hover { color: var(--color-withdrawal, #b00); }
.tag-chip-input .chip-input-text {
    flex: 1 0 4em;
    min-width: 4em;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    font: inherit;
}
.tag-chip-input .chip-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    margin: 1px 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
    max-height: 14em;
    overflow-y: auto;
}
.tag-chip-input .chip-suggestions li {
    padding: 2px 6px;
    cursor: pointer;
    line-height: 1.3;
}
.tag-chip-input .chip-suggestions li.highlighted,
.tag-chip-input .chip-suggestions li:hover {
    background: #f0f0f0;
}