/* QAYDAO Filament Overlay
 *
 * Loaded as a static stylesheet via Filament's render hook in
 * panels::head.end. Filament's own CSS (theme + forms + tables) loads
 * before this from /css/filament/*.css and via @filamentStyles, which
 * provides the FULL layout / sidebar / icon-sizing rules. We add our
 * brand color overlay on top — non-destructive.
 *
 * IMPORTANT: do NOT @import Tailwind here. This file is plain CSS
 * served from /public/css and intentionally lives outside the Vite
 * pipeline (Tailwind v4 conflicts with Filament 3's bundled Tailwind v3).
 */

:root {
    --qaydao-olive-50:  #F4F6EE;
    --qaydao-olive-100: #E5EAD6;
    --qaydao-olive-200: #CDD7B0;
    --qaydao-olive-300: #B0C088;
    --qaydao-olive-400: #95A669;
    --qaydao-olive-500: #7E8E5F;
    --qaydao-olive-600: #6A7A4F;
    --qaydao-olive-700: #555F3F;
    --qaydao-olive-800: #404730;
    --qaydao-olive-900: #2D3222;

    --qaydao-cream:    #F5EFE5;
    --qaydao-sand:     #E8DFD0;
    --qaydao-walnut:   #6B4F35;
    --qaydao-coffee:   #2D1F12;

    --qaydao-surface-page:    #F5EFE5;
    --qaydao-surface-raised:  #FAF6EE;

    --qaydao-ease:     cubic-bezier(0.23, 1, 0.32, 1);
}

/* === Page chrome ============================================ */
body {
    background:
        radial-gradient(ellipse at top right, hsla(70, 25%, 90%, 0.35) 0%, transparent 60%),
        var(--qaydao-surface-page);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'kern', 'liga', 'ss01';
}

/* IBM Plex Sans Arabic loaded via panel font() — but make sure it sticks */
:root,
.fi-body,
body {
    font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif !important;
}

/* === Sidebar ================================================ */
.fi-sidebar {
    background: linear-gradient(180deg, #FAF6EE 0%, #F5EFE5 100%);
}

.fi-sidebar-nav-item-button {
    border-radius: 0.5rem;
    transition:
        background-color 180ms var(--qaydao-ease),
        transform 100ms var(--qaydao-ease);
    margin-block: 0.125rem;
}

.fi-sidebar-nav-item-button:hover {
    background: hsla(70, 25%, 85%, 0.5);
}

.fi-sidebar-nav-item-button:active {
    transform: scale(0.98);
}

/* === Buttons (Emil press feedback) ========================= */
.fi-btn {
    transition:
        transform 100ms var(--qaydao-ease),
        background-color 180ms var(--qaydao-ease),
        box-shadow 180ms var(--qaydao-ease);
}

.fi-btn:active {
    transform: scale(0.97);
}

/* === Inputs (warm focus ring) =============================== */
.fi-input:focus,
.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px hsla(70, 25%, 56%, 0.15);
}

/* === Sections / cards (subtle warm tint) =================== */
.fi-section {
    background: var(--qaydao-surface-raised);
    border: 1px solid hsla(30, 15%, 80%, 0.30);
}

.fi-wi {
    background: var(--qaydao-surface-raised);
    border-radius: 0.875rem;
}

/* === Mobile padding for bottom nav ========================= */
@media (max-width: 767px) {
    .fi-main {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0));
    }
}

/* === Reduced motion ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}