/* App-wide component classes that several pages share.
 *
 * Lives outside Blazor's per-component scoped CSS so the rules apply
 * regardless of which page renders the markup. Loaded as a plain
 * stylesheet from index.html — bypasses the Tailwind compiler so dev
 * and prod images don't drift (the Dockerfile rewrites tailwind.src.css
 * at build time, and the dev runtime uses the on-disk source as-is).
 *
 * Naming follows the iOS-styled component vocabulary used elsewhere:
 *   .field-*       — labelled form inputs
 *   .ghost-btn     — secondary action, low-emphasis
 *   .destructive-btn — irreversible action (red palette)
 *   .pill--subtle  — informational tag inside a row
 *   .section-header — iOS-style group title above an .ios-list
 */

.section-header {
    margin: 18px 16px 6px;
    color: var(--c-text-ter);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-ter);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.field-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--c-text) 15%, transparent);
    background: var(--c-bg-sec, color-mix(in srgb, var(--c-text) 6%, transparent));
    color: var(--c-text);
    font-size: 16px;
    line-height: 1.3;
}

.field-input:focus {
    outline: 2px solid var(--color-ios-blue, #007AFF);
    outline-offset: 1px;
}

.ghost-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 10px;
    background: transparent;
    color: var(--c-text);
    border: 1px solid color-mix(in srgb, var(--c-text) 15%, transparent);
    font-size: 14px;
    font-weight: 500;
}

.destructive-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-ios-red, #FF3B30) 12%, transparent);
    color: var(--color-ios-red, #FF3B30);
    border: none;
    font-size: 15px;
    font-weight: 500;
    width: 100%;
}

.destructive-btn:hover,
.destructive-btn:active {
    background: color-mix(in srgb, var(--color-ios-red, #FF3B30) 20%, transparent);
}

/* Compact variant of the global .primary-btn used inside list rows so
   the row height stays compact and the action sits flush with the text. */
.primary-btn--compact {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 999px;
}

/* Small inline tag inside a row — "Admin", "Vous", role labels, etc. */
.pill--subtle {
    display: inline-block;
    background: color-mix(in srgb, var(--c-text) 10%, transparent);
    color: var(--c-text-sec, var(--c-text));
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
}

/* Hidden <input type="file"> elements that page-level Razor markup
   triggers programmatically via harmonyMobile.clickElement. Lives
   here (not in scoped page CSS) because Blazor's <InputFile>
   component renders its own <input> without inheriting the page's
   scoped-CSS attribute — a scoped rule wouldn't match and the
   browser would render the input with its native "no file chosen"
   affordance leaking into the layout. */
.thread-composer__hidden-file {
    display: none;
}