/*
 * AI Cookbook brand layer for the Filament panels (client /c and staff /admin).
 * Committed, not built: the panels use Filament's published CSS plus this
 * file, injected by a head render hook. Palettes come from ->colors()
 * (App\Support\Brand); this file only does what colours cannot: display
 * type, the wordmark, the auth backdrop and one contrast fix.
 * Tokens: docs/brand.md.
 */

:root {
    --ck-forest: #0f2e20;
    --ck-green-dark: #1a4a38;
    --ck-teal: #63c3a5;
    --ck-amber: #f4a24d;
    --ck-amber-edge: #a9631a;
    --ck-cream: #f5f0e8;
    --ck-ink: #1a2a22;
    --ck-display: 'Instrument Sans', var(--font-family, 'Inter'), ui-sans-serif, system-ui, sans-serif;
}

/* Display type: Instrument Sans at 600 with tight tracking, as plujo.com. */
.fi-header-heading,
.fi-simple-header-heading,
.fi-modal-heading,
.fi-section-header-heading,
.fi-wi-stats-overview-stat-value,
.ck-wordmark {
    font-family: var(--ck-display);
    letter-spacing: -0.022em;
}
.fi-header-heading,
.fi-simple-header-heading { font-weight: 600; }

/* Wordmark */
.ck-brand { display: inline-flex; align-items: center; gap: 0.55rem; white-space: nowrap; }
.ck-mark { flex: none; display: block; }
.ck-mark-tile { fill: var(--ck-forest); }
.dark .ck-mark-tile { fill: var(--ck-green-dark); stroke: rgba(99, 195, 165, 0.45); stroke-width: 2; }
.ck-wordmark { font-size: 1.125rem; font-weight: 600; color: var(--ck-ink); }
.dark .ck-wordmark { color: var(--ck-cream); }

/* Staff panel marker: same system, amber so staff always know which side they are on. */
.ck-badge {
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ck-ink);
    background: var(--ck-amber);
    box-shadow: inset 0 0 0 1px var(--ck-amber-edge);
}

/* Footer endorsement */
.ck-footer { width: 100%; padding: 1.5rem 1rem; text-align: center; font-size: 0.75rem; color: rgb(var(--gray-500)); }
.ck-footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ck-footer a:hover { color: rgb(var(--primary-600)); }
.dark .ck-footer { color: rgb(var(--gray-400)); }
.dark .ck-footer a:hover { color: rgb(var(--primary-400)); }

/* Sign-in, password reset, invitation: cream ground with plujo.com's
   drafting grid (teal at 6% / 3%), forest in dark mode. */
.fi-simple-layout {
    background-color: var(--ck-cream);
    background-image:
        linear-gradient(rgba(99, 195, 165, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 195, 165, 0.07) 1px, transparent 1px),
        linear-gradient(rgba(99, 195, 165, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 195, 165, 0.035) 1px, transparent 1px);
    background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
}
.dark .fi-simple-layout {
    background-color: #0a2318;
    background-image:
        linear-gradient(rgba(99, 195, 165, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 195, 165, 0.08) 1px, transparent 1px);
    background-size: 80px 80px, 80px 80px;
}
.fi-simple-main { box-shadow: 0 2px 4px rgba(15, 46, 32, 0.06), 0 18px 40px -16px rgba(15, 46, 32, 0.18); }

/* Contrast fix. Filament fills buttons with shade 500 in dark mode; for the
   green palette that is green #3d9e80, and white text on it is 3.3:1. Use
   600 (green-ink, 5.9:1) instead, 700 on hover. */
.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined),
.dark .fi-btn.fi-color-success:not(.fi-btn-outlined) {
    background-color: rgba(var(--c-600), 1);
}
.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined):hover { background-color: rgb(var(--primary-700)); }
.dark .fi-btn.fi-color-success:not(.fi-btn-outlined):hover { background-color: rgb(var(--success-700)); }

