/*
 * filament-breezy compatibility utilities.
 *
 * Breezy v3's blade views are written in raw Tailwind utility classes
 * (flex, text-sm, space-y-3, w-6 ...). That worked under Filament v3, where
 * apps compiled their own Tailwind build and those utilities existed.
 *
 * Filament v5 ships a precompiled stylesheet containing only its own fi-*
 * component classes -- no generic utilities -- and this repo has no Tailwind
 * build at all since the React SPA and Vite tooling were removed. The result
 * was that every Breezy view rendered unstyled: most visibly, icons with a
 * `w-6` class and no matching rule fell back to the 150px CSS default size
 * for an SVG with no intrinsic dimensions.
 *
 * This file defines just the utilities Breezy's views actually use. They are
 * additive: none of these class names exist in Filament's bundle, so nothing
 * is overridden. Colours read Filament's own CSS custom properties so the
 * result follows the panel theme in both light and dark mode.
 *
 * Delete this once Breezy ships Filament v5 native markup.
 */

/* ---------- layout ---------- */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.inline-block { display: inline-block; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-shrink-0 { flex-shrink: 0; }
.w-full { width: 100%; }
.transform { transform: translate(0, 0); }
.transition { transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.sticky { position: sticky; }
.bottom-0 { bottom: 0; }

/* ---------- sizing ---------- */
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }

/*
 * Belt and braces: any icon inside a Breezy view that still carries only a
 * width utility gets a proportional height instead of the 150px default.
 */
.fi-main svg:not([width]):not([height]) { height: auto; }

/* ---------- spacing ---------- */
.p-1 { padding: 0.25rem; }
.p-4 { padding: 1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.pt-2 { padding-top: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-5 { margin-top: 1.25rem; }
.ml-3 { margin-left: 0.75rem; }
.ms-3 { margin-inline-start: 0.75rem; }
.mr-2 { margin-right: 0.5rem; }
.-mx-4 { margin-left: -1rem; margin-right: -1rem; }
.gap-2 { gap: 0.5rem; }

.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-x-4 > * + * { margin-left: 1rem; }

/* ---------- typography ---------- */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.text-right { text-align: right; }
.align-right { text-align: right; }

/* ---------- borders ---------- */
.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-full { border-radius: 9999px; }
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.ring-1 { box-shadow: inset 0 0 0 1px var(--gray-200, #e5e7eb); }
.divide-y > * + * { border-top: 1px solid var(--gray-200, #e5e7eb); }

/* ---------- colour ---------- */
.text-gray-500 { color: var(--gray-500, #6b7280); }
.text-gray-600 { color: var(--gray-600, #4b5563); }
.text-gray-800 { color: var(--gray-800, #1f2937); }
.text-primary-500 { color: var(--primary-500, #6dca6d); }
.text-primary-800 { color: var(--primary-800, #166534); }
.text-custom-400 { color: var(--primary-400, #6dca6d); }
.text-custom-800 { color: var(--primary-800, #166534); }
.text-danger-600 { color: var(--danger-600, #dc2626); }

.bg-white { background-color: #fff; }
.bg-gray-100 { background-color: var(--gray-100, #f3f4f6); }
.bg-primary-50 { background-color: var(--primary-50, #f0fdf0); }
.bg-custom-50 { background-color: var(--primary-50, #f0fdf0); }

/* ---------- dark mode ---------- */
.dark .dark\:text-white { color: #fff; }
.dark .dark\:text-gray-400 { color: var(--gray-400, #9ca3af); }
.dark .dark\:bg-gray-900 { background-color: var(--gray-900, #111827); }
.dark .dark\:bg-custom-400\/10 { background-color: rgb(109 202 109 / 0.1); }
.dark .dark\:bg-primary-400\/10 { background-color: rgb(109 202 109 / 0.1); }
.dark .dark\:ring-white\/10 { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.dark .dark\:divide-white\/10 > * + * { border-top-color: rgb(255 255 255 / 0.1); }

/* ---------- responsive ---------- */
@media (min-width: 768px) {
    .md\:bottom-4 { bottom: 1rem; }
    .md\:rounded-xl { border-radius: 0.75rem; }
}

/* ==========================================================================
 * Sidebar profile card (SIDEBAR_FOOTER render hook)
 * ==========================================================================
 * Own namespace so it cannot collide with Filament's fi-* classes.
 */
.hyssa-sidebar-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    margin: 0.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: inherit;
    transition: background-color 150ms ease;
    border-top: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0;
    margin: 0;
    padding: 0.75rem 1rem;
}

.hyssa-sidebar-profile:hover {
    background-color: var(--gray-100, #f3f4f6);
}

.hyssa-sidebar-profile--active {
    background-color: var(--gray-100, #f3f4f6);
}

.hyssa-sidebar-profile__avatar {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 9999px;
    object-fit: cover;
}

.hyssa-sidebar-profile__text {
    display: flex;
    flex-direction: column;
    min-width: 0; /* lets the ellipsis actually apply */
    line-height: 1.2;
}

.hyssa-sidebar-profile__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hyssa-sidebar-profile__email {
    font-size: 0.75rem;
    color: var(--gray-500, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .hyssa-sidebar-profile {
    border-top-color: rgb(255 255 255 / 0.1);
}

.dark .hyssa-sidebar-profile:hover,
.dark .hyssa-sidebar-profile--active {
    background-color: rgb(255 255 255 / 0.05);
}

.dark .hyssa-sidebar-profile__name { color: #fff; }
.dark .hyssa-sidebar-profile__email { color: var(--gray-400, #9ca3af); }

/*
 * When the sidebar is collapsed Filament shrinks its width; drop the text and
 * centre the avatar so the card degrades to just the identicon.
 */
.fi-sidebar:not(.fi-sidebar-open) .hyssa-sidebar-profile__text {
    display: none;
}

.fi-sidebar:not(.fi-sidebar-open) .hyssa-sidebar-profile {
    justify-content: center;
}

/* ==========================================================================
 * My Profile section stack
 * ==========================================================================
 * Replaces Breezy's Tailwind arbitrary variants
 * ([&>*:not(:first-child)]:pt-6 / [&>*:not(:last-child)]:pb-6 / divide-y),
 * none of which resolve to anything in Filament v5's stylesheet.
 */
/*
 * The admin panel is maxContentWidth(Width::Full), which suits data tables but
 * leaves these form sections stretched across an ultrawide display with the
 * inputs far from their labels. Constrained here rather than on the panel so
 * only this page is affected. Tweak --hyssa-profile-max-width to taste.
 */
.hyssa-profile-sections {
    --hyssa-profile-max-width: 64rem;

    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: var(--hyssa-profile-max-width);
}

/* Separator between sections, but not above the first or below the last. */
.hyssa-profile-sections > * + * {
    border-top: 1px solid var(--gray-200, #e5e7eb);
    padding-top: 2rem;
}

.dark .hyssa-profile-sections > * + * {
    border-top-color: rgb(255 255 255 / 0.1);
}

/* ---------- avatar picker (My Profile section) ---------- */
.hyssa-avatar-picker {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hyssa-avatar-picker__current {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hyssa-avatar-picker__current img {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    display: block;
    flex-shrink: 0;
}

.hyssa-avatar-picker__current-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.hyssa-avatar-picker__current-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900, #111827);
}

.hyssa-avatar-picker__current-hint {
    font-size: 0.75rem;
    color: var(--gray-500, #6b7280);
}

.dark .hyssa-avatar-picker__current-label { color: #fff; }
.dark .hyssa-avatar-picker__current-hint { color: var(--gray-400, #9ca3af); }

.hyssa-avatar-picker__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}