/* Custom application styles go here. Tabler provides the base design system. */

/* .notes-panel's height is computed in JS to fill the viewport exactly, but leftover margins
   further down the page (e.g. .page-body's bottom margin) still add a few px past the
   viewport — enough to trigger a page scrollbar. Disabling document scroll clips that residue
   instead of showing a scrollbar; all real scrolling happens inside .notes-panel-column. Scoped
   to the notes page only (via body.notes-page) so other pages keep normal document scrolling. */
html:has(body.notes-page),
body.notes-page {
    height: 100%;
    overflow: hidden;
}

.validation-summary-valid {
    display: none;
}

[x-cloak] {
    display: none !important;
}

.page-wrapper .page-header {
    
}

.page-body {
    margin-top: 0;
}

.page-body > .container-fluid {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.notes-app {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.notes-panel {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr;
    /* Height is set in px by notes.js (resizeNotesPanel), computed from the viewport — not
       flex-grown — so it stays a real, bounded number regardless of note content length. */
}

.notes-panel-column {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}

.note-detail-column {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    border-left: 2px solid #066fd1;
}

.note-detail-header {
    flex-shrink: 0;
}

.note-detail-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.note-content {
    max-width: 100%;
}

.note-content img {
    max-width: 100%;
}

.note-code-block {
    position: relative;
    margin-bottom: 1rem;
    border-radius: 6px;
    overflow: hidden;
}

.note-code-block pre {
    margin: 0;
    max-width: 100%;
    font-size: 1em;
}

.note-code-block pre code.hljs {
    padding: 0.75rem 3rem 0.75rem 0.75rem;
    font-size: 1em;
}

.note-code-copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #c9d1d9;
}

.note-code-copy:hover {
    background-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}