/* Claude Opus 4.6 2026-03-29_20-30-00 */

/* Page background: very light grey so white-background elements
   (label header, input fields, entry cards) lift off the page.
   #f7f7f7 is subtle — barely perceptible as grey, just enough
   to create contrast with #fff cards and inputs. */
body {
   background: #f7f7f7;
   margin: 0;
   padding-bottom: 56px;
   /* for footer */
}

/* -----------------------------------------------------------------------
   Label header — mimics the physical QR label that was scanned.
   Three-column grid: QR symbol | logo | serial numbers.
   Centre column (logo) is always centred regardless of side column
   content widths. Side columns align inward toward the logo.
   Border and radius match the card styling used elsewhere (.jv-entry,
   inputs, modal cards): 1px solid #ccc, 6px radius, white background.
   width: fit-content shrinks the header to its content plus padding,
   margin: 0 auto centres it horizontally on the page.
   ----------------------------------------------------------------------- */

#label-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    background: #fff;
    color: #111;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0 auto 1rem auto;
    width: fit-content;
}

/* Left cell: QR icon SVG, right-aligned toward the logo.
   Fixed width/height for consistent sizing across all browsers —
   replaces the font-size approach used with the Unicode character.
   SVG scales to fit via viewBox. */
#qr-label-qr-symbol {
    justify-self: end;
    width: 44px;
    height: 44px;
    margin-right: 24px;
}

#qr-label-qr-symbol svg {
    width: 100%;
    height: 100%;
    display: block;
}


/* Centre cell: logo image, always centred in the grid.
   height: 40px is the starting point — adjust as needed.
   grayscale + high contrast crushes the dark blue to pure black,
   matching the printed label's black & white rendering. */
#qr-label-logo {
    justify-self: center;
}

#qr-label-logo img {
    height: 40px;
    width: auto;
    display: block;
    filter: grayscale(1) contrast(100);
    transform: translateY(-1px);   /* optical nudge — image sits slightly low */
}

/* Right cell: two-row serial number, left-aligned away from logo
   but text centred within the cell so the two rows (different
   digit counts) stack neatly. Georgia serif — plain oval zero,
   no slash or dot — standing in for "Ocean to Ocean" from the
   printed NIIMBOT label until a closer match is sourced. */
#qr-label-serial {
    justify-self: start;
    text-align: center;
    margin-left: 24px;
}

/* Serial number rows: both 18px bold serif, matching the printed
   label's visual weight. Same size for both rows — the physical
   label treats hi and low as equally prominent identifiers. */
#osmium_serial_hi,
#osmium_serial_low {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    font-weight: 700;
}

/* ----------------------------------------------------------------------- */

.container {
  padding: 1rem;
}
/* Labels */
label {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 6px;
}

/* Shared input styles */
textarea,
input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 15px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    color: #111;
    outline: none;
}

textarea {
    resize: vertical;
}

