/* Titan Academy — brand theme for the Filament admin panel.
   Font faces live in titan-fonts.css (loaded separately as the panel's base font). */

/* ===================================================================
   1. GLOBAL PALETTE — retint Filament's neutral scale to the brand's
   neutral grays so every dark-mode surface (sidebar, topbar, cards,
   borders) inherits the correct tone automatically.
   =================================================================== */
:root {
    --gray-50: #f5f5f4;
    --gray-100: #e6e6e5;
    --gray-200: #cfcfce;
    --gray-300: #adadab;
    --gray-400: #868684;
    --gray-500: #545454; /* brand "elemente secundare" */
    --gray-600: #454544;
    --gray-700: #363635;
    --gray-800: #262625;
    --gray-900: #181817; /* sidebar / topbar */
    --gray-950: #1e1e1e; /* brand "fundal principal" — main canvas */
}

/* ===================================================================
   2. TYPOGRAPHY — Azonix for headings / brand moments,
   Titan Barlow (Condensed) for everything else.
   =================================================================== */
.fi-header-heading,
.fi-modal-heading,
.fi-wi-stats-overview-stat-value,
.fi-logo {
    font-family: 'Titan Azonix', ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em;
}

.fi-sidebar-group-label {
    font-family: 'Titan Azonix', ui-sans-serif, system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
}

/* ===================================================================
   3. SIDEBAR BRAND LOCKUP
   =================================================================== */
.fi-logo img {
    object-fit: contain;
}

/* ===================================================================
   4. LOGIN / REGISTER / PASSWORD-RESET (simple layout)
   =================================================================== */
.fi-simple-layout {
    --titan-bg-deep: #131313;
    --titan-surface: #262524;
    --titan-surface-2: #2f2d2c;
    --titan-border: #3c3a39;
    --titan-text: #ffffff;
    --titan-text-muted: #a8a8a8;
    --titan-secondary: #545454;
    --titan-accent-warm: #89553e;
    --titan-red: #e50000;
}

body:has(.fi-simple-layout) {
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(229, 0, 0, 0.16), transparent 70%),
        radial-gradient(50% 40% at 85% 100%, rgba(137, 85, 62, 0.12), transparent 70%),
        var(--titan-bg-deep) !important;
}

.fi-simple-header {
    margin-bottom: 0.5rem;
}

.fi-simple-header .fi-logo {
    height: 9.5rem !important;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 26px rgba(229, 0, 0, 0.45));
}

.fi-simple-header-heading {
    color: var(--titan-text) !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 1.1rem !important;
}

.fi-simple-header-subheading {
    color: var(--titan-text-muted) !important;
    font-style: italic;
    font-weight: 600 !important;
}

