/**
 * Admin panel brand tokens (see docs/brand.md).
 * Served from public/ so Filament does not require npm run build / Vite manifest.
 */
:root {
    --pf-gradient: linear-gradient(135deg, #eb5589, #f08354, #f9b233);
    --pf-coral: #f08354;
    --pf-pink: #eb5589;
    --pf-amber: #f9b233;
    --pf-charcoal: #4d5158;
}

/** Login accent bar (panels::auth.login.form.before) — uses brand tokens only */
.pf-login-gradient-accent {
    width: 100%;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 1.5rem;
    background: linear-gradient(90deg, var(--pf-pink), var(--pf-coral), var(--pf-amber));
}

/**
 * Brand logo: Filament sets height via brandLogoHeight(). Ensure the SVG keeps a
 * readable width (some layouts were effectively shrinking the wordmark).
 */
.fi-logo img {
    width: auto !important;
    max-width: min(100%, 22rem);
    object-fit: contain;
}

/* Login (fi-simple-page): allow wide wordmark to use full brand height — global max-width
   can shrink the image below brandLogoHeight() when the SVG is wide. */
.fi-simple-page .fi-simple-header .fi-logo img {
    max-width: min(100%, 48rem);
}

/**
 * Topbar: workspace picker, mode badge separator, and notification bell.
 * These live in custom Blade partials outside Filament's compiled panel CSS so
 * Tailwind utilities are not available there — styles are defined here instead.
 */

/** 1px hairline separators — light / dark aware */
.pf-topbar-separator {
    width: 1px;
    height: 1.25rem;
    background-color: #d1d5db; /* gray-300 */
    flex-shrink: 0;
}

.dark .pf-topbar-separator {
    background-color: rgba(255, 255, 255, 0.15);
}

/** Separator variant used between logo and mode badge — needs horizontal breathing room */
.pf-topbar-separator--after-logo {
    margin-inline: 0.5rem;
}

/**
 * Mode badge — structural layout only.
 * Colour modifier classes (bg-*, text-*, ring-*) are intentionally kept as Tailwind
 * utilities because they are drawn exclusively from Filament's own colour palette and
 * are guaranteed to be present in the compiled panel CSS.
 */
.pf-mode-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;  /* rounded-md */
    padding: 0.125rem 0.5rem; /* py-0.5 px-2 */
    font-size: 0.75rem;       /* text-xs */
    font-weight: 500;         /* font-medium */
    white-space: nowrap;
}

/** Workspace picker root — must stay inline-flex so it sits in the topbar flex row */
.pf-workspace-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/** Trigger button — mirror fi-topbar icon-button sizing & hover states */
.pf-workspace-picker-trigger {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
    border-radius: 0.5rem;   /* rounded-lg */
    padding: 0.375rem 0.625rem; /* py-1.5 px-2.5 */
    font-size: 0.875rem;
    line-height: 1;
    color: #374151;          /* gray-700 */
    outline: none;
    transition: background-color 75ms;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.pf-workspace-picker-trigger:hover,
.pf-workspace-picker-trigger:focus {
    background-color: #f9fafb; /* gray-50 */
}

/** Keyboard focus ring — replaces removed browser outline */
.pf-workspace-picker-trigger:focus-visible {
    outline: 2px solid #6366f1; /* indigo-500 — matches Filament's default ring */
    outline-offset: 2px;
}

.dark .pf-workspace-picker-trigger {
    color: #e5e7eb; /* gray-200 */
}

.dark .pf-workspace-picker-trigger:hover,
.dark .pf-workspace-picker-trigger:focus {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark .pf-workspace-picker-trigger:focus-visible {
    outline-color: #818cf8; /* indigo-400 — better contrast on dark */
}

/** Icons inside the trigger */
.pf-workspace-picker-trigger svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/** Truncated workspace name */
.pf-workspace-picker-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 11rem;
}

/** Disabled notification bell placeholder */
.pf-topbar-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    padding: 0.375rem;
    color: #9ca3af; /* gray-400 */
    opacity: 0.5;
    cursor: not-allowed;
    background: none;
    border: none;
}

.pf-topbar-bell svg {
    width: 1.25rem;
    height: 1.25rem;
}

/** Workspace picker dropdown panel */
.pf-workspace-picker-menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 50;
    margin-top: 0.5rem;       /* mt-2 */
    width: 14rem;             /* w-56 */
    transform-origin: top right;
    border-radius: 0.5rem;    /* rounded-lg */
    background-color: #ffffff;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
    outline: 1px solid rgb(3 7 18 / 0.05); /* ring-1 ring-gray-950/5 */
    outline-offset: -1px;
    padding: 0.25rem 0;       /* py-1 */
}

.dark .pf-workspace-picker-menu {
    background-color: #111827; /* gray-900 */
    outline-color: rgba(255, 255, 255, 0.1); /* ring-white/10 */
}

/** Empty state message */
.pf-workspace-picker-empty {
    padding: 0.5rem 0.75rem;  /* py-2 px-3 */
    font-size: 0.875rem;
    color: #6b7280;           /* gray-500 */
}

.dark .pf-workspace-picker-empty {
    color: #9ca3af;           /* gray-400 */
}

/** Organisation group header inside the picker dropdown */
.pf-workspace-picker-org-header {
    padding: 0.375rem 0.75rem 0.125rem;
    font-size: 0.6875rem;       /* ~11px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;             /* gray-400 */
    border-top: 1px solid #f3f4f6; /* gray-100 */
}

.pf-workspace-picker-org-header:first-child {
    border-top: none;
}

.dark .pf-workspace-picker-org-header {
    color: #6b7280;             /* gray-500 */
    border-top-color: rgba(255, 255, 255, 0.06);
}

/** Individual workspace option button */
.pf-workspace-picker-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;  /* py-2 px-3 */
    text-align: left;
    font-size: 0.875rem;
    transition: background-color 75ms;
    background: none;
    border: none;
    cursor: pointer;
}

.pf-workspace-picker-item:hover {
    background-color: #f9fafb; /* gray-50 */
}

.dark .pf-workspace-picker-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.pf-workspace-picker-item-name {
    display: block;
    font-weight: 500;
    color: #111827;           /* gray-900 */
}

.dark .pf-workspace-picker-item-name {
    color: #ffffff;
}

.pf-workspace-picker-item-key {
    display: block;
    font-size: 0.75rem;       /* text-xs */
    color: #6b7280;           /* gray-500 */
}

.dark .pf-workspace-picker-item-key {
    color: #9ca3af;           /* gray-400 */
}