/* User menu (resources/views/vendor/filament-panels/components/user-menu):
   a name chip in the top bar, a "who and where" card at the top of the menu. */
.ck-um-trigger {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem; border-radius: 999px;
    color: var(--ck-ink); text-align: left;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}
.ck-um-trigger:hover, .ck-um-trigger:focus-visible { background-color: rgba(15, 46, 32, 0.05); outline: none; }
.ck-um-trigger:focus-visible { box-shadow: 0 0 0 2px rgb(var(--primary-500)); }
.ck-um-avatar {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 999px;
    background: var(--ck-forest); color: var(--ck-cream);
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(99, 195, 165, 0.55);
}
.ck-um-avatar-lg { width: 2.75rem; height: 2.75rem; font-size: 0.95rem; }
.ck-um-trigger-text { display: none; flex-direction: column; line-height: 1.15; max-width: 12rem; }
@media (min-width: 768px) { .ck-um-trigger-text { display: flex; } }
.ck-um-trigger-name { font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-um-trigger-where { font-size: 0.75rem; color: rgb(var(--gray-500)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-um-chevron { width: 1rem; height: 1rem; color: rgb(var(--gray-400)); }

.ck-um-card {
    display: flex; gap: 0.75rem; align-items: center; padding: 1rem;
    background-color: var(--ck-cream);
    background-image:
        linear-gradient(rgba(99, 195, 165, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 195, 165, 0.09) 1px, transparent 1px);
    background-size: 16px 16px;
    border-bottom: 1px solid rgba(15, 46, 32, 0.08);
}
.ck-um-card-text { min-width: 0; }
.ck-um-card-name { font-size: 0.925rem; font-weight: 600; color: var(--ck-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-um-card-email { font-size: 0.8rem; color: rgb(var(--gray-600)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-um-chip {
    display: inline-block; margin-top: 0.4rem; padding: 0.1rem 0.5rem; border-radius: 999px;
    font-size: 0.7rem; font-weight: 600; color: var(--ck-forest);
    background: rgba(99, 195, 165, 0.18); box-shadow: inset 0 0 0 1px rgba(99, 195, 165, 0.45);
}

/* Billing page (Filament\Client\Pages\Billing) and the usage banner. */
.ck-bill-grid { display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.ck-bill-k { font-size: 0.8rem; color: #6b6b61; }
.ck-bill-v { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.ck-bill-sub { font-size: 0.8rem; color: #6b6b61; }
.ck-bill-alert { font-size: 0.8rem; font-weight: 600; color: #b3302f; }
.ck-bill-email { font-weight: 500; overflow-wrap: anywhere; }
.ck-meter { height: 0.5rem; margin-top: 0.5rem; border-radius: 999px; background: #ece5d9; overflow: hidden; }
.ck-meter > span { display: block; height: 100%; background: #3d9e80; }
.ck-meter.is-warn > span { background: #e08e35; }
.ck-meter.is-over > span { background: #d03b3b; }
.ck-bill-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.ck-bill-table th { text-align: start; font-weight: 600; padding: 0.25rem 0.5rem 0.5rem 0; }
.ck-bill-table td { border-top: 1px solid #ece5d9; padding: 0.5rem 0.5rem 0.5rem 0; vertical-align: middle; }
.ck-bill-table .num { text-align: end; }
.ck-bill-table a { color: #26705a; text-decoration: underline; margin-inline-start: 0.75rem; }
.ck-usage-banner { background: #fdebd5; color: #573412; border-bottom: 1px solid #f8bd7c; padding: 0.5rem 1rem; font-size: 0.875rem; text-align: center; }
.ck-usage-banner.is-over { background: #fbe3e3; color: #5f1d1d; border-color: #ee9a9a; }
.ck-usage-banner a { font-weight: 600; text-decoration: underline; margin-inline-start: 0.5rem; color: inherit; }