/* Focus ring */
textarea:focus,
input[type="text"]:focus {
    border-color: #888;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* Placeholder colour */
::placeholder {
    color: #aaa;
}

/* Buttons */
button {
    font-family: inherit;
    font-size: 14px;
    padding: 7px 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    color: #111;
    cursor: pointer;
}

button:hover {
    background: #f5f5f5;
}

button:active {
    transform: scale(0.98);
}

/* Spacing between form fields */
.field {
    margin-bottom: 1rem;
}

/* Button row */
.actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* -----------------------------------------------------------------------
   Device tags — persistent tags shared by registration and journal.
   Sits between register/reference and journal in the page layout.
   Max-width matches other form sections for visual consistency.
   Hidden on load — device-tags.js shows it via htmx:afterSettle.
   ----------------------------------------------------------------------- */

.device-tags {
    max-width: 520px;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

/* Field row: label above, input + clear button inline.
   Same pattern as .reg-field-row for visual consistency. */
.dt-field-row {
    margin-bottom: 0.5rem;
}

/* Input and clear button side by side.
   Input takes remaining space, clear button fixed width. */
.dt-field-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dt-field-input-wrap input[type="text"] {
    flex: 1;
}

/* Per-field clear button: matches .reg-field-clear styling.
   Small, unobtrusive, no border. */
.dt-field-clear {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 6px;
    color: #999;
    line-height: 1;
    flex-shrink: 0;
}

.dt-field-clear:hover {
    color: #333;
}

/* Persistence note inline in the label: "User tag (persistent)".
   Same visual treatment as .reg-persist-inline — smaller, lighter
   than the label text to signal metadata, not the field name. */
.dt-persist-note {
    font-size: 12px;
    color: #999;
}

/* -----------------------------------------------------------------------
   Journal section — independent form below registration/reference.
   Max-width caps the form on wide screens, consistent with the
   registration fields above.
   ----------------------------------------------------------------------- */

.journal-section {
    max-width: 520px;
}

/* Scan button row: sits below the journal textarea, right-aligned.
   Positioned underneath the textarea to signal that text input is the
   primary action, with scanning as a secondary helper. Right-aligned
   to contrast with the registration scan button which sits on the left. */
.journal-scan-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

/* Scan button: same base styling as all buttons (from labels.css global),
   no additional decoration needed. Class exists for targeting if styling
   diverges in a future design pass. */
.journal-scan-btn {
    white-space: nowrap;
}

/* -----------------------------------------------------------------------
   Journal view — paged display of existing journal entries.
   Sits below journal input within the same fragment.
   Max-width matches .journal-section to keep the layout consistent.
   ----------------------------------------------------------------------- */

.journal-view {
    max-width: 520px;
    margin-top: 1.5rem;
}

.journal-view-heading {
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 0.75rem 0;
}

/* Controls row: user tag filter and search input side by side.
   Wraps on very narrow screens so each control gets full width. */
.jv-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* Filter dropdown wrapper: fixed width so it doesn't fight the search
   input for space. Label above, select below. */
.jv-filter-wrap {
    flex: 0 0 auto;
    min-width: 120px;
}

/* Search input wrapper: takes remaining space in the row. */
.jv-search-wrap {
    flex: 1;
    min-width: 150px;
}

/* Search input and clear button sit side by side.
   Reuses .reg-field-clear styling for the ✕ button. */
.jv-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Override global select styling to match input fields.
   Native <select> for web track simplicity (Pin 3). */
.jv-filter-wrap select {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 15px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    color: #111;
}

/* Sort row: sort toggle button and future search-all button.
   Left-aligned sort, right-aligned search-all stub. */
.jv-sort-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.75rem;
}

/* Sort button: subtle styling, no heavy decoration. */
.jv-sort-btn {
    white-space: nowrap;
}

/* Search all records stub: visually distinct as disabled/future feature. */
.jv-search-all-btn {
    white-space: nowrap;
    font-size: 13px;
    color: #999;
}

/* -----------------------------------------------------------------------
   Journal entries — individual entry cards in the view list.
   Light border separates entries. Minimal padding for phone readability.
   ----------------------------------------------------------------------- */

.jv-entry {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #fff;
}

/* Entry header: timestamp left, user tag right */
.jv-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.jv-entry-time {
    font-size: 13px;
    color: #666;
}

.jv-entry-tag {
    font-size: 13px;
    color: #888;
    font-family: monospace;
}

/* Entry body: the journal text content */
.jv-entry-body {
    font-size: 14px;
    color: #222;
    line-height: 1.4;
    /* Long entries could be very tall — clamp with ellipsis for v1.1.
       Full expansion can be added in a later design pass if needed. */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Empty state message when no entries match filters */
.jv-empty {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 2rem 0;
}

/* -----------------------------------------------------------------------
   Pagination — Previous / page indicator / Next row below entries.
   Centred layout with buttons on each side of the page indicator.
   ----------------------------------------------------------------------- */

.jv-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
}

.jv-page-indicator {
    font-size: 13px;
    color: #666;
    white-space: nowrap;
}

/* Journal submit warning: "Journal entries cannot be edited".
   Matches .reg-imprint-warning in register.css — right-aligned,
   small, grey. Sits immediately above the Cancel/Submit buttons. */
.journal-submit-warning {
    text-align: right;
    font-size: 13px;
    color: #999;
    margin-top: 1.5rem;
    margin-bottom: 4px;
}

/* Override the global .actions margin-top inside the journal section.
   The global .actions rule has margin-top: 1.5rem which is appropriate
   when there is no preceding warning line. Inside .journal-section the
   warning already carries the top margin, so the actions row needs none —
   otherwise the gap between warning and buttons is doubled.
   .reg-actions in register.css is a separate rule with no margin-top,
   so registration is unaffected. */
.journal-section .actions {
    margin-top: 0;
}


/* START Claude Opus 4.6 2026-03-29_22-00-00 */
/* -----------------------------------------------------------------------
   Page footer — fixed to viewport bottom, full width, always visible.
   Dark strip with centred stub links. Body padding-bottom prevents
   the last content item from being permanently hidden behind the footer.
   Footer height is ~40px (14px text + 12px padding top/bottom + borders).
   Padding-bottom of 56px = footer height + 16px breathing room.
   ----------------------------------------------------------------------- */

#page-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #767676;
    text-align: center;
    padding: 12px 1rem;
    font-size: 14px;
    z-index: 50;
}

