/* Logbook.css - Module-specific styles for the department logbook feed */

/* -- Create-entry modal form -------------------------------------- */

.logbook-entry-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.logbook-entry-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    align-items: end;
}

.logbook-priority-cell {
    display: flex;
    align-items: center;
    padding-bottom: var(--space-2);
}

/* The formatted box (TLP-1084): a palette of four small ghost buttons over a
   contenteditable that wears the Input atom's skin. Shared by the Add Entry modal and
   every comment composer. The formatting inside it is the same elements the feed
   renders, so the box and the feed read identically. */
.logbook-composer {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.logbook-format-palette {
    display: flex;
    gap: var(--space-1);
}

/* Pressed = the cursor sits inside that formatting (aria-pressed follows the cursor). */
.logbook-format-palette .btn[aria-pressed="true"] {
    background-color: var(--bg-surface-hover);
    border-color: var(--border-default);
}

.logbook-composer-box {
    min-height: var(--space-20);
    line-height: var(--line-height-relaxed);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-y: auto;
}

.logbook-composer-box:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
}

/* Native Ctrl+B / Ctrl+I produce <b> / <i>; make them read like the feed's marks. */
.logbook-composer-box b {
    font-weight: var(--font-weight-semibold);
}

.logbook-comment-input.logbook-composer-box {
    min-height: var(--space-16);
}

@media (max-width: 600px) {
    .logbook-entry-form-row {
        grid-template-columns: 1fr;
    }
}

/* -- Feed --------------------------------------------------------- */

.logbook-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.logbook-date-header {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-2) 0 var(--space-1);
    border-bottom: var(--border-width-1) solid var(--border-subtle);
}


/* Row header is the shared ExpandableRowHeader molecule
   (priority badge / Entry text / time / author / comment count). */

/* The entry text lives in the row and only there (TLP-1079). Folded: soft-clamp to
   a few lines so a long entry doesn't dominate the feed (TLP-601). Opened: the clamp
   lifts and the row shows the whole entry. Keyed on the panel's collapsed/expanded
   class, which ExpandablePanel flips in place. Scoped to the header
   (.expandable-header-content) so the comment rows' grow slot is never clamped.
   Change the line count via -webkit-line-clamp. */
.logbook-entry.collapsed .expandable-header-content .expandable-row-header-text--grow {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* The text is the record: selectable so staff can copy a room number or a name
   (the header is user-select: none by default). The Tab ignores a click that
   carries a selection so a drag-select does not fold the row. */
.logbook-entry .expandable-header-content .expandable-row-header-text--grow {
    user-select: text;
    cursor: text;
}

/* Opened: keep the author's line breaks (folded stays whitespace-collapsed, as before),
   and top-align the trailing slots and chevron so time / author sit on the first line
   of a tall entry instead of floating mid-block. */
.logbook-entry.expanded .expandable-header-content .expandable-row-header-text--grow {
    white-space: pre-wrap;
}

.logbook-entry.expanded .expandable-header,
.logbook-entry.expanded .expandable-header-content .expandable-row-header {
    align-items: flex-start;
}

/* An open row is capped at a fraction of the panel and normally scrolls its BODY
   (ExpandablePanel.css). Here the header IS the content, so the whole row scrolls as
   one unit inside the same cap -- otherwise a long entry clips and squeezes the
   comments to nothing. Specificity (0,4,0) beats the organism's (0,3,0) rules. */
.section-content .expandable-panel.logbook-entry.expanded {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.section-content .expandable-panel.logbook-entry.expanded > .expandable-panel-content {
    flex: 0 0 auto;
    overflow-y: visible;
}

/* -- Expanded entry detail (meta + tagged guests + comments) ------- */

.logbook-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.logbook-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.logbook-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.logbook-comments-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.logbook-thread-composer {
    padding-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-top: var(--border-width-1) solid var(--border-subtle);
}

.logbook-thread-composer-actions {
    display: flex;
    justify-content: flex-end;
}

/* Inline @room tag highlight inside the message */
.logbook-room-tag {
    font-weight: 600;
    color: var(--color-primary);
    cursor: default;
}

/* Inline marks (TLP-1080). Italic is a bare <em>; highlight is the Mark atom. The
   same red class colours the palette's Red button, so one rule carries both. */
.logbook-fmt-bold {
    font-weight: var(--font-weight-semibold);
}

.logbook-fmt-red,
.logbook-format-palette .btn.logbook-fmt-red {
    color: var(--color-error);
}

/* Tagged guest chips */
.logbook-tagged-guests {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.logbook-guest-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-body);
    background: var(--bg-layer-2);
    border-radius: var(--border-radius-md);
}

.logbook-guest-name {
    font-weight: 600;
}

.logbook-guest-room {
    color: var(--text-muted);
}

.logbook-guest-dates {
    color: var(--text-muted);
    font-style: italic;
}

/* -- Load more ---------------------------------------------------- */

.logbook-load-more {
    display: flex;
    justify-content: center;
    padding: var(--space-3);
}