.fi-simple-main {
    background-color: var(--titan-surface) !important;
    border: 1px solid var(--titan-border);
    border-top: 3px solid var(--titan-red);
    border-radius: 1rem !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 25px 60px -15px rgba(0, 0, 0, 0.65),
        0 0 60px -10px rgba(229, 0, 0, 0.18) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-simple-layout,
.fi-simple-layout .fi-fo-field-wrp-label,
.fi-simple-layout label,
.fi-simple-layout p,
.fi-simple-layout .fi-link {
    font-style: italic;
    font-weight: 600;
}

.fi-simple-layout .fi-fo-field-wrp-label {
    color: var(--titan-text) !important;
}

.fi-simple-layout .fi-input-wrp {
    background-color: var(--titan-surface-2) !important;
    --tw-ring-color: var(--titan-border) !important;
    border-radius: 0.6rem !important;
}

.fi-simple-layout .fi-input-wrp:focus-within {
    --tw-ring-color: var(--titan-red) !important;
}

.fi-simple-layout input.fi-input {
    color: var(--titan-text) !important;
}

.fi-simple-layout input.fi-input::placeholder {
    color: var(--titan-secondary) !important;
    opacity: 1;
}

.fi-simple-layout input[type='checkbox'].fi-checkbox-input {
    background-color: var(--titan-surface-2);
    border-color: var(--titan-border);
}

.fi-simple-layout input[type='checkbox'].fi-checkbox-input:checked {
    background-color: var(--titan-red) !important;
    border-color: var(--titan-red) !important;
}

.fi-simple-layout .fi-link-label {
    color: var(--titan-accent-warm) !important;
    font-style: italic;
}

.fi-simple-layout .fi-link:hover .fi-link-label {
    color: var(--titan-red) !important;
}

.fi-simple-layout .fi-btn.fi-color-primary {
    background: linear-gradient(180deg, #ff1a1a 0%, var(--titan-red) 100%) !important;
    color: #ffffff !important;
    font-family: 'Titan Azonix', ui-sans-serif, system-ui, sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem !important;
    border: none;
    box-shadow: 0 8px 22px -6px rgba(229, 0, 0, 0.55) !important;
}

.fi-simple-layout .fi-btn.fi-color-primary:hover {
    background: linear-gradient(180deg, #ff3d3d 0%, #ff1a1a 100%) !important;
    box-shadow: 0 10px 26px -6px rgba(229, 0, 0, 0.7) !important;
}

.fi-simple-layout .fi-fo-field-wrp-error-message {
    color: #ff6b6b !important;
}

/* ===================================================================
   5. CARDS / SECTIONS — bring `.fi-section` (used by every native
   form, widget and generated page) in line with the frosted-glass
   card language used by the custom Client/Trainer/CafeOrder view
   pages (see resources/views/filament/**, `.titan-glass` below).
   =================================================================== */
.fi-section:not(.fi-aside) {
    border-radius: 1rem !important; /* rounded-2xl */
    box-shadow: none !important;
}

.fi-section:not(.fi-aside) > .fi-section-content-ctn,
.fi-section.fi-aside > .fi-section-content-ctn {
    background-color: rgba(255, 255, 255, 0.045) !important;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-radius: 1rem !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
        0 8px 30px -14px rgba(0, 0, 0, 0.6) !important;
}

.fi-fieldset:not(.fi-fieldset-not-contained) {
    border-radius: 1rem !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Native table list container — same treatment as sections. */
.fi-ta-ctn {
    background-color: rgba(255, 255, 255, 0.045) !important;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-radius: 1rem !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
        0 8px 30px -14px rgba(0, 0, 0, 0.6) !important;
}

.fi-wi-stats-overview-stat {
    background-color: rgba(255, 255, 255, 0.045) !important;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
        0 8px 30px -14px rgba(0, 0, 0, 0.6) !important;
}

/* ===================================================================
   6. BUTTONS — pill-shaped, matching the login screen's primary
   button. Applies to every `.fi-btn` size/variant.
   =================================================================== */
.fi-btn,
.fi-btn-group > .fi-btn:nth-child(1 of .fi-btn),
.fi-btn-group > .fi-btn:nth-last-child(1 of .fi-btn) {
    border-radius: 9999px !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined) {
    background: linear-gradient(180deg, #ff1a1a 0%, #e50000 100%) !important;
    color: #ffffff !important;
    border: none;
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-disabled):not([disabled]):hover {
    background: linear-gradient(180deg, #ff3d3d 0%, #ff1a1a 100%) !important;
}

.fi-icon-btn {
    border-radius: 9999px !important;
}

.fi-icon-btn:not(.fi-disabled):not([disabled]):hover {
    background-color: rgba(255, 255, 255, 0.06);
}

/* ===================================================================
   7. BADGES — reuse the exact pill formula already hand-written in
   resources/views/components/filament/status-badge.blade.php
   (rounded-full, /15 bg, /30 ring, /400 text) for every native
   Filament badge, generically for any color via its `--color-*`
   custom properties.
   =================================================================== */
.fi-badge {
    border-radius: 9999px !important;
}

.fi-badge.fi-color {
    background-color: color-mix(in oklab, var(--color-500) 15%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-500) 30%, transparent) !important;
    color: var(--color-400) !important;
}

/* ===================================================================
   8. TABS — segmented pill control, matching the pill vocabulary
   used everywhere else (badges, avatars).
   =================================================================== */
.fi-tabs:not(.fi-contained) {
    border-radius: 9999px !important;
    box-shadow: none !important;
}

.fi-tabs.fi-contained {
    border-bottom: none !important;
    background-color: var(--gray-900);
    border-radius: 9999px !important;
    padding: 0.375rem !important;
}

.fi-tabs-item {
    border-radius: 9999px !important;
}

.fi-tabs-item.fi-active {
    background-color: color-mix(in oklab, var(--primary-500) 15%, transparent) !important;
}

/* ===================================================================
   9. SIDEBAR — primary-tinted active pill instead of the flat gray
   highlight, and a little more breathing room between items.
   =================================================================== */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: color-mix(in oklab, var(--primary-500) 12%, transparent) !important;
}

.fi-sidebar-nav {
    row-gap: 2rem !important;
}

.fi-sidebar-item-btn {
    padding: 0.625rem 0.75rem !important;
}

/* ===================================================================
   10. TOPBAR — pill search field, circular action buttons, and a
   canvas-matched surface instead of Filament's light-leaning default.
   =================================================================== */
.fi-topbar {
    background-color: var(--gray-900) !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fi-topbar-item-btn {
    border-radius: 9999px !important;
}

.fi-global-search-input {
    border-radius: 9999px !important;
}

.fi-user-menu-trigger .fi-user-avatar,
.fi-user-avatar {
    border-radius: 9999px !important;
}

/* ===================================================================
   11. TABLES — row hover tint + uppercase micro-label header cells,
   matching the `text-xs uppercase tracking-wider` pattern used
   throughout the custom view pages.
   =================================================================== */
.fi-ta-row.fi-clickable:hover {
    background-color: color-mix(in oklab, var(--primary-500) 5%, transparent) !important;
}

.fi-ta-header-cell {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: var(--gray-400) !important;
}

/* ===================================================================
   12. FORMS & INPUTS — rounded, dark surface inputs consistent with
   the login screen, extended to the authenticated app.
   =================================================================== */
.fi-input-wrp {
    border-radius: 0.75rem !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.fi-select-input [x-ref='select'],
.fi-select-input-ctn {
    border-radius: 0.75rem !important;
}

.fi-toggle.fi-color:not(.fi-toggle-on) {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ===================================================================
   13. MODALS — the exact same frosted-glass recipe as `.titan-glass`
   (cards, sidebar, topbar) — no glow accent, just the shared surface,
   so dialogs read as part of the same system instead of a flat panel
   dropped on top of it. The sticky header/footer get the same tint
   (they need *some* backing to hide content scrolling underneath,
   but should stay glassy rather than solid).
   =================================================================== */
.fi-modal-window {
    background-color: rgba(255, 255, 255, 0.045) !important;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 1.25rem !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
        0 25px 60px -15px rgba(0, 0, 0, 0.65) !important;
}

.fi-modal-has-sticky-header > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-header,
.fi-modal-has-sticky-footer > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-footer {
    background-color: rgba(0, 0, 0, 0.94) !important;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-color: rgba(255, 255, 255, 0.09) !important;
}

.fi-modal-has-sticky-header > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.fi-modal-has-sticky-footer > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* ===================================================================
   14. APP BACKGROUND — soft brand-tinted glow behind the whole
   authenticated canvas, fixed to the viewport, so the frosted-glass
   cards below have something to actually catch light from. Without
   it backdrop-blur over a flat color is indistinguishable from a
   plain fill.
   =================================================================== */
body:has(.fi-sidebar) {
    background:
        radial-gradient(48% 38% at 12% -6%, rgba(229, 0, 0, 0.14), transparent 70%),
        radial-gradient(42% 34% at 100% 12%, rgba(137, 85, 62, 0.12), transparent 70%),
        radial-gradient(46% 38% at 40% 105%, rgba(229, 0, 0, 0.08), transparent 70%),
        var(--gray-950) !important;
    background-attachment: fixed;
}

/* ===================================================================
   15. GLASSMORPHISM CARDS — shared surface for every hand-built card
   in resources/views/filament/** (hero banners, stat tiles, list
   rows), replacing the old flat `bg-gray-900 ring-1 ring-white/10`
   boxes with frosted glass panels that sit on top of the glow above.
   `.titan-glass` is for primary cards (heroes, stats, widgets);
   `.titan-glass-item` is a lighter touch for nested rows inside a
   scrollable list, so the two layers of nesting stay visually
   distinct.
   =================================================================== */
.titan-glass {
    background-color: rgba(255, 255, 255, 0.045) !important;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
        0 8px 30px -14px rgba(0, 0, 0, 0.6);
}

.titan-glass-item {
    background-color: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

a.titan-glass-item:hover,
.titan-glass-item.titan-glass-item--clickable:hover {
    background-color: rgba(255, 255, 255, 0.095) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

/* ===================================================================
   16. CARD GLOW ACCENTS — a soft blob of color bleeding from a
   corner, sitting behind the content but on top of the glass tint.
   Replaces the old flat gradient top-stripe (`h-1 bg-gradient-to-r`)
   with the ambient-glow language from the reference dashboards:
   pair one of these with `.titan-glass` on the same element.
   =================================================================== */
.titan-glow-primary,
.titan-glow-success,
.titan-glow-warning,
.titan-glow-amber,
.titan-glow-danger,
.titan-glow-info,
.titan-glow-warm {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.titan-glow-primary::before,
.titan-glow-success::before,
.titan-glow-warning::before,
.titan-glow-amber::before,
.titan-glow-danger::before,
.titan-glow-info::before,
.titan-glow-warm::before {
    content: '';
    position: absolute;
    top: -55%;
    right: -15%;
    width: 60%;
    height: 160%;
    border-radius: 9999px;
    pointer-events: none;
    z-index: -1;
    filter: blur(8px);
}

.titan-glow-primary::before { background: radial-gradient(closest-side, rgba(229, 0, 0, 0.22), transparent 75%); }
.titan-glow-success::before { background: radial-gradient(closest-side, rgba(34, 197, 94, 0.20), transparent 75%); }
.titan-glow-warning::before,
.titan-glow-amber::before   { background: radial-gradient(closest-side, rgba(245, 158, 11, 0.20), transparent 75%); }
.titan-glow-danger::before  { background: radial-gradient(closest-side, rgba(239, 68, 68, 0.22), transparent 75%); }
.titan-glow-info::before    { background: radial-gradient(closest-side, rgba(56, 189, 248, 0.18), transparent 75%); }
.titan-glow-warm::before    { background: radial-gradient(closest-side, rgba(137, 85, 62, 0.22), transparent 75%); }

/* ===================================================================
   17. FLOATING SHELL (desktop) — the sidebar and topbar stop being a
   full-width bar stacked above a sidebar that only starts below it.
   Instead, on large screens, the sidebar becomes a fixed frosted-glass
   rail spanning the *entire* viewport height on the left, and the
   topbar becomes a second frosted-glass panel occupying the remaining
   width to its right — both floating with the same gutter, starting
   at the same y position, side by side rather than one above the
   other. Untouched below `lg` so the mobile off-canvas sidebar keeps
   Filament's default behaviour.
   =================================================================== */
:root {
    --titan-shell-gutter: 1rem;
}

@media (min-width: 1024px) {
    .fi-body-has-topbar .fi-sidebar {
        position: fixed !important;
        inset-inline-start: var(--titan-shell-gutter) !important;
        top: var(--titan-shell-gutter) !important;
        bottom: var(--titan-shell-gutter) !important;
        height: auto !important;
        width: var(--sidebar-width) !important;
        border-radius: 1.25rem !important;
        overflow: hidden;
        background-color: rgba(255, 255, 255, 0.045) !important;
        backdrop-filter: blur(24px) saturate(140%);
        -webkit-backdrop-filter: blur(24px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        box-shadow:
            inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
            0 8px 30px -14px rgba(0, 0, 0, 0.6) !important;
    }

    .fi-topbar-ctn {
        background: transparent !important;
        margin-inline-start: calc(var(--sidebar-width) + (2 * var(--titan-shell-gutter))) !important;
        padding: var(--titan-shell-gutter) var(--titan-shell-gutter) 0 0 !important;
    }

    .fi-topbar {
        border-radius: 1.25rem !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        background-color: rgba(255, 255, 255, 0.045) !important;
        backdrop-filter: blur(24px) saturate(140%);
        -webkit-backdrop-filter: blur(24px) saturate(140%);
        box-shadow:
            inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
            0 8px 30px -14px rgba(0, 0, 0, 0.6) !important;
    }

    .fi-body-has-topbar .fi-main-ctn {
        margin-inline-start: calc(var(--sidebar-width) + (2 * var(--titan-shell-gutter))) !important;
        padding-top: var(--titan-shell-gutter) !important;
    }
}

/* ===================================================================
   18. CONTENT WIDTH — Filament caps most pages at `.fi-width-7xl`
   (max-w-7xl, 1280px) and centers them, which used to go unnoticed
   when the sidebar ran full-height above the topbar. Now that both
   are fixed-width floating panels (see 17), that cap reads as the
   page content drifting out of alignment with the topbar/sidebar
   shell above it. Every page should fill the same column the shell
   already defines, regardless of which `.fi-width-*` class Filament
   applied.
   =================================================================== */
.fi-main {
    max-width: none !important;
}

/* ===================================================================
   19. NOTIFICATION ACTIONS — instead of a small button sitting inline
   in the notification body, the action bar is hidden by default and
   slides up as a full-width bar pinned to the bottom of the row on
   hover, so the row reads clean until you're actually pointing at it.
   `.fi-no-notification` gets the positioning context (not
   `.fi-no-notification-main`), so the bar spans the *whole* row width
   — icon and close button included — not just the text column.
   =================================================================== */
.fi-no-notification {
    position: relative;
    overflow: hidden;
}

.fi-no-notification .fi-no-notification-actions {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.fi-no-notification:hover .fi-no-notification-actions {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.fi-no-notification .fi-no-notification-actions .fi-btn {
    width: 100%;
    justify-content: center;
    border-radius: 0 !important;
    background: var(--titan-red, #e50000) !important;
    color: #ffffff !important;
}

/* ===================================================================
   20. NOTIFICATION STACK — toasts pile up bottom-right like a deck of
   cards: the newest sits in front (closest to the corner, full size),
   older ones peek out just above it, progressively smaller and dimmer.
   Hovering the pile (any visible sliver) fans everything back out to a
   normal, fully-readable list so nothing dismissed-but-unread is
   hidden. Relies on DOM order (oldest first, newest last) matching
   paint order, so no z-index juggling is needed — later siblings
   naturally paint over earlier ones once they overlap.
   =================================================================== */
.fi-no.fi-vertical-align-end .fi-no-notification {
    transition: transform 0.25s ease, opacity 0.25s ease, margin-bottom 0.25s ease;
    transform-origin: bottom right;
}

.fi-no.fi-vertical-align-end:not(:hover) .fi-no-notification:not(:last-child) {
    margin-bottom: -4.25rem;
}

.fi-no.fi-vertical-align-end:not(:hover) .fi-no-notification:nth-last-child(2) {
    transform: scale(0.94);
    opacity: 0.85;
}

.fi-no.fi-vertical-align-end:not(:hover) .fi-no-notification:nth-last-child(3) {
    transform: scale(0.88);
    opacity: 0.6;
}

.fi-no.fi-vertical-align-end:not(:hover) .fi-no-notification:nth-last-child(n + 4) {
    transform: scale(0.82);
    opacity: 0.35;
}