/* admin.css — app-specific styles for the Filament admin, served as a plain
   stylesheet (loaded via a HEAD render hook). Render-hook and custom page views
   bypass Filament's Tailwind build, so atomic utilities don't apply there — these
   hand-written classes do, which keeps the blade markup free of inline styles.
   Prefix: kb-. Colours use currentColor/opacity so they read on light and dark. */

/* --- Brand wordmark (filament/brand, branding preview) ------------------- */
.kb-wordmark { display: inline-flex; flex-direction: column; align-items: stretch; line-height: 1.05; }
.kb-wordmark__name { font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; color: var(--gray-950, #16161a); }
.kb-wordmark__tagline { font-size: .6875rem; font-weight: 500; opacity: .6; margin-top: .12rem; text-align: right; }
.kb-wordmark__brand { font-family: 'Roboto Slab', Georgia, serif; }

/* --- Copy-URL row (email settings, connect guide) ------------------------ */
.kb-copy-row { display: flex; align-items: center; gap: .5rem; }
.kb-code { flex: 1; padding: .5rem .75rem; border-radius: .5rem; background: color-mix(in oklab, currentColor 6%, transparent); font-family: var(--font-mono, ui-monospace, monospace); word-break: break-all; }
.kb-hint { max-width: none; opacity: .6; font-size: .8125rem; margin-top: .6rem; }

/* --- Deploy version (sidebar footer) ------------------------------------- */
.kb-deploy { display: flex; align-items: center; gap: .4rem; padding: .55rem .9rem; font-size: .6875rem; line-height: 1; opacity: .55; border-top: 1px solid rgba(128, 128, 128, .18); }
.kb-deploy__icon { width: .85rem; height: .85rem; flex: none; }
.kb-deploy__sha { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.kb-deploy__time { margin-left: auto; white-space: nowrap; }

/* --- Branding preview page ----------------------------------------------- */
.kb-brand-preview { display: flex; flex-direction: column; gap: 1.25rem; font-size: .875rem; }
.kb-field-label { opacity: .6; margin-bottom: .4rem; }
.kb-logo-preview { height: 2.25rem; }
.kb-inline-row { display: flex; align-items: center; gap: .6rem; }
.kb-swatch { width: 1.5rem; height: 1.5rem; display: block; }

/* --- Note detail view ---------------------------------------------------- */
.kb-note { display: flex; flex-direction: column; gap: 1rem; font-size: .875rem; }
.kb-note__meta { display: flex; flex-wrap: wrap; column-gap: 1.5rem; row-gap: .25rem; }
.kb-note__label { font-weight: 500; }
.kb-note__body { white-space: pre-wrap; border-radius: .5rem; padding: 1rem; background: color-mix(in oklab, currentColor 6%, transparent); }
.kb-note__ref { font-size: .75rem; opacity: .5; }

/* --- Realm SMTP details grid (email settings) ---------------------------- */
.kb-smtp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); column-gap: 2rem; row-gap: .5rem; font-size: .875rem; }
.kb-smtp-grid dt { opacity: .6; }

/* --- Prose guide (connect guide) ----------------------------------------- */
.kb-guide { max-width: none; font-size: .875rem; }
.kb-label { font-weight: 600; }
.kb-label-tight { font-weight: 600; margin-bottom: .25rem; }

/* --- Health alerts banner (dashboard) ------------------------------------ */
.kb-alerts { display: flex; flex-direction: column; gap: .5rem; }
.kb-alert { display: flex; flex-wrap: wrap; gap: .2rem .75rem; align-items: baseline; padding: .6rem .8rem; border-radius: .5rem; font-size: .875rem; border: 1px solid; }
.kb-alert--danger { color: var(--danger-700, #b91c1c); border-color: color-mix(in oklab, var(--danger-500, #ef4444) 35%, transparent); background: color-mix(in oklab, var(--danger-500, #ef4444) 8%, transparent); }
.kb-alert--warning { color: var(--warning-700, #b45309); border-color: color-mix(in oklab, var(--warning-500, #f59e0b) 35%, transparent); background: color-mix(in oklab, var(--warning-500, #f59e0b) 8%, transparent); }
.kb-alert__title { font-weight: 600; }
.kb-alert__msg { opacity: .85; }

/* --- Help / documentation pages ------------------------------------------ */
.kb-help { max-width: 60rem; }
/* Inline code as a subtle pill; code blocks as a tinted, scrollable box.
   admin.css loads after Filament's theme, so these win the fi-prose tie. */
.kb-help code {
    background: color-mix(in oklab, currentColor 8%, transparent);
    padding: .1em .35em;
    border-radius: .35rem;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .875em;
    word-break: break-word;
}
.kb-help pre {
    background: color-mix(in oklab, currentColor 6%, transparent);
    padding: .85rem 1rem;
    border-radius: .6rem;
    overflow-x: auto;
}
.kb-help pre code { background: none; padding: 0; }

/* --- Table repeater: unlock the table layout sooner ----------------------
   Filament's table repeater only switches from its stacked mobile fallback to
   a real table when its CONTAINER is >= 36rem (it's a container query, not a
   viewport one). In a half-width "aside" section (e.g. Identifying signals on
   the Client form) the container falls just short, so rows stack and the
   Kind/Value headers hide. Re-emit Filament's own table-mode rules at a lower
   26rem threshold — identical styling, just triggered earlier. admin.css loads
   after Filament's theme, so these win at equal specificity. */
@container (min-width: 26rem) {
    .fi-fo-table-repeater > table { display: table; }
    .fi-fo-table-repeater > table > thead { display: table-header-group; }
    .fi-fo-table-repeater > table > tbody { display: table-row-group; }
    .fi-fo-table-repeater > table > tbody > tr { padding: 0; display: table-row; }
    .fi-fo-table-repeater > table > tbody > tr > td {
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 2);
        display: table-cell;
    }
    .fi-fo-table-repeater > table > tbody > tr > td.fi-hidden { display: table-cell; }
    .fi-fo-table-repeater > table > tbody > tr > td .fi-fo-field,
    .fi-fo-table-repeater > table > tbody > tr > td .fi-in-entry { row-gap: 0; }
    .fi-fo-table-repeater > table > tbody > tr > td .fi-fo-field-label-content,
    .fi-fo-table-repeater > table > tbody > tr > td .fi-in-entry-label { display: none; }
    .fi-fo-table-repeater > table .fi-fo-table-repeater-actions {
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 2);
    }
}

/* Strip the repeater table's own card chrome so it reads like the plain data
   tables (Notes, Sources): it already lives inside a section card, so its
   rounded ring is a double border. Drop the ring/radius/fill and the vertical
   column dividers; keep the muted header + horizontal row rules. */
.fi-fo-table-repeater > table {
    border-radius: 0;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    background-color: transparent;
}
.fi-fo-table-repeater > table > thead > tr > th {
    background-color: transparent;
    border-inline-width: 0;            /* no vertical dividers between headers */
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    color: var(--gray-500);           /* muted, like .fi-ta-header-cell */
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
}
.fi-fo-table-repeater > table > thead > tr > th:where(.dark, .dark *) {
    color: var(--gray-400);
}

/* Let the signals table sit flush in its card: drop the section-content top/side
   padding (keep the bottom), and the table's own divider lines, so it reads as a
   clean inline table rather than a boxed-in grid. Scoped via :has() to the section
   that actually holds a table repeater, so other sections keep their padding. */
.fi-section:has(.fi-fo-table-repeater) > .fi-section-content-ctn > .fi-section-content {
    padding-top: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
}
.fi-fo-table-repeater > table > :not(:last-child),
.fi-fo-table-repeater > table > tbody > :not(:last-child) {
    border-block-width: 0;
}

/* --- Small shared utilities ---------------------------------------------- */
.kb-muted { opacity: .7; }
.kb-mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.kb-mb { margin-bottom: 1rem; }