#page-footer a {
    color: #fff;
    text-decoration: none;
}

#page-footer a:hover {
    text-decoration: underline;
}

.footer-sep {
    color: #999;
    margin: 0 8px;
}

/* END Claude Opus 4.6 2026-03-29_22-00-00 */

/* START Claude Opus 4.6 2026-04-13_14-35-18 */
/* -----------------------------------------------------------------------
   Status banners — shared by imprint and journal write responses.
   Minimal styling to be polished later. Red for errors, green for
   success, 1em vertical spacing.
   ----------------------------------------------------------------------- */

.imprint-error,
.journal-write-error {
    color: #b71c1c;
    background: #ffebee;
    border: 1px solid #ef9a9a;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 1em 0;
    font-size: 14px;
}

.imprint-success {
    color: #1b5e20;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 1em 0;
    font-size: 14px;
}
/* END Claude Opus 4.6 2026-04-13_14-35-18 */

/* START Claude Opus 4.6 2026-04-16_11-43-34 */
/* -----------------------------------------------------------------------
   Inner loop: Login page
   Full-page centred card — no content behind it until authenticated.
   ----------------------------------------------------------------------- */

.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.login-card {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 2rem 1.5rem;
    width: 92vw;
    max-width: 360px;
    box-sizing: border-box;
}

.login-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-logo {
    height: 48px;
    margin-bottom: 0.5rem;
}

.login-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}

.login-card input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.75rem;
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.login-card button {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 15px;
    cursor: pointer;
    border: 1px solid #888;
    border-radius: 6px;
    background: #fff;
    margin-top: 0.25rem;
}

.login-error {
    margin-top: 0.75rem;
    padding: 8px 12px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    font-size: 14px;
    color: #856404;
}

/* -----------------------------------------------------------------------
   Inner loop: Authenticated dashboard
   Shown after login, before entity context is established.
   ----------------------------------------------------------------------- */

.inner-dashboard {
    margin-top: 1rem;
}

.inner-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.inner-dashboard-user {
    font-size: 14px;
    color: #666;
}

.inner-logout-btn {
    font-size: 13px;
    padding: 4px 12px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
}

.inner-dashboard-actions {
    margin-top: 1.5rem;
    text-align: center;
}

.inner-scan-btn {
    padding: 12px 24px;
    font-size: 16px;
    border: 1px solid #888;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.inner-scan-btn:disabled {
    color: #999;
    border-color: #ccc;
    cursor: default;
}

.inner-dashboard-hint {
    font-size: 13px;
    color: #999;
    margin-top: 0.75rem;
}
/* END Claude Opus 4.6 2026-04-16_11-43-34 */