@import '../../../../vendor/filament/filament/resources/css/theme.css';
@import '../../../../node_modules/frappe-gantt/dist/frappe-gantt.css';

@source '../../../../app/Filament/App/**/*';
@source '../../../../app/Livewire/**/*';
@source '../../../../resources/views/components/**/*';
@source '../../../../resources/views/filament/app/**/*';
@source '../../../../resources/views/livewire/**/*';

/*
 * ============================================================================
 * Able Pro (Bootstrap admin template, preset-1) — component theme for Filament
 * ============================================================================
 * This project no longer renders actual Able Pro/Bootstrap markup — Filament's
 * own components (`.fi-section`, `.fi-btn`, `.fi-badge`, `.fi-sidebar`, ...)
 * stay in charge, and colors already come from Able Pro's real preset-1 hexes
 * via `AppPanelProvider::panel()`'s `->colors([...])`. What lives here is only
 * the *shape* language Able Pro is recognized by: 12px card radius with a flat
 * 1px border (Able Pro's own `--pc-card-box-shadow` is `none` in the default
 * preset — the soft shadow only exists in a separate opt-in "contrast" theme
 * mode that none of our reference screenshots used, so cards here are flat,
 * not shadowed), pill-ish buttons, a dashed sidebar border, a barely-off-white
 * page background. Tokens below were read directly out of the real template's
 * compiled CSS (style.css / style-preset.css) rather than eyeballed, so this
 * is a faithful reskin, not a reinterpretation.
 *
 * Dark mode note (2026-07-25): the first pass guessed dark surface colors from
 * Tailwind's own gray-800/900 scale instead of extracting Able Pro's actual
 * `[data-pc-theme=dark]` tokens, which is why it looked broken — Tailwind gray
 * and Able Pro's dark navy scale don't share hues, so sidebar/card/topbar ended
 * up mismatched against each other. Every hex below (light AND dark) was
 * re-verified against a real Able Pro dark-mode page the user saved and against
 * `style-preset.css`'s `[data-pc-theme=dark] { ... }` / `[data-pc-theme=dark]
 * .card { ... }` blocks — nothing here is estimated.
 */

:root {
    --ablepro-body-bg: #f8f9fa;
    --ablepro-border: #e7eaee;
    --ablepro-sidebar-border: #bec8d0;
    --ablepro-card-bg: #ffffff;
    --ablepro-card-border: #e7eaee;
    --ablepro-active-bg: #f3f5f7;
    --ablepro-topbar-bg: rgba(248, 249, 250, 0.7);
}

.dark {
    --ablepro-body-bg: #131920;
    --ablepro-border: #303f50;
    --ablepro-sidebar-border: #242d39;
    --ablepro-card-bg: #1b232d;
    --ablepro-card-border: #263240;
    --ablepro-active-bg: #19212a;
    --ablepro-topbar-bg: rgba(19, 25, 32, 0.7);
}

.fi-body {
    background: var(--ablepro-body-bg) !important;
}

/* Sidebar: Able Pro's sidebar has no background of its own (`--pc-sidebar-background`
   is `transparent` in the real template) — it just shows the body color through,
   in both themes. Setting it explicitly here (rather than leaving it transparent)
   avoids depending on stacking order to get the same result. */
.fi-sidebar {
    background: var(--ablepro-body-bg) !important;
    border-right: 1px dashed var(--ablepro-sidebar-border) !important;
    box-shadow: none !important;
}

.fi-sidebar-item a,
.fi-tenant-menu-trigger {
    border-radius: 8px !important;
}
.fi-sidebar-item a:hover,
.fi-tenant-menu-trigger:hover {
    background: var(--ablepro-active-bg) !important;
}

.fi-sidebar-item-active a {
    background: var(--ablepro-active-bg) !important;
}

/* Topbar: same soft blur-over-body treatment Able Pro uses (rgba body-bg + backdrop-blur). */
.fi-topbar {
    background: var(--ablepro-topbar-bg) !important;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    box-shadow: none !important;
    border-bottom: 1px solid var(--ablepro-border);
}

.fi-page-content{
    row-gap: calc(var(--spacing) * 6) !important;
}

.fi-page-header-main-ctn {
    row-gap: 0 !important;
    padding-block: 0 !important;
}


