.content {
    align-self: start;
    margin: 0 auto;
}

/* Keep the current user controls visible even when the navigation grows beyond the viewport. */
@media (min-width: 801px) {
    .sidebar {
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }

    .sidebar nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 6px;
        scrollbar-width: thin;
        scrollbar-color: #536582 transparent;
    }

    .sidebar nav::-webkit-scrollbar { width: 8px; }
    .sidebar nav::-webkit-scrollbar-track { background: transparent; }
    .sidebar nav::-webkit-scrollbar-thumb { background: #536582; border: 2px solid #121a2b; border-radius: 99px; }
    .sidebar nav::-webkit-scrollbar-thumb:hover { background: #7184a3; }

    .sidebar-footer { flex: 0 0 auto; margin-top: 0; }
}

.login-wrap {
    min-height: 0;
    align-items: flex-start;
    padding-top: 20px;
}

.user-box form { margin-top: 8px; }
.user-box select { width: 100%; margin-top: 3px; font-size: .86rem; padding: 6px 8px; }
.context-label { display: block; margin-top: 10px; font-size: .75rem; color: #97a7c1; }
.context-switcher { margin-top: 10px; }
.context-switcher summary { cursor: pointer; list-style: none; }
.context-switcher summary::-webkit-details-marker { display: none; }
.context-switcher .context-label { margin-top: 0; }
.context-current { color: #fff; display: inline; line-height: 1.35; overflow-wrap: anywhere; border-bottom: 1px dashed #94b8ff; }
.context-switcher summary::after { content: '⌄'; color: #94b8ff; margin-left: 5px; }
.context-switcher[open] summary::after { content: '⌃'; }
.context-switcher form { display: grid; gap: 3px; margin-top: 8px; }
.context-choice { width: 100%; border: 0; border-radius: 5px; padding: 6px 7px; background: transparent; color: #d7ddee; cursor: pointer; font: inherit; line-height: 1.35; overflow-wrap: anywhere; text-align: left; }
.context-choice:hover, .context-choice:focus, .context-choice.selected { background: #25314b; color: #fff; outline: 0; }

/* The register page keeps period filters out of the main view and asks for them only when a download is requested. */
.register-export-card { display: grid; gap: 16px; align-content: start; }
.register-dialog { width: min(100% - 32px, 520px); border: 1px solid var(--line); border-radius: 12px; padding: 24px; box-shadow: 0 18px 60px #15274d45; }
.register-dialog::backdrop { background: #11182788; }
.register-dialog form { display: grid; gap: 16px; }

/* Sales report: filters are intentionally checkboxes so it is always obvious which values are selected. */
.finance-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.finance-filter-grid .checkbox-list { margin: 0; min-width: 0; }
.finance-filter-grid .finance-groupings { grid-column: 1 / -1; max-height: none; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.finance-period { max-width: 680px; }
.finance-filter-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.finance-filter-trigger { display: grid; gap: 2px; min-height: 66px; padding: 11px 13px; border: 1px solid #ccd4e2; border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; text-align: left; }
.finance-filter-trigger:hover, .finance-filter-trigger:focus { border-color: #7b9be0; background: #f6f8ff; outline: 0; }
.finance-filter-trigger span { font-weight: 700; }
.finance-filter-trigger small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.finance-filter-trigger.has-selection { border-color: #93aaf1; background: #edf2ff; }
.finance-filter-trigger.has-selection small { color: #203b8f; }
.finance-filter-dialog { width: min(100% - 32px, 650px); max-height: min(780px, calc(100vh - 32px)); border: 1px solid var(--line); border-radius: 12px; padding: 24px; box-shadow: 0 18px 60px #15274d45; }
.finance-filter-dialog::backdrop { background: #11182788; }
.finance-filter-dialog > .muted { margin: -7px 0 14px; }
.finance-filter-dialog .finance-filter-search { margin: 14px 0 0; }
.finance-filter-dialog .checkbox-list { max-height: min(440px, calc(100vh - 310px)); margin: 12px 0 0; }
.finance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finance-amount-negative { color: var(--red); font-weight: 700; }
.finance-amount-positive { color: var(--green); font-weight: 700; }

.inline-form { display: flex; gap: 8px; align-items: end; }
.inline-form input { margin: 0; }
.inline-form input[type=number] { max-width: 90px; }
.catalog-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding: 10px 0; }
.toolbar-actions-only { justify-content: flex-end; }
.toolbar-action-group { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.catalog-list .catalog-row:first-child { border-top: 0; }
.sortable-catalog-row { gap: 10px; }
.sortable-catalog-row.dragging { opacity: .45; background: #edf3ff; }
.drag-handle { width: 26px; padding: 5px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: grab; font-size: 19px; line-height: 1; }
.drag-handle:active { cursor: grabbing; }
.sortable-catalog-row .inline-form { flex: 1; align-items: center; }
.sortable-catalog-row > form:last-child { display: flex; align-items: center; }
.html-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0; }
.html-tools .button { font-size: 12px; padding: 5px 8px; }
.html-editor { min-height: 360px; border: 1px solid #ccd4e2; border-radius: 7px; padding: 12px; background: #fff; line-height: 1.5; }
.html-editor:focus { outline: 2px solid #355bd7; outline-offset: -1px; }
.form-block { margin: 26px 0 0; padding: 18px; border: 1px solid #d8e1ef; border-radius: 10px; background: #f8fbff; }
.form-block legend { padding: 0 6px; color: var(--ink); font-size: 17px; font-weight: 700; }
.form-block .two-columns { margin-top: 2px; }
.template-tags { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbff; }
.template-tags h3 { margin: 0; font-size: 15px; }
.template-tags p { margin: 5px 0 8px; font-size: 13px; }
.template-tag-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.template-tag-group { padding: 12px; border: 1px solid #d8e1ef; border-radius: 7px; background: #fff; }
.template-tag-group h4 { margin: 0; font-size: 15px; }
.template-tag-group > p { min-height: 34px; }
.template-tag-list { display: flex; flex-wrap: wrap; gap: 7px; }
.template-tag { display: grid; gap: 2px; padding: 7px 9px; border: 1px solid #d6dfed; border-radius: 7px; background: #f7f9fd; color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
.template-tag:hover, .template-tag:focus { border-color: #7b9be0; background: #edf3ff; outline: 0; }
.template-tag code { color: var(--muted); font-size: 11px; }
.template-tag-empty { color: var(--muted); font-style: italic; }
fieldset { border: 1px solid var(--line); border-radius: 7px; margin: 12px 0; padding: 8px 13px; }
legend { padding: 0 5px; color: var(--muted); font-size: 13px; }
.check span { display: grid; }
.check .muted { font-size: 12px; }

.dadata-field { position: relative; }
.dadata-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 20;
    overflow: hidden;
    border: 1px solid #b8c5df;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(26, 43, 75, .18);
    background: #fff;
}
.dadata-suggestion {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #e5eaf3;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.dadata-suggestion:last-child { border-bottom: 0; }
.dadata-suggestion:hover, .dadata-suggestion:focus { background: #edf3ff; outline: 0; }
.dadata-suggestion small { display: block; margin-top: 2px; color: var(--muted); }

/* Keep values and row actions on a common horizontal line in administrative tables. */
td { vertical-align: middle; }
td.actions { display: table-cell; white-space: nowrap; }
td.actions > a, td.actions > form { display: inline-block; vertical-align: middle; }
td.actions > * + * { margin-left: 12px; }

/* Image scans stay readable as a compact history and can be inspected without leaving the card. */
.scan-history-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; }
.scan-thumbnail, .scan-pdf-thumbnail { display: flex; align-items: center; justify-content: center; width: 82px; height: 96px; overflow: hidden; border: 1px solid #ccd4e2; border-radius: 6px; background: #f4f7fc; color: #2e56c5; cursor: pointer; font-weight: 750; text-decoration: none; }
.scan-thumbnail:hover, .scan-thumbnail:focus, .scan-pdf-thumbnail:hover, .scan-pdf-thumbnail:focus { border-color: #7894e5; background: #edf2ff; outline: 0; }
.scan-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.scan-viewer { width: min(100% - 32px, 1100px); max-height: calc(100vh - 32px); border: 1px solid var(--line); border-radius: 12px; padding: 20px; box-shadow: 0 18px 60px #15274d45; }
.scan-viewer::backdrop { background: #11182799; }
.scan-viewer-stage { display: flex; align-items: center; justify-content: center; min-height: min(600px, calc(100vh - 230px)); max-height: calc(100vh - 230px); overflow: auto; margin-top: 16px; border-radius: 8px; background: #172033; }
.scan-viewer-stage img { display: block; max-width: 100%; max-height: calc(100vh - 250px); object-fit: contain; transform-origin: center; transition: transform .15s ease; }
.scan-viewer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

@media (max-width: 800px) {
    .inline-form { align-items: stretch; flex-wrap: wrap; }
    .template-tag-groups { grid-template-columns: 1fr; }
    .finance-filter-grid { grid-template-columns: 1fr; }
    .finance-filter-grid .finance-groupings { grid-column: auto; grid-template-columns: 1fr; }
    .finance-filter-controls { grid-template-columns: 1fr; }
    .finance-summary { grid-template-columns: 1fr; }
    .scan-history-item { grid-template-columns: 82px minmax(0, 1fr); align-items: start; }
    .scan-history-item .danger-button { grid-column: 2; justify-self: start; }
    .scan-viewer { padding: 16px; }
    .scan-viewer-stage { min-height: 300px; max-height: calc(100vh - 250px); }
}