html {
    padding: 0;
    height: 100%;
    overflow-x: hidden; /* prevent horizontal scroll */
}

body {
    margin: 0;
    height: 100dvh; /* full viewport height */
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr; /* header + content */
    overflow: hidden; /* no page scroll */
}

main#content {
    padding: .5rem .75rem; /* light horizontal padding */
    margin: 0 auto; /* center horizontally */
    height: 100%;
    overflow: hidden; /* only inner table should scroll */
    min-width: 0;
}

.container, main{
    width: 100%;
}

/* Compact top bar for the app page */
.topbar {
    padding: .25rem .75rem;
    background: #0172ad; /* requested primary */
    color: #fff;
    border-bottom: 1px solid var(--pico-muted-border-color);
    font-size: .95rem;
    overflow: visible; /* allow dropdown to escape */
}

.topbar ul {
    margin: 0;
}

.topbar a {
    color: #fff;
    text-decoration: none;
}

.topbar a:hover {
    opacity: .85;
}

/* Remove padding from the header that contains the nav */
.app-header {
    padding: 0;
}

.navbar-form label {
    color: inherit !important;
}

/* Autocomplete dropdown styling */
.autocomplete {
    position: relative;
    max-width: 600px;
}

.autocomplete-menu {
    position: absolute;
    z-index: 1000; /* above nav */
    top: 100%;
    left: 0;
    right: 0;
    max-height: 240px;
    overflow: auto;
    list-style: none;
    margin: .25rem 0 0 0;
    padding: .25rem 0;
    background: var(--pico-background-color);
    border: 1px solid var(--pico-muted-border-color, #ddd);
    border-radius: .375rem;
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
    display: flex;            /* ensure vertical stacking */
    flex-direction: column;   /* stack options vertically */
    text-align: left;         /* left-align text */
}

.autocomplete-menu:empty {
    display: none;
}

.autocomplete-menu li {
    padding: .5rem .75rem;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* left align content */
    gap: .5rem;
    width: 100%;                /* full width clickable area */
}

.autocomplete-menu li:hover,
.autocomplete-menu li[aria-selected="true"] {
    background: var(--pico-muted-color, #f4f4f4);
    cursor: pointer;
}

.autocomplete-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: var(--pico-secondary);
}

/* Fixed-height scroll container for the check-ins table */
.table-scroll {
    max-height: 360px;
    overflow: auto;
    border: 1px solid var(--pico-muted-border-color, #ddd);
    border-radius: .375rem;
    width: min(100%, 1000px);
    margin-inline: auto; /* center horizontally */
    scrollbar-gutter: stable both-edges; /* keep scrollbar space visible */
}

.count-badge {
    background: var(--pico-muted-color, #f4f4f4);
    border: 1px solid var(--pico-muted-border-color, #ddd);
    border-radius: 999px;
    padding: .2rem .6rem;
    font-size: .9rem;
}

/* Layout to make table fill remaining viewport space */
.app-layout {
    display: grid;
    grid-template-rows: 1fr;
    height: 100%;
    gap: .25rem;
    min-width: 0;
}

.app-layout.compact {
    height: 100%;
}


.table-scroll.fill {
    height: 100%;
    max-height: none;
    min-width: 0;
}

/* Keep the table filling the centered scroll container */
.table-scroll table { width: 100%; }

/* Visible, accessible scrollbar styling */
.table-scroll { scrollbar-width: thin; scrollbar-color: var(--pico-muted-border-color, #bbb) transparent; }
.table-scroll::-webkit-scrollbar { width: 12px; }
.table-scroll::-webkit-scrollbar-track { background: color-mix(in srgb, var(--pico-muted-border-color, #ddd) 20%, transparent); border-radius: .375rem; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--pico-muted-border-color, #bbb); border-radius: .375rem; border: 2px solid transparent; background-clip: padding-box; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--pico-muted-border-color, #bbb) 80%, #000 20%); }

/* Icon-only button used for remove/trash */
.icon-btn { padding: .35rem; line-height: 0; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn svg { display: block; }

.app-header { min-width: 0; }

/* Prevent extra spacing above/below nav search area */
.topbar ul { margin-top: 0; margin-bottom: 0; }

/* Ensure only table area scrolls */
.table-scroll { overflow: auto; }

/* Modal tweaks */
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog {
    max-width: 520px;
    width: calc(100% - 2rem);
    border: none;
    border-radius: .5rem;
    padding: 0;
}
dialog article { margin: 0; }
dialog header { padding: 1rem 1.25rem 0; }
dialog form { padding: 1rem 1.25rem 1.25rem; }

/* Navbar: two rows at all sizes - title + buttons on top, search below centered */
.topbar { display: grid; grid-template-columns: auto auto 1fr; grid-auto-rows: auto; align-items: center; gap: .5rem; }
.topbar .nav-left { grid-column: 1 / 2; grid-row: 1; display: flex; align-items: center; gap: .5rem; }
.topbar .nav-right { grid-column: 2 / 3; grid-row: 1; display: flex; align-items: center; gap: .5rem; justify-self: start; }
.topbar .nav-middle { grid-column: 1 / -1; grid-row: 2; }
.topbar .nav-middle .nav-center { justify-content: center; }