/* Cards/sections: flat — 12px radius + a 1px border, no drop shadow (see the
   file-level comment above for why: Able Pro's default preset shadow token
   is `none`). Background is explicit too: Able Pro's dark card bg (`#1b232d`)
   is deliberately a step lighter than the dark body bg (`#131920`) so cards
   still read as raised surfaces without a shadow — Filament's own default
   dark card color doesn't match that pairing. */
.fi-section {
    background: var(--ablepro-card-bg) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    border-color: var(--ablepro-card-border) !important;
}

section {
    border: 1px solid var(--ablepro-card-border) !important;
}

.fi-ta-ctn {
    background: var(--ablepro-card-bg) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    border-color: var(--ablepro-card-border) !important;
}

/* Buttons: Able Pro's pill-ish 20px radius (vs. Filament's default rounded-lg). */
.fi-btn {
    border-radius: 20px !important;
}
.fi-btn.fi-color-primary {
    box-shadow: none !important;
    transition: filter 0.15s ease !important;
}
.fi-btn.fi-color-primary:hover {
    filter: brightness(0.93);
    text-decoration: none !important;
}

/* Badges: Able Pro's 6px radius (vs. Filament's default fully-rounded pill). */
.fi-badge {
    border-radius: 6px !important;
}

.fi-breadcrumbs .fi-breadcrumbs-item-label {
    @apply text-xs!;
}

.choices__item--selectable {
    @apply cursor-pointer!;
}

.bar-milestone .bar {
    fill: #F59E0B !important;
}

.bar-violated .bar {
    fill: #EF4444 !important;
}

::-webkit-scrollbar {
    width: .56vw !important;
    height: 8px !important;
}

::-webkit-scrollbar-button {
    width: 0px !important;
    height: 0px !important;
}

::-webkit-scrollbar-thumb {
    background: #e1e1e1 !important;
    border: 0px none #ffffff !important;
    border-radius: 50px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #ffffff !important;
}

::-webkit-scrollbar-thumb:active {
    background: #000000 !important;
}

::-webkit-scrollbar-track {
    background: #666666 !important;
    border: 0px none #ffffff !important;
}

::-webkit-scrollbar-track:hover {
    background: #666666 !important;
}

::-webkit-scrollbar-track:active {
    background: #333333 !important;
}

::-webkit-scrollbar-corner {
    background: transparent !important;
}

/*
 * Filament's own component CSS (text-input, markdown-editor, ...) is
 * imported into the Tailwind `components` layer (see
 * vendor/filament/forms/resources/css/index.css). Per the CSS cascade-layers
 * spec, a `!important` declared inside a *named* layer beats a `!important`
 * declared outside any layer ("unlayered"), regardless of selector
 * specificity — the opposite of what you'd expect. The markdown editor's
 * padding reset (`px-4! py-3!` in Filament's markdown-editor.css) is exactly
 * such a layered `!important`, which is why an unlayered override for it
 * silently lost even though devtools showed it as "applied". Putting our
 * own overrides in that same `components` layer puts them on equal footing,
 * where normal specificity/source-order rules decide (and we come later).
 */
@layer components {
    .quick-add-title .fi-input-wrp {
        box-shadow: none !important; /* tue à la fois la bordure ET le ring focus, les deux sont des box-shadow Tailwind */
        background: transparent !important;
    }

    .quick-add-description .EasyMDEContainer .CodeMirror {
        padding-inline: 0 !important;
        padding-block: 0 !important;
        padding: 0 !important;
    }

    .quick-add-description .fi-input-wrp {
        box-shadow: none !important; /* tue à la fois la bordure ET le ring focus, les deux sont des box-shadow Tailwind */
        background: transparent !important;
    }

    /*
     * Filament picks the button's bg/text shades dynamically (see
     * `.fi-btn:not(.fi-outlined).fi-color:not(label) { background-color:
     * var(--bg); color: var(--text) }` in Filament's own CSS) via classes
     * like `.fi-bg-color-400`/`.fi-text-color-900` that just set the `--bg`/
     * `--text` variables. Because `primary`'s base shade (500) reads as
     * "light" (lightness >= 0.65), Filament defaults every primary button to
     * a light background + dark text pairing instead of a solid dark button
     * with white text. Overriding the same two variables here — instead of
     * `background-color`/`color` directly — plugs into that exact mechanism
     * rather than fighting it.
     */
    .fi-btn.fi-color-primary:not(.fi-outlined) {
        --bg: var(--primary-700) !important;
        --text: #fff !important;
    }

    /*
     * Able Pro's real page container: full-width layout instead of
     * Filament's default `fi-width-7xl` cap (80rem/1280px), with the
     * template's own padding/max-width values instead of Filament's
     * responsive `padding-inline` steps on `.fi-main`.
     */
    .fi-width-7xl {
        max-width: 1800px !important;
    }

    .fi-main {
        padding: 28px 28px 60px !important;
    }
}

