/* Manage and admin pages: plain, dense and quick to scan. No decoration beyond the tab bar. */

.manage-head { margin-bottom: 1.25rem; }

.manage-tabs {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    /* Without this, overflow-x makes y scroll too, and the tabs' -1px margin shows a vertical scrollbar. */
    overflow-y: hidden;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.manage-tab {
    margin-bottom: -1px;
    padding: 0.5rem 0.9rem;
    border-bottom: 2px solid transparent;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.manage-tab:hover { color: var(--mud-palette-text-primary); }
.manage-tab.active { border-bottom-color: var(--mud-palette-primary); color: var(--mud-palette-text-primary); }
.manage-subtabs { margin-top: 0.25rem; font-size: 0.9rem; }
.manage-subtabs .manage-tab { padding: 0.35rem 0.75rem; }

/* A section on a manage page: a heading and its content, spaced consistently. */
.manage-section { margin-bottom: 2rem; }
.manage-section > .mud-typography-h5 { margin-bottom: 0.5rem; }

/* Tables of inline-editable rows. */
.manage-table td, .manage-table th { vertical-align: middle; }
.manage-table .mud-input-control { margin: 0; }

/* A row in a list of roles. */
.role-row { padding: 0.75rem 1rem; }
.role-row + .role-row { border-top: 1px solid var(--mud-palette-lines-default); }

.step-done { color: var(--mud-palette-success); }
.logo-preview { padding: 0.25rem; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; background: #fff; }

.row-editing { background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent); }

/* The gate: used on a phone in the dark, so big targets and unmistakable status. */
.gate-input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-family: Menlo, Consolas, monospace;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
}
.gate-input:focus { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.gate-spot { font-size: 1.75rem; font-weight: 700; }
.gate-showing { text-transform: none; text-align: left; }

/* A form field that grows to fit a row but stops at a sensible width. Class (not Style) so it lands on the control. */
.field-grow { flex: 1 1 14rem; min-width: 0; max-width: 24rem; }

/* Reports: headline figures above the tables. */
.report-date { flex: 0 1 11rem; }
.report-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; }
.report-tile { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 1rem; }
.report-tile-label { color: var(--mud-palette-text-secondary); font-size: 0.85rem; font-weight: 500; }
.report-tile-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.report-total td { font-weight: 600; }
.report-ledger { max-width: 32rem; }

/* An invoice (InvoiceView): reads like a paper one, and prints as one without the app around it. */
.invoice { max-width: 52rem; padding: 1.5rem; }
.invoice-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.invoice-meta td { padding: 0.1rem 1rem 0.1rem 0; }
.invoice-meta td:first-child { color: var(--mud-palette-text-secondary); }
.invoice-lines { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.invoice-lines th, .invoice-lines td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--mud-palette-lines-default); }
.invoice-lines th { text-align: left; font-weight: 600; }
.invoice-lines .num { text-align: right; white-space: nowrap; }
.invoice-lines tfoot td { border-bottom: none; }
.invoice-lines .invoice-total td { font-weight: 700; }

@media print {
    .mud-appbar, .mud-drawer, .manage-head, .no-print { display: none !important; }
    .mud-main-content { padding: 0 !important; }
    .invoice { border: none !important; box-shadow: none !important; padding: 0; max-width: none; }
}

/* Message threads (MessageThread): the viewer's own messages sit to the right in the accent tint. */
.message-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.message {
    max-width: min(42rem, 92%);
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--di-line);
    border-radius: 10px;
    background: var(--di-surface);
}
.message-mine {
    align-self: flex-end;
    border-color: color-mix(in srgb, var(--di-accent) 45%, var(--di-line));
    background: color-mix(in srgb, var(--di-accent) 8%, var(--di-surface));
}
.message-meta { font-size: 0.85rem; margin-bottom: 0.2rem; }
.message-body { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Conversation lists beside a thread. */
.conversation-list { display: flex; flex-direction: column; gap: 0.25rem; }
.conversation-item {
    display: block;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--di-line);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    background: var(--di-surface);
}
.conversation-item:hover { border-color: var(--di-line-strong); }
.conversation-item.active { border-color: var(--di-accent); }
.conversation-item.unread .conversation-subject { font-weight: 700; }
.conversation-item .conversation-preview { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unread-dot {
    display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%;
    background: var(--di-primary); margin-right: 0.35rem; vertical-align: middle;
}

/* The rich text editor (RichTextEditor, Quill's "snow" theme) in the app's palette, light and dark. */
.rich-text .ql-toolbar.ql-snow,
.rich-text .ql-container.ql-snow { border-color: var(--mud-palette-lines-inputs); }
.rich-text .ql-toolbar.ql-snow { border-radius: 4px 4px 0 0; background: var(--mud-palette-background-gray); }
.rich-text .ql-container.ql-snow { border-radius: 0 0 4px 4px; font-family: var(--font-body); font-size: 1rem; }
.rich-text .ql-editor { min-height: 18rem; color: var(--mud-palette-text-primary); }
.rich-text .ql-editor.ql-blank::before { color: var(--mud-palette-text-secondary); font-style: normal; }
.rich-text .ql-snow .ql-stroke { stroke: var(--mud-palette-text-primary); }
.rich-text .ql-snow .ql-fill { fill: var(--mud-palette-text-primary); }
.rich-text .ql-snow .ql-picker { color: var(--mud-palette-text-primary); }
.rich-text .ql-snow .ql-picker-options,
.rich-text .ql-snow .ql-tooltip { background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border-color: var(--mud-palette-lines-default); }
.rich-text .ql-snow button:hover .ql-stroke, .rich-text .ql-snow .ql-active .ql-stroke { stroke: var(--mud-palette-primary); }
.rich-text .ql-snow button:hover .ql-fill, .rich-text .ql-snow .ql-active .ql-fill { fill: var(--mud-palette-primary); }
.rich-text .ql-editor img { cursor: pointer; }

/* Image grids: the library page and the picker dialog. */
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; }
.image-grid-picker { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.5rem; max-height: 22rem; overflow-y: auto; }
.image-card { overflow: hidden; }
.image-card-thumb { display: block; aspect-ratio: 4 / 3; background: var(--mud-palette-background-gray); }
.image-card-thumb img, .image-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-tile {
    aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden;
    background: var(--mud-palette-background-gray); cursor: pointer;
}
.image-tile.selected { border-color: var(--mud-palette-primary); }
.image-picker-preview img { max-height: 10rem; max-width: 100%; border-radius: 4px; }
.cover-preview { width: 12rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }