/**
 * Filament brand accents — customer + admin panels.
 * Typography matches public: system sans (--font-wu).
 *
 * Customer: olive interactive primary; yellow only on solid primary CTAs.
 * Admin: brand surfaces via filament-admin-shell.css; muted rose primary in AdminPanelProvider
 * (no yellow CTA overrides — rose handles interactive + solid primary).
 */

/* ===== Shared panel tokens + system font (public parity) ===== */

/* Override Filament layout :root { --font-family: 'system-ui' } (quoted generic is invalid) */
:root,
.fi-body {
    --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.fi-panel-customer,
.fi-panel-admin {
    --brand-structure: 67 69 69;
    --radius-wu-card: 12px;
    --radius-wu-button: 6px;
    --font-wu: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-poppins: var(--font-wu);
    --font-family: var(--font-wu);
    font-family: var(--font-wu);
    font-synthesis: none;
}

.fi-panel-customer {
    --dashboard-primary: 101 95 0;
    --dashboard-on-primary-container: 81 76 0;
    --dashboard-primary-container: 255 230 0;
    --brand-accent: var(--dashboard-primary);
    --brand-accent-hover: var(--dashboard-on-primary-container);
    --brand-accent-muted: 245 240 200;
    --brand-cta: 255 230 0;
    --brand-cta-hover: 230 207 0;
}

body.fi-body.fi-panel-customer,
body.fi-body.fi-panel-admin,
.fi-panel-customer .fi-layout,
.fi-panel-admin .fi-layout,
.fi-panel-customer .fi-main,
.fi-panel-admin .fi-main,
.fi-panel-customer .fi-sidebar,
.fi-panel-admin .fi-sidebar,
.fi-panel-customer .fi-topbar,
.fi-panel-admin .fi-topbar {
    font-family: var(--font-wu) !important;
}

.fi-panel-customer .fi-btn,
.fi-panel-admin .fi-btn {
    font-family: var(--font-wu);
    border-radius: var(--radius-wu-button, 4px);
}

/* Solid primary CTAs: yellow fill (customer only) */
.fi-panel-customer .fi-btn.fi-btn-color-primary:not(.fi-btn-outlined):not(.fi-btn-ghost) {
    --c-400: var(--brand-cta);
    --c-500: var(--brand-cta);
    --c-600: var(--brand-cta-hover);
    background-color: rgb(var(--brand-cta)) !important;
    border: 1px solid rgb(var(--brand-structure)) !important;
    color: rgb(var(--brand-structure)) !important;
    box-shadow: none;
}

.fi-panel-customer .fi-btn.fi-btn-color-primary:not(.fi-btn-outlined):not(.fi-btn-ghost):hover {
    background-color: rgb(var(--brand-cta-hover)) !important;
    border-color: rgb(var(--brand-structure)) !important;
    color: rgb(var(--brand-structure)) !important;
}

/* Outlined / ghost primary: olive, not yellow */
.fi-panel-customer .fi-btn.fi-btn-color-primary.fi-btn-outlined,
.fi-panel-customer .fi-btn.fi-btn-color-primary.fi-btn-ghost {
    --c-400: var(--dashboard-primary);
    --c-500: var(--dashboard-primary);
    --c-600: var(--dashboard-on-primary-container);
    color: rgb(var(--dashboard-primary)) !important;
}

.fi-panel-customer .fi-header-heading,
.fi-panel-customer .fi-header-subheading,
.fi-panel-customer .fi-section-header-heading,
.fi-panel-customer .fi-simple-header-heading,
.fi-panel-admin .fi-header-heading,
.fi-panel-admin .fi-header-subheading,
.fi-panel-admin .fi-section-header-heading,
.fi-panel-admin .fi-simple-header-heading {
    font-family: var(--font-wu);
}

/* Cap Filament header chrome at medium (500) for visual hierarchy */
.fi-panel-customer .fi-header-heading,
.fi-panel-customer .fi-simple-header-heading,
.fi-panel-customer .fi-section-header-heading,
.fi-panel-admin .fi-header-heading,
.fi-panel-admin .fi-simple-header-heading,
.fi-panel-admin .fi-section-header-heading {
    font-weight: 500;
}

.fi-panel-customer .font-bold,
.fi-panel-customer .font-semibold,
.fi-panel-admin .font-bold,
.fi-panel-admin .font-semibold {
    font-weight: 500 !important;
}

.fi-panel-customer .fi-header-heading,
.fi-panel-customer .fi-header-subheading,
.fi-panel-customer .fi-section-header-heading {
    color: rgb(var(--brand-structure));
}

.fi-panel-customer .fi-input,
.fi-panel-customer .fi-select-input,
.fi-panel-customer .fi-textarea,
.fi-panel-admin .fi-input,
.fi-panel-admin .fi-select-input,
.fi-panel-admin .fi-textarea {
    font-family: var(--font-wu);
}

.fi-panel-customer .fi-input,
.fi-panel-customer .fi-select-input,
.fi-panel-customer .fi-textarea {
    color: rgb(var(--brand-structure));
}

.fi-panel-customer .fi-input-wrp:focus-within {
    border-color: rgb(var(--dashboard-primary)) !important;
    box-shadow: 0 0 0 3px rgb(var(--dashboard-primary) / 0.15) !important;
}

.fi-panel-customer .fi-fo-field-wrp-label,
.fi-panel-admin .fi-fo-field-wrp-label {
    font-family: var(--font-wu);
    font-weight: 500;
}

.fi-panel-customer .fi-fo-field-wrp-label {
    color: rgb(var(--brand-structure));
}

/* Sub-nav underline: olive */
.fi-panel-customer .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active {
    border-bottom-color: rgb(var(--dashboard-primary)) !important;
}

.fi-panel-customer .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-panel-customer .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-icon {
    color: rgb(var(--brand-structure)) !important;
    font-weight: 500;
}

.dark .fi-panel-customer .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
.dark .fi-panel-customer .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-icon {
    color: rgb(var(--dashboard-primary)) !important;
}

/* User avatar: structure, not yellow disc */
.fi-panel-customer .fi-user-avatar {
    background-color: rgb(var(--dashboard-primary)) !important;
    color: #ffffff !important;
}

/* ===== Public marketing: Filament controls on coffee/dark surfaces ===== */

.app-shell-brand .fi-btn {
    font-family: var(--font-wu);
    border-radius: var(--radius-wu-button, 4px);
}

.app-shell-brand .fi-btn-color-primary {
    --c-400: var(--brand-accent, 255 230 0);
    --c-500: var(--brand-accent, 255 230 0);
    --c-600: var(--brand-accent-hover, 230 207 0);
    color: rgb(var(--brand-structure, 67 69 69)) !important;
}

.app-shell-brand .fi-btn.fi-btn-color-primary:not(.fi-btn-outlined) {
    background-color: rgb(var(--yellow, 255 230 0)) !important;
    border: 1px solid rgb(var(--dark-gray, 67 69 69)) !important;
    color: rgb(var(--dark-gray, 67 69 69)) !important;
    box-shadow: none;
}

.app-shell-brand .fi-btn.fi-btn-color-primary:not(.fi-btn-outlined):hover {
    background-color: rgb(var(--yellow-hover, 230 207 0)) !important;
    border-color: rgb(var(--dark-gray, 67 69 69)) !important;
    color: rgb(var(--dark-gray, 67 69 69)) !important;
}

.app-shell-brand .fi-btn-color-primary:hover {
    color: rgb(var(--brand-structure, 67 69 69)) !important;
}

.app-shell-brand .surface-island .fi-btn-color-gray,
.app-shell-brand .card-base .fi-btn-color-gray,
.app-shell-brand .auth-card .fi-btn-color-gray {
    color: rgb(var(--brand-structure, 67 69 69)) !important;
    --c-300: var(--brand-coffee-border, 204 197 191);
    --c-400: var(--brand-structure, 67 69 69);
}

.app-shell-brand .auth-card .fi-input-wrp,
.app-shell-brand .card-base .fi-input-wrp,
.app-shell-brand .surface-island .fi-input-wrp {
    background-color: rgb(var(--white, 255 255 255));
    border-color: rgb(var(--brand-coffee-border, 204 197 191));
}

.app-shell-brand .fi-input,
.app-shell-brand .fi-select-input,
.app-shell-brand .fi-textarea {
    font-family: var(--font-wu);
    color: rgb(var(--brand-structure, 67 69 69));
}

.app-shell-brand .fi-input-wrp:focus-within {
    border-color: rgb(var(--brand-structure, 67 69 69));
    box-shadow: 0 0 0 3px rgb(var(--brand-structure, 67 69 69) / 0.1);
}

.app-shell-brand .auth-card .fi-fo-field-wrp-label,
.app-shell-brand .card-base .fi-fo-field-wrp-label {
    color: rgb(var(--brand-structure, 67 69 69));
}

.app-shell-brand .auth-card .fi-form-actions .fi-btn,
.app-shell-brand .auth-card .fi-ac-btn-action {
    width: 100%;
}

.app-shell-brand .fi-link {
    color: rgb(var(--brand-structure, 67 69 69));
    text-decoration: underline;
    text-underline-offset: 2px;
}

.app-shell-brand main:not(.auth-page-shell) .fi-link {
    color: #ffffff;
}

.app-shell-brand .auth-card .fi-link,
.app-shell-brand .card-base .fi-link,
.app-shell-brand .surface-island .fi-link {
    color: rgb(var(--brand-structure, 67 69 69));
}

/* ===== Rich editor body: spacing + image alignment (Trix) ===== */
.app-shell-brand .trix-content {
    min-height: 250px;
}

/* ===== TipTap editor fixed height ===== */
.app-shell-brand .tiptap-editor .ProseMirror {
    min-height: 400px;
    max-height: 65vh;
    overflow-y: auto;
}
.app-shell-brand .tiptap-editor .ProseMirror img[height] {
    height: unset;
}

.fi-panel-admin .fi-fo-rich-editor trix-editor,
.fi-panel-customer .fi-fo-rich-editor trix-editor {
    font-family: var(--font-wu);
    font-size: 1rem;
    line-height: 1.7;
    min-height: 16rem;
    color: rgb(var(--brand-structure, 67 69 69));
}

.fi-panel-admin .fi-fo-rich-editor trix-editor > *,
.fi-panel-customer .fi-fo-rich-editor trix-editor > * {
    margin-block: 0.75em;
}

.fi-panel-admin .fi-fo-rich-editor trix-editor > :first-child,
.fi-panel-customer .fi-fo-rich-editor trix-editor > :first-child {
    margin-block-start: 0;
}

.fi-panel-admin .fi-fo-rich-editor trix-editor > :last-child,
.fi-panel-customer .fi-fo-rich-editor trix-editor > :last-child {
    margin-block-end: 0;
}

.fi-panel-admin .fi-fo-rich-editor trix-editor div,
.fi-panel-customer .fi-fo-rich-editor trix-editor div {
    margin-block: 0.5em;
}

.fi-panel-admin .fi-fo-rich-editor trix-editor br + br,
.fi-panel-customer .fi-fo-rich-editor trix-editor br + br {
    display: block;
    content: "";
    margin-top: 0.5em;
}

/* Inline / block images inside editor */
.fi-panel-admin .fi-fo-rich-editor trix-editor img,
.fi-panel-customer .fi-fo-rich-editor trix-editor img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1rem auto;
    border-radius: 0.75rem;
    object-fit: contain;
}

.fi-panel-admin .fi-fo-rich-editor trix-editor figure.attachment,
.fi-panel-customer .fi-fo-rich-editor trix-editor figure.attachment {
    display: block;
    margin: 1.25rem auto;
    max-width: 100%;
    text-align: center;
}

.fi-panel-admin .fi-fo-rich-editor trix-editor figure.attachment img,
.fi-panel-customer .fi-fo-rich-editor trix-editor figure.attachment img {
    margin: 0 auto;
    max-width: min(100%, 40rem);
}

.fi-panel-admin .fi-fo-rich-editor trix-editor figcaption,
.fi-panel-customer .fi-fo-rich-editor trix-editor figcaption {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgb(107 114 128);
    text-align: center;
}

.fi-panel-admin .fi-fo-rich-editor trix-editor a,
.fi-panel-customer .fi-fo-rich-editor trix-editor a {
    color: rgb(37 99 235);
    text-underline-offset: 2px;
}

.fi-panel-admin .fi-fo-rich-editor trix-editor h1,
.fi-panel-admin .fi-fo-rich-editor trix-editor h2,
.fi-panel-admin .fi-fo-rich-editor trix-editor h3,
.fi-panel-customer .fi-fo-rich-editor trix-editor h1,
.fi-panel-customer .fi-fo-rich-editor trix-editor h2,
.fi-panel-customer .fi-fo-rich-editor trix-editor h3 {
    margin-block: 1.25em 0.5em;
    line-height: 1.3;
    font-weight: 600;
}