.el-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    padding: 0.125rem 0.300rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25rem;
}

/*
 * Element-type badges (tâche/réunion/jalon/chantier) — independent from the
 * semantic status colors (danger/warning/success used for blocked/waiting/
 * done etc.) so a type never visually collides with a status. Matches
 * HasElementPresentation::typeColor() (task=primary, meeting=pink,
 * milestone=danger, chantier=orange) — that trait's dots/icons and these
 * badges are meant to always agree.
 *
 * Usage: <span class="el-type-badge el-type-{{ $element->type->code }}">...</span>
 */



.el-type-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    padding: 0.125rem 0.300rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25rem;
}

.el-type-task {
    background-color: #eef3ff;
    color: #3161d1;
}
.dark .el-type-task {
    background-color: rgba(70, 128, 255, .14);
    color: #8fb4ff;
}

.el-type-meeting {
    background-color: #fdf2f8;
    color: #be185d;
}
.dark .el-type-meeting {
    background-color: rgba(244, 114, 182, .14);
    color: #f472b6;
}

.el-type-milestone {
    background-color: #fef2f2;
    color: #b91c1c;
}
.dark .el-type-milestone {
    background-color: rgba(248, 113, 113, .14);
    color: #f87171;
}

.el-type-chantier {
    background-color: #fff7ed;
    color: #c2410c;
}
.dark .el-type-chantier {
    background-color: rgba(251, 146, 60, .14);
    color: #fb923c;
}

/*
 * Status badges (à faire/en cours/bloqué/en attente/terminé/annulé) — unlike
 * .el-type-*, this reuses the EXISTING registered Filament colors via var()
 * instead of hardcoded hex, because HasElementPresentation::statusColor()
 * already maps these categories onto the right semantic slots (primary/
 * danger/warning/success/gray) everywhere else in the app (tabs, dots,
 * stat tiles) — referencing the same tokens guarantees these badges can
 * never drift out of sync with that mapping.
 *
 * Usage: <span class="el-status-badge el-status-{{ $status->category }}">...</span>
 */
.el-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    padding: 0.125rem 0.300rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25rem;
}

/* 'todo' and 'cancelled' share the same neutral gray — statusColor() has no
   distinct case for either (both fall through to its 'gray' default). */
.el-status-todo,
.el-status-cancelled {
    background-color: var(--gray-100);
    color: var(--gray-500);
}
.dark .el-status-todo,
.dark .el-status-cancelled {
    background-color: color-mix(in oklab, var(--gray-500) 10%, transparent);
    color: var(--gray-400);
}

.el-status-in_progress {
    background-color: var(--primary-50);
    color: var(--primary-600);
}
.dark .el-status-in_progress {
    background-color: color-mix(in oklab, var(--primary-500) 10%, transparent);
    color: var(--primary-400);
}

.el-status-blocked {
    background-color: var(--danger-50);
    color: var(--danger-600);
}
.dark .el-status-blocked {
    background-color: color-mix(in oklab, var(--danger-500) 10%, transparent);
    color: var(--danger-400);
}

.el-status-waiting {
    background-color: var(--warning-50);
    color: var(--warning-600);
}
.dark .el-status-waiting {
    background-color: color-mix(in oklab, var(--warning-500) 10%, transparent);
    color: var(--warning-400);
}

.el-status-done {
    background-color: var(--success-50);
    color: var(--success-600);
}
.dark .el-status-done {
    background-color: color-mix(in oklab, var(--success-500) 10%, transparent);
    color: var(--success-400);
}