/**
 * Hand-written, plain CSS — deliberately NOT run through Tailwind/Vite.
 *
 * This project's asset pipeline is on Tailwind v4, while Filament v3's own
 * theme-build tooling (`php artisan make:filament-theme`) is built around
 * Tailwind v3 and explicitly warns when it detects v4 — see PROGRESS.md
 * (2026-09-10, "custom Filament theme investigation") for the full
 * investigation. Rather than downgrading the whole project's Tailwind
 * version (or routing through v4's legacy `@config` compatibility bridge)
 * just to re-skin the admin sidebar, this file is registered as a plain
 * static asset via Panel::assets() + `php artisan filament:assets` (a file
 * copy into public/, not a build step) — zero Tailwind/Vite involvement,
 * trivially reversible (remove the ->assets() line).
 *
 * Approved design tokens (dark ink sidebar, lime accent, Inter throughout).
 * The lime *accent color itself* (buttons, links, focus rings, active
 * states that use Filament's own `primary` color) is handled separately
 * via ->colors(['primary' => Color::hex('#C1E006')]) in AdminPanelProvider
 * — Filament's own theming API already covers that without any custom
 * CSS. This file only handles what ->colors() cannot: the sidebar's own
 * dark background (independent of the light/dark mode toggle) and the
 * brand typeface.
 *
 * Originally Space Grotesk (headings/nav) + Inter (body), per the first
 * approved mockup. Switched to Inter everywhere after real production
 * feedback reported broken-looking headings/nav — confirmed via Google
 * Fonts' own language-support data that Space Grotesk has NO Greek
 * glyphs at all (Latin/Vietnamese/Pinyin only), while Inter explicitly
 * supports Greek (2000+ glyphs across 147 languages). Every piece of
 * Greek text set in Space Grotesk was silently falling back to the
 * browser default font — that fallback, not a CSS bug, was almost
 * certainly what looked "broken".
 */

/*
 * Inter is self-hosted (public/fonts/inter/inter.css, loaded by both panels via
 * Panel::font(..., LocalFontProvider)) — no request to Google or Bunny. Before
 * 2026-10-02 this file ALSO @imported it from Google Fonts on top of Filament's own
 * Bunny request: two CSS fetches + eight font files per page, all third-party.
 */

:root {
    --ink: #1A1D13;
    --ink-soft: #5B6152;
    --paper: #F7F8F3;
    --surface: #FFFFFF;
    --line: #E3E6DC;
    --brand: #C1E006;
    --brand-ink: #1A1D13;
    /*
     * Sidebar-contrast audit (2026-10-01, see PROGRESS.md). Dedicated token,
     * NOT a change to --ink-soft itself — that one is shared with light-
     * background UI elsewhere in this file (stat cards, budget bars), where
     * its existing #5B6152 is fine; it only fails against the dark sidebar.
     * Measured: --ink-soft on --ink was 2.67:1 (fails WCAG AA's 4.5:1 for
     * normal text). This light, near-white neutral measures 12.3:1 (AAA),
     * and stays a plain gray rather than tinted lime, so it reads clearly as
     * "not selected" next to the --brand-colored active item (11.34:1 of its
     * own, a different hue) — no risk of confusing the two.
     */
    --sidebar-nav-inactive: #D9DCD2;
}

/*
 * Inter everywhere — body/UI/data AND headings/nav/brand moments alike
 * (see the docblock above for why headings/nav no longer use Space
 * Grotesk). .fi-body alone would cascade to everything as inherited
 * text, but the heading/nav/logo selectors are kept explicit rather than
 * relying on inheritance, in case a future Filament version sets its own
 * font-family somewhere further down the tree.
 */
.fi-body,
.fi-header-heading,
.fi-sidebar-item-label,
.fi-sidebar-group-label,
.fi-logo {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/*
 * Main workspace background ("paper") — light mode only, deliberately;
 * dark mode should still show Filament's own normal dark palette, only
 * the sidebar below is meant to stay dark unconditionally.
 *
 * Needs !important for a reason confirmed by inspecting the actual
 * rendered <head> (not assumed): this asset's <link> is injected BEFORE
 * Filament's own compiled css/filament/filament/app.css, not after — so
 * without !important, Filament's own `.bg-gray-50` utility class (equal
 * specificity, later in the cascade) would win regardless of dark mode.
 * Scoped to `html:not(.dark)` (Filament's dark-mode toggle sets `dark` on
 * <html>) so it never fights the real dark-mode background.
 */
html:not(.dark) .fi-body {
    background-color: var(--paper) !important;
}

/*
 * Dark ink sidebar — intentionally the SAME in both light and dark mode
 * (a fixed brand element, not something the theme toggle should affect).
 * !important is required here for the same load-order reason as the
 * .fi-body rule above (this stylesheet loads before Filament's own
 * compiled CSS) — deliberate and narrowly scoped to these specific
 * properties, not a general pattern used elsewhere in this file.
 */
.fi-sidebar,
.fi-sidebar-header {
    background-color: var(--ink) !important;
}

.fi-sidebar-item-label {
    color: var(--sidebar-nav-inactive) !important;
}

.fi-sidebar-item-icon {
    color: var(--sidebar-nav-inactive) !important;
}

.fi-sidebar-item-button:hover {
    background-color: rgb(255 255 255 / 6%) !important;
}

/*
 * Active nav item — updated 2026-09-15 to match the approved mockup
 * (confirmed live against it): dark sidebar background throughout, no
 * full lime fill on the active item — just a 3px lime accent line on
 * its left edge, with lime-colored label/icon text instead of the
 * brand-ink-on-lime combination the old full-fill version needed.
 *
 * border-left is reserved (transparent) on EVERY item, active or not,
 * and only its COLOR changes on .fi-active — not adding a border only
 * on the active item — so the label/icon never shifts 3px sideways
 * compared to its inactive siblings. All !important for the same
 * load-order reason as every other override in this file (this
 * stylesheet loads before Filament's own compiled CSS).
 */
.fi-sidebar-item-button {
    border-left: 3px solid transparent !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: transparent !important;
    border-left-color: var(--brand) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--brand) !important;
}

/*
 * Phase 2+ — restyling of existing components to more closely match the
 * approved mockup, still no build pipeline. Each of these was prototyped
 * live in a real browser (injected <style>, real data, real pages) before
 * being written here — see PROGRESS.md (2026-09-10, "Phase 2+ restyling
 * investigation") for that verification.
 */

/*
 * Compact column spacing — real production feedback: tables (e.g.
 * Συνομιλίες) needed horizontal scroll to reach the actions column.
 * Measured live (window.innerWidth vs the table's own scrollWidth,
 * not a visual guess) at two common widths before writing this:
 *
 *   - Grouping the two admin-only row actions into an ActionGroup
 *     (see ConversationResource) alone was NOT enough — at 1280px
 *     (a common, on the smaller side, laptop width) the table's own
 *     content still needed ~188px more than was available.
 *   - Reducing .fi-ta-text/.fi-ta-actions-cell padding from Tailwind's
 *     default (px-3 py-4) closed about 115px of that.
 *   - The rest came from .fi-ta-text having no upper bound at all: an
 *     Agent name or a visitor's linked lead name+phone could grow the
 *     whole column arbitrarily wide. A max-width + ellipsis on the
 *     text columns closed the remaining gap completely (measured 0px
 *     overflow at 1280px with realistic data) — and unlike a padding
 *     tweak, this holds regardless of how long a future agent name or
 *     lead name ends up being, not just for the specific data on hand
 *     when this was measured.
 *   - Restoring the "Προβολή" action's text label (i.e. NOT making it
 *     icon-only) made zero difference once the above was in place —
 *     so it was deliberately left as a full text link, easier to
 *     recognize than an icon alone.
 */
.fi-ta-text {
    padding: 0.625rem 0.5rem;
    max-width: 220px;
}

.fi-ta-text > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-ta-actions-cell > div {
    padding: 0.625rem 0.5rem;
}

.fi-ta-actions {
    gap: 0.375rem !important;
}

.fi-ta-header-cell {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/*
 * Credit-refresh links widget ("Ανανέωση Credits") — strips the default
 * Filament card chrome (white background, shadow, ring border) the same
 * way the bare stat widgets above already do, replacing it with a thin
 * top divider instead of a floating card. Scoped to .bp-credit-links (a
 * wrapper div added in credit-links.blade.php) rather than .fi-section
 * directly — that class is used throughout the whole admin panel
 * (resource pages, forms, etc.), so an unscoped override would strip card
 * chrome everywhere, not just this one widget.
 *
 * Light-mode only: --line (#E3E6DC, a pale "paper" tone) has no dark-mode
 * counterpart defined anywhere in this file, same reason .fi-body's paper
 * background and .fi-ta-table's header above are also light-mode-scoped —
 * dark mode keeps Filament's own default card look here, unverified
 * beyond that (no browser available to check dark mode in this pass).
 */
html:not(.dark) .bp-credit-links .fi-section {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-top: 1px solid var(--line) !important;
}

html:not(.dark) .bp-credit-links .fi-section-content {
    padding: 0.75rem 0 !important;
}

/*
 * AgentResource's list table — a blanket `max-width: 150px` on every
 * text cell (see git history) was the original fix for horizontal
 * overflow (2026-09-15, 10 default-visible columns vs. Conversation
 * Resource's 7). Real production feedback the same day found that same
 * blanket cap TOO tight: it truncated medium-length, entirely normal
 * values ("Etilos Assistant" → "Etilos As...", "Claude Haiku" →
 * "Claude Haik..."), which the earlier fix hadn't accounted for — it
 * only checked that the table fit horizontally, not that individual
 * cells stayed readable.
 *
 * Replaced with PER-COLUMN caps instead of one blanket rule, using
 * Filament's own per-column cell class — `fi-table-cell-{column-name,
 * kebab-cased}` — confirmed by reading vendor/filament/tables/resources/
 * views/index.blade.php directly (`'fi-table-cell-' .
 * str($column->getName())->camel()->kebab()`), the same
 * read-the-actual-compiled/generated-output verification technique used
 * elsewhere in this file (e.g. the job-status grid fix below) rather
 * than assuming a class name. 'tenant.name' is deliberately NOT given
 * its own override here — Str::kebab() does not touch the literal `.`
 * in that column's raw name, so a selector for it would need a
 * different, unverified escaping and wasn't worth the risk; it (along
 * with is_active/last_activity/budget_usage, none of which were
 * reported as truncating) simply falls through to the plain, unscoped
 * `.fi-ta-text { max-width: 220px }` rule above — the exact same
 * default every other resource's table already uses without issue.
 *
 * Widths chosen:
 *   - name/ai_provider/model: 200px (the low end of the requested
 *     "~200-220px" range, chosen deliberately over the high end as a
 *     safety margin — this couldn't be re-verified with a live browser
 *     in this pass, so erring tighter here costs nothing readability-
 *     wise but leaves more room in the row's total width budget).
 *   - cost: kept at the original 150px — this is the one place a tight
 *     cap is still wanted (the ->description() cost breakdown, e.g.
 *     "Claude: €1.23 · Voyage: €0.04", is expected to truncate; the €
 *     figure itself is short and unaffected).
 *
 * Realistic (not worst-case-cap) content-width estimate at these
 * values, ~7px/char in Inter at text-sm, +16px cell padding each:
 *   Πελάτης ~100-140px, Όνομα ~150-180px (was truncating at 150 — now
 *   has real headroom), Πάροχος ~140-160px ("Anthropic (Claude)"),
 *   Μοντέλο ~180-216px worst case ("Claude Haiku 4.5 (προεπιλογή)" —
 *   the one label still close to its cap; see AgentResource.php's
 *   MODEL_OPTIONS, whose "(προεπιλογή)"/"(premium)" suffixes are
 *   form-Select labels being reused verbatim in the read-only table
 *   too, a separate, pre-existing detail worth knowing about but not
 *   something this pass changes), Ενεργός ~60px (icon only), Τελευταία
 *   Δραστηριότητα ~190px ("Καμία δραστηριότητα ακόμα"), Κόστος ~166px
 *   (capped), Χρήση Μηνιαίου Ορίου ~190px, actions ~60-120px depending
 *   on icon-vs-label rendering. Sum lands roughly in the 1100-1400px
 *   range depending on real data and exact Filament chrome (sidebar/
 *   padding) width, which this sandbox has no live browser to measure
 *   precisely — NOT live-measured, same caveat as the original 150px
 *   fix's own comment; needs the same live confirmation at 1280-1440px
 *   from the user post-deploy that every other CSS-only fix this
 *   session has gotten.
 *
 * 2026-09-17: promoted from ellipsis-truncation (above) to wrap, min-width
 * + max-width-as-ceiling — the same technique the ConversationResource
 * "Επισκέπτης" rule below prototyped. name/ai_provider/model were exactly
 * the columns this comment already flagged as sitting close to their cap
 * ("Claude Haiku 4.5 (προεπιλογή)" at ~180-216px against a 200px max), so
 * content that still exceeds 200px now wraps onto a second line instead
 * of silently re-truncating. 140px min-width (below the request's
 * suggested "~200-220px", since that range described the ceiling, not a
 * floor) keeps short values (e.g. a bare provider name) from collapsing
 * the column. `cost` is deliberately left on the old ellipsis behavior —
 * its truncation is still wanted (see above).
 */
.fi-resource-agents .fi-table-cell-name .fi-ta-text,
.fi-resource-agents .fi-table-cell-ai-provider .fi-ta-text,
.fi-resource-agents .fi-table-cell-model .fi-ta-text {
    min-width: 140px;
    max-width: 200px;
}

.fi-resource-agents .fi-table-cell-name .fi-ta-text > *,
.fi-resource-agents .fi-table-cell-ai-provider .fi-ta-text > *,
.fi-resource-agents .fi-table-cell-model .fi-ta-text > * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.fi-resource-agents .fi-table-cell-cost .fi-ta-text {
    max-width: 150px;
}

/*
 * Budget-usage progress bar (AgentResource, "Χρήση Μηνιαίου Ορίου" column) —
 * Phase 3 of the money-based budget system. Plain HTML/CSS, no charting
 * library, same technique as every other piece of this file: a track div
 * plus an inner fill div whose width is set inline (per-record, in
 * AgentResource::budgetUsageBarHtml()) since that value depends on runtime
 * data, not something a static stylesheet can express.
 *
 * --brand for the normal fill (consistent with the rest of the admin's
 * lime accent); a separate danger color only when
 * ConversationBudgetGuard::check() reports the limit already exceeded —
 * reusing Filament's own --danger-600 runtime variable, same as the
 * scheduled-jobs-status cards above, rather than inventing a new red.
 */
.bp-budget-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 120px;
}

.bp-budget-bar-track {
    width: 100%;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--line);
    overflow: hidden;
}

.bp-budget-bar-fill {
    height: 100%;
    border-radius: 9999px;
    background-color: var(--brand);
}

.bp-budget-bar-fill--danger {
    background-color: rgb(var(--danger-600));
}

.bp-budget-bar-text {
    font-size: 0.75rem;
    color: var(--ink-soft);
}

.bp-budget-nolimit {
    font-size: 0.75rem;
    color: var(--ink-soft);
    font-style: italic;
}

/*
 * Scheduled-job status cards ("Κατάσταση Προγραμματισμένων Ελέγχων") —
 * 2-column grid per the approved mockup. Replaces the Tailwind utility
 * classes previously on this div directly in scheduled-jobs-status.blade.php
 * (`grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4`) — confirmed live
 * (2026-09-15, real production feedback: rendered as a single stacked
 * column, not a grid) and confirmed structurally by grepping the compiled
 * bundle (public/css/filament/filament/app.css): `.grid`/`.grid-cols-1`/
 * `.gap-4` ARE present (Filament's own templates use them elsewhere), but
 * `sm:grid-cols-2`/`lg:grid-cols-4` are NOT — the exact same silent-failure
 * class of bug already documented elsewhere in this file (this app has no
 * Tailwind build scanning its own Blade files, only Filament's precompiled
 * bundle). Same fix pattern as everywhere else in this file: hand-written,
 * always-loaded plain CSS instead of an arbitrary utility class.
 *
 * Fixed 2-column layout (not the original's 4-column desktop breakpoint —
 * the mockup itself shows 2 columns), with an explicit single-column
 * fallback below 640px (Tailwind's own `sm` breakpoint) so this doesn't
 * break on narrow viewports.
 */
.bp-job-status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (max-width: 640px) {
    .bp-job-status-grid {
        grid-template-columns: 1fr;
    }
}

/*
 * "Κενά Γνώσης" nav item — bare notification dot instead of Filament's
 * default numeric badge pill, matching the approved mockup exactly
 * (2026-09-16). KnowledgeGapResource::getNavigationBadge() returns a
 * non-blank placeholder ('•') whenever any gap exists for the selected
 * agent — this rule shrinks that badge down into a small plain circle
 * with no visible text, rather than styling it as a normal count pill.
 *
 * No resource-specific class exists on a sidebar <li>/<a> to scope this
 * to just one nav item (confirmed by reading vendor/filament/filament/
 * resources/views/components/sidebar/item.blade.php — unlike table
 * cells or resource pages, nav items carry no per-resource class at
 * all), so this uses :has() with the item's own href instead — same
 * technique, and same browser-support caveat (Chrome/Edge 105+, Safari
 * 15.4+, Firefox 121+ — a reasonable assumption for this internal admin
 * panel), as the scheduled-job status cards rule above. `$=` (ends-with)
 * matches the route path regardless of scheme/host.
 *
 * Shared sizing rule (no color) plus one color rule per
 * KnowledgeGapResource::getNavigationBadgeColor() outcome (2026-09-17) —
 * warning/orange while any gap is open, success/green once all are
 * resolved/ignored. `<x-filament::badge :color="...">` already renders a
 * `fi-color-{warning,success}` class on the badge itself (confirmed in
 * vendor/filament/support/resources/views/components/badge.blade.php),
 * so this keys off that the same way the scheduled-jobs-status cards
 * above key off each card's own badge color — no separate lookup needed.
 * Replaces the single hardcoded --brand fill used until 2026-09-16 (back
 * when the badge was unconditionally lime and only ever open-or-hidden).
 *
 * 2026-09-18: PortalKnowledgeGapResource reuses this exact same
 * technique for its own nav badge (ready-for-approval AI drafts,
 * warning-only — see that class's own getNavigationBadge() docblock), so
 * this file (shared by both panels — see PortalPanelProvider's identical
 * Css::make() registration) matches both routes' hrefs in one selector
 * instead of duplicating the whole rule block per panel.
 *
 * Design System Audit, piece 6 (2026-10-01, see PROGRESS.md) —
 * PortalKnowledgeGapResource::getNavigationBadgeColor() also returns
 * 'success' once every gap is resolved (own docblock above, line ~319),
 * but the brand-lime override below had only ever matched the admin
 * href, so Portal's dot silently fell back to Filament's default green.
 * Added the same /portal/knowledge-gaps selector here that the
 * warning rule above already had.
 */
.fi-sidebar-item:has(> a[href$="/admin/knowledge-gaps"]) .fi-badge,
.fi-sidebar-item:has(> a[href$="/portal/knowledge-gaps"]) .fi-badge {
    width: 0.5rem !important;
    height: 0.5rem !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 9999px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    box-shadow: none !important;
}

.fi-sidebar-item:has(> a[href$="/admin/knowledge-gaps"]) .fi-badge.fi-color-warning,
.fi-sidebar-item:has(> a[href$="/portal/knowledge-gaps"]) .fi-badge.fi-color-warning {
    background-color: rgb(var(--warning-600)) !important;
}

.fi-sidebar-item:has(> a[href$="/admin/knowledge-gaps"]) .fi-badge.fi-color-success,
.fi-sidebar-item:has(> a[href$="/portal/knowledge-gaps"]) .fi-badge.fi-color-success {
    background-color: var(--brand) !important;
}

/*
 * ConversationResource's "Επισκέπτης" column — PROTOTYPE (2026-09-16) of
 * a different technique for the blanket .fi-ta-text max-width/ellipsis
 * rule above, investigated after real feedback that the fixed 220px cap
 * (used unscoped, on every table in the admin panel) truncates
 * legitimately medium-length content while leaving unused space in
 * OTHER columns — table-layout is `table-auto` (confirmed in
 * vendor/filament/tables/resources/views/components/table.blade.php),
 * which distributes extra row width unevenly across columns rather than
 * giving it to whichever column actually needs it.
 *
 * This column was picked as the prototype target because it's the exact
 * case the comment above (2026-09-15, "Compact column spacing") already
 * names as a known long-content source ("a visitor's linked lead name
 * and phone could grow the whole column arbitrarily wide") but never
 * actually fixed — ConversationResource.php's visitorLabel() can return
 * up to ~40 characters (e.g. "Παναγιώτα Δημητρακοπούλου (6944567890)"),
 * well past what silently ellipsis-truncates at 220px.
 *
 * Two changes from the global rule, deliberately scoped to just this one
 * column (.fi-table-cell-visitor-uuid, Filament's real per-column cell
 * class — see AgentResource's own column-width comment for how this was
 * confirmed against Filament's source):
 *   - min-width (a floor) instead of relying only on a tight max-width
 *     ceiling — the column can grow to fit realistic content instead of
 *     being pinned to a number chosen without knowing what's in it.
 *   - white-space: normal instead of nowrap+ellipsis — content that
 *     still exceeds the (generous, safety-net) max-width WRAPS onto a
 *     second line instead of being hidden. Applies to both the main
 *     label and the description line below it (both are direct children
 *     of .fi-ta-text — see text-column.blade.php), so the full visitor
 *     UUID shown as description text also wraps instead of truncating.
 *
 * max-width is NOT removed entirely — table-auto still needs some bound
 * per column or one unusually long value could widen the whole table
 * past the viewport, reintroducing the original horizontal-scroll
 * problem this file's very first table-width fix (see above) exists to
 * prevent. 260px is a deliberately generous ceiling: comfortably fits a
 * typical single Greek first+last name on one line, wraps only for the
 * longer lead-name+phone combinations.
 *
 * Live-verification pending (no browser in this sandbox) — this is a
 * PROTOTYPE on one resource only, not yet applied anywhere else; the
 * decision to extend it to KnowledgeSourceResource/LeadResource (the
 * other two candidates from the 2026-09-16 investigation) or to revise
 * the approach depends on that live check.
 */
.fi-resource-conversations .fi-table-cell-visitor-uuid .fi-ta-text {
    min-width: 180px;
    max-width: 260px;
}

.fi-resource-conversations .fi-table-cell-visitor-uuid .fi-ta-text > * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/*
 * KnowledgeGapResource (admin) + PortalKnowledgeGapResource — table
 * alignment/color fix (2026-09-22 investigation, approved mockup). Both
 * resources share the SAME slug ("knowledge-gaps" — confirmed by reading
 * vendor/filament/filament/resources/views/resources/pages/list-records.blade.php,
 * the same `.fi-resource-{slug}` class this file's other per-resource
 * rules already key off), and Filament's own body class carries no
 * per-PANEL marker, so ONE selector genuinely covers both panels' list
 * pages here — no need to duplicate this block per panel the way the
 * sidebar nav-dot rule above had to (that one keys off the full href
 * path, which DOES differ between /admin/... and /portal/...).
 *
 * Same wrap-instead-of-truncate technique as AgentResource's name/ai_
 * provider/model columns and ConversationResource's visitor-uuid column
 * above — "Ερώτηση" (the `question` column, both resources) is exactly
 * the free-text column most likely to sit near/past the blanket
 * .fi-ta-text 220px cap.
 */
.fi-resource-knowledge-gaps .fi-table-cell-question .fi-ta-text {
    min-width: 220px;
    max-width: 420px;
}

.fi-resource-knowledge-gaps .fi-table-cell-question .fi-ta-text > * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/*
 * Knowledge sources list (admin and Portal share the slug `knowledge-sources`), «Κατάσταση» column: under the badge of a failed source sits the
 * reason in plain Greek («Η ανανέωση δεν ολοκληρώθηκε. Δοκίμασε «Ανανέωση τώρα» ή επικοινώνησε μαζί μας.»). The blanket `.fi-ta-text` cap (220px, nowrap,
 * ellipsis) cut it to «Η ανανέωση δεν ολοκληρ…». The column may be wider and the reason wraps onto as many lines as it needs. (2026-10-09)
 */
.fi-resource-knowledge-sources .fi-table-cell-status .fi-ta-text {
    min-width: 220px;
    max-width: 380px;
}

.fi-resource-knowledge-sources .fi-table-cell-status .fi-ta-text > * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/*
 * Exact pastel badge colors per the approved mockup (2026-09-22, hex
 * values supplied directly — not derived from Filament's own color
 * system). Scoped by column + Filament's own existing
 * `.fi-color-{color}` class (already rendered by
 * <x-filament::badge :color="...">, same technique the sidebar nav-dot
 * rule above already keys off), so each rule hits only the ONE state it
 * names, never a same-color-family state in a different column.
 *
 * `failure_reason` exists on the ADMIN resource only (an explainability
 * column PortalKnowledgeGapResource deliberately doesn't expose — see
 * that resource's own table()) — its two rules below simply never match
 * anything on the portal panel, not a bug needing a separate selector.
 *
 * `.fi-table-cell-suggested-answer-status .fi-color-danger` (Design
 * System Audit, 2026-10-01, see PROGRESS.md) — added once the audit
 * flagged that this page showed TWO visually different "danger" badges
 * side by side: `status` (open) already got the pastel treatment below,
 * but `suggested_answer_status` (failed) sat right next to it in plain
 * Filament red, even though both are the exact same semantic Filament
 * `danger` color in the PHP source. Same pastel value as `status`'s own
 * danger override, for visual consistency across both columns on the
 * same row.
 *
 * Every other status/suggested_answer_status/failure_reason value not
 * listed below keeps Filament's own default badge look (not touched by
 * this pass).
 */
.fi-resource-knowledge-gaps .fi-table-cell-status .fi-badge.fi-color-danger,
.fi-resource-knowledge-gaps .fi-table-cell-suggested-answer-status .fi-badge.fi-color-danger {
    background-color: #FBEBD6 !important;
    color: #9A5B10 !important;
    box-shadow: none !important;
}

.fi-resource-knowledge-gaps .fi-table-cell-status .fi-badge.fi-color-success {
    background-color: #E4EEDD !important;
    color: #3F6B2E !important;
    box-shadow: none !important;
}

.fi-resource-knowledge-gaps .fi-table-cell-failure-reason .fi-badge.fi-color-gray {
    background-color: #EFEEE6 !important;
    color: #6E6D62 !important;
    box-shadow: none !important;
}

.fi-resource-knowledge-gaps .fi-table-cell-failure-reason .fi-badge.fi-color-warning {
    background-color: #FDECC8 !important;
    color: #8A5A12 !important;
    box-shadow: none !important;
}

/*
 * AgentTemplateResource — table wrap fix (2026-09-30 polish pass, see
 * PROGRESS.md). Same wrap-instead-of-truncate technique as
 * AgentResource's own name/ai_provider/model rule above — a template
 * name like "Πρότυπο Υπηρεσιών/Ραντεβού" sat right at the blanket
 * .fi-ta-text 220px ellipsis cap and got cut mid-word ("...Ραντεβς").
 * Admin-only resource, no portal equivalent, so only one panel's slug
 * needed here.
 */
.fi-resource-agent-templates .fi-table-cell-name .fi-ta-text {
    min-width: 140px;
    max-width: 200px;
}

.fi-resource-agent-templates .fi-table-cell-name .fi-ta-text > * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/*
 * Table-wrap audit (2026-09-30 polish pass, see PROGRESS.md) — the
 * same wrap-instead-of-truncate technique applied to two more resources
 * found missing it: AppointmentResource/LeadResource's own `note`
 * columns are free text (with a 50-char ->limit() as the intended
 * preview length), but without this override the blanket .fi-ta-text
 * 220px ellipsis cap could still cut that preview off early, mid-word,
 * before it ever reaches its own "..." boundary.
 *
 * LeadResource (admin) and PortalLeadResource share the same slug
 * ("leads" — PortalLeadResource sets it explicitly, LeadResource's own
 * is Filament's auto-derived default, confirmed via `route:list`) so
 * ONE selector covers both panels here, same reasoning as the
 * knowledge-gaps rule above. AppointmentResource has no portal
 * equivalent, so only its own admin slug is needed.
 */
.fi-resource-appointments .fi-table-cell-note .fi-ta-text,
.fi-resource-leads .fi-table-cell-note .fi-ta-text {
    min-width: 140px;
    max-width: 260px;
}

.fi-resource-appointments .fi-table-cell-note .fi-ta-text > *,
.fi-resource-leads .fi-table-cell-note .fi-ta-text > * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/*
 * Mobile responsiveness audit (2026-10-01, see PROGRESS.md) — embed-code
 * snippet (resources/views/filament/forms/embed-code.blade.php, shared by
 * AgentResource and PortalAgentResource's "Κώδικας Ενσωμάτωσης" tab). The
 * Blade view used raw Tailwind utility classes (`absolute`, `top-2`, `end-2`,
 * `pe-24`, `py-1.5`) that this app's precompiled Filament bundle does not
 * contain (same "no Tailwind build scanning custom Blade files" silent-
 * failure class already documented elsewhere in this file) — confirmed by
 * grepping public/css/filament/filament/app.css: `.absolute{` and
 * `.relative{` ARE present (common Filament-template classes), but
 * `.top-2{`/`.end-2{`/`.pe-24{`/`.py-1\.5{` are NOT. Without top/end offsets,
 * the "Αντιγραφή" (copy) button rendered immediately after the full-width
 * textarea instead of pinned inside its top-right corner — pushed off the
 * right edge entirely on any viewport narrower than ~460px (confirmed: on a
 * 375px phone it sat at x=375-463, completely off-screen and un-tappable).
 * Hand-written rules below, same pattern as every other fix in this file.
 */
.bp-embed-code-field {
    padding-inline-end: 6rem;
}

.bp-embed-code-copy-btn {
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 0.5rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

/*
 * Etilos mockup design-pattern audit, item 2 (2026-10-01, see PROGRESS.md).
 * Every form field label (`.fi-fo-field-wrp-label` — the "label above an
 * input" class used by TextInput/Select/Textarea/etc. across every resource
 * in both panels) renders with ZERO deliberate typography today: confirmed
 * by grepping public/css/filament/forms/forms.css — the class does not
 * appear anywhere in Filament's own precompiled bundle (same "no Tailwind
 * build scanning our actual usage" root cause as every other fix in this
 * file). Measured live (light mode, real computed styles): labels render at
 * the plain browser default, 16px/400 weight — confirmed against the Etilos
 * mockups' own explicit `.form-label` rule (13px/500, fixed height so
 * fields in neighbouring grid columns start at the same y — the exact
 * "ασύμμετρο label ύψος" problem those mockups fix, see e.g. mockup 08's
 * own docblock).
 *
 * `min-height`, not a hard `height` like the mockup: this app has some
 * longer Greek labels that can wrap to two lines, and a fixed height would
 * clip them instead of just failing to align — same column-alignment intent,
 * without that regression risk.
 */
.fi-fo-field-wrp-label {
    font-size: 0.8125rem;
    font-weight: 500;
    min-height: 1.25rem;
}

/*
 * Contrast repair (2026-10-02, see PROGRESS.md "visual redesign"). Every
 * number below was measured live with a script that walks all visible text and
 * computes the WCAG ratio against the real composited background, on both
 * panels — not estimated. Before this block: white button labels on lime
 * 1.87:1; primary links/active tab/current page 1.79-1.87:1; the sidebar
 * wordmark and user name 1.16:1 (Filament's light-mode text colors on the
 * always-dark sidebar); sidebar group labels and "Καλώς ήρθες" 3.54:1.
 *
 * Text-colored uses of the primary color are fixed at the source, in the color
 * ramp (App\Filament\Support\BrandColors: shade 600 is a dark olive). What a
 * ramp cannot express is the approved look of a SOLID primary button — brand
 * lime with brand-ink text — so that is done here. `[class*="bg-custom-600"]`
 * matches only solid buttons (outlined/ghost ones carry no bg-custom-600).
 */
:root {
    --brand-hover: color-mix(in srgb, var(--brand) 84%, var(--ink));
    --sidebar-text-strong: #F4F5EF;
    --sidebar-text-muted: #A3A99A;
}

.fi-btn.fi-btn-color-primary[class*="bg-custom-600"] {
    background-color: var(--brand) !important;
    color: var(--brand-ink) !important;
}

.fi-btn.fi-btn-color-primary[class*="bg-custom-600"]:hover {
    background-color: var(--brand-hover) !important;
}

/* Sidebar is dark in every mode, so its text must not use the light-mode grays. */
.fi-sidebar .bp-wordmark {
    color: #FFFFFF !important;
}

.fi-sidebar-group-label {
    color: var(--sidebar-text-muted) !important;
}

.fi-sidebar-footer {
    border-color: rgb(255 255 255 / 10%) !important;
}

.fi-sidebar-footer p {
    color: var(--sidebar-text-muted) !important;
}

.fi-sidebar-footer p span,
.fi-sidebar-footer .truncate {
    color: var(--sidebar-text-strong) !important;
}

/*
 * Typography (2026-10-02, visual redesign step 3, see PROGRESS.md). Measured
 * before: page title 30px/36px, table headers the same black 14px as the body
 * cells (no hierarchy), numbers in proportional figures (columns of costs,
 * counts and dates jittered), Greek headings left to wrap wherever.
 *
 * One small scale instead of ad-hoc sizes: 12 (labels/meta), 13 (form labels,
 * table headers), 14 (body/table cells), 24 (page title and stat values). A 28px
 * stat value was tried and wrapped "2 / Απεριόριστο" in a 245px card, so stat
 * values stay 24px; the dashboard composition step revisits the headline metric.
 * No uppercase on Greek text except the sidebar group labels that already were —
 * Greek caps lose their tonos and read poorly at small sizes.
 */
:root {
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-title: 1.5rem;
    --text-metric: 1.5rem;
    --tracking-title: -0.02em;
}

/* Page title: smaller, tighter, balanced across lines. */
.fi-header-heading {
    font-size: var(--text-title) !important;
    line-height: 2rem !important;
    letter-spacing: var(--tracking-title) !important;
    text-wrap: balance;
}

.fi-header-subheading {
    font-size: var(--text-base);
    color: var(--ink-soft);
    text-wrap: pretty;
}

/* Table header: quieter than the data it labels — that is the hierarchy. */
.fi-ta-header-cell-label {
    font-size: var(--text-sm) !important;
    font-weight: 600 !important;
    color: var(--ink-soft) !important;
}

/* Sidebar section labels: small, tracked, and clearly "chrome". */
.fi-sidebar-group-label {
    font-size: var(--text-xs) !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
}

/*
 * Tabular figures wherever numbers line up or change in place — tables, stat
 * values, pagination, badges, chart legends. Not on running text, where
 * proportional digits read better.
 */
.fi-ta-table,
.fi-ta-text,
.fi-ta-pagination,
.fi-pagination,
.fi-badge,
.fi-wi-stats-overview-stat-value,
.fi-in-text,
.bp-hero-value,
.bp-status-value,
.bp-budget-bar-text {
    font-variant-numeric: tabular-nums;
}

.fi-section-header-heading {
    text-wrap: balance;
}

/*
 * Motion and states (2026-10-02, visual redesign step 5, see PROGRESS.md).
 * Measured before: every control transitioned in Tailwind's default 75ms with
 * the default easing (effectively a snap), had no pressed state, and keyboard
 * focus was a 2px ring in the primary color at 50% alpha — roughly 1.4:1
 * against white. There was no prefers-reduced-motion handling anywhere.
 *
 * Rules followed: motion tells you something changed (hover/press/focus), only
 * transform/opacity/colors/shadow animate (never width/height/layout), and
 * exits are never slower than enters. Durations are tokens, not magic numbers.
 */
:root {
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 260ms;
    --focus-ring: var(--ink);
}

/* Interactive surfaces share one timing so the UI feels like one system. */
.fi-btn,
.fi-icon-btn,
.fi-link,
.fi-badge,
.fi-tabs-item,
.fi-dropdown-list-item,
.fi-pagination-item-btn,
.fi-sidebar-item-button,
.fi-sidebar-item-icon,
.fi-sidebar-item-label,
.fi-sidebar-group-button,
.fi-ta-row,
.fi-input-wrp,
.fi-ta-header-cell,
.bp-hero-link,
.bp-job-card {
    transition-property: color, background-color, border-color, box-shadow, transform, opacity, fill, stroke !important;
    transition-duration: var(--dur-fast) !important;
    transition-timing-function: var(--ease-out) !important;
}

.fi-input-wrp {
    transition-duration: var(--dur-base) !important;
}

/* Pressed state: a 1px sink, so a click is acknowledged before the request returns. */
.fi-btn:not(:disabled):not([disabled]):not(.fi-disabled):active,
.fi-icon-btn:not(:disabled):not([disabled]):active {
    transform: translateY(1px) scale(0.985);
}

/*
 * Keyboard focus: a solid, high-contrast outline on every interactive element,
 * visible on light surfaces (ink, ~17:1 on white) and on the dark sidebar
 * (lime, 11.3:1). :focus-visible only — a mouse click shows no ring.
 */
.fi-btn:focus-visible,
.fi-icon-btn:focus-visible,
.fi-link:focus-visible,
.fi-tabs-item:focus-visible,
.fi-dropdown-list-item:focus-visible,
.fi-pagination-item-btn:focus-visible,
.fi-ta-header-cell button:focus-visible,
.fi-breadcrumbs a:focus-visible,
.fi-ta-row a:focus-visible,
.fi-ta-record-actions button:focus-visible,
.fi-input:focus-visible,
[role="tab"]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--focus-ring) !important;
    outline-offset: 2px;
    box-shadow: none;
}

.fi-sidebar a:focus-visible,
.fi-sidebar button:focus-visible,
.fi-sidebar-item-button:focus-visible {
    outline: 2px solid var(--brand) !important;
    outline-offset: -2px;
}

/* Page content fades in once on load. Opacity only: a transform here would
 * turn .fi-page into the containing block for the position:fixed modals. */
@keyframes bp-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fi-page {
    animation: bp-fade-in var(--dur-slow) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    /* The control rules above set their durations from these tokens with
     * !important and a class selector, which beats the universal rule below —
     * so the tokens themselves collapse. (Measured: without this, buttons still
     * transitioned for 0.12s under reduced motion.) */
    :root {
        --dur-fast: 0.01ms;
        --dur-base: 0.01ms;
        --dur-slow: 0.01ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*
 * Sidebar (i) help buttons (2026-10-02, visual redesign step 4, see PROGRESS.md).
 * Markup: resources/views/vendor/filament-panels/components/sidebar/item.blade.php;
 * texts: config/nav_help.php. The button is a sibling of the item link,
 * absolutely placed in the row's right edge; the link reserves room for it so a
 * long label (or the "Κενά Γνώσης" dot) never runs underneath.
 *
 * Portal: always visible — the audience is non-technical customers who will not
 * discover a hover-only affordance, and touch screens have no hover. Admin: the
 * team already knows the product, so it appears on row hover/focus to keep the
 * sidebar calm. `top: 1.25rem` = half the 40px item row, so it stays aligned with
 * the label even when the active item also lists child items below.
 */
.fi-sidebar-item.bp-has-nav-help {
    position: relative;
}

.fi-sidebar-item.bp-has-nav-help > a {
    padding-inline-end: 2.5rem;
}

/*
 * The room for the (i) button must win over theme-theta.css, whose `.fi-sidebar-item-button { padding: … 0.75rem !important }` reset the end padding to 0.75rem:
 * the orange dot of «Κενά Γνώσης» (and any long label) was drawn on top of the (i) icon. The button sits 0.5rem–2.25rem from the end; 2.5rem keeps everything clear of it. (2026-10-09)
 */
.fi-sidebar-item.bp-has-nav-help > a.fi-sidebar-item-button {
    padding-inline-end: 2.5rem !important;
}

.bp-nav-help {
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 1.25rem;
    translate: 0 -50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: #8A9080; /* 5.2:1 on --ink */
    cursor: help;
    opacity: 0;
}

.bp-nav-help-icon {
    width: 1rem;
    height: 1rem;
}

.fi-sidebar-item:hover .bp-nav-help,
.fi-sidebar-item:focus-within .bp-nav-help,
.bp-nav-help:focus-visible,
.bp-nav-help[aria-expanded="true"],
.bp-nav-help--always {
    opacity: 1;
}

.bp-nav-help:hover {
    color: var(--brand);
    background-color: rgb(255 255 255 / 8%);
}

@media (hover: none) {
    .bp-nav-help {
        opacity: 1;
    }
}

/* The tooltip itself: brand ink with light text (15:1), rendered on <body> so the
 * sidebar's overflow cannot clip it. */
.tippy-box[data-theme~="bp-help"] {
    background-color: var(--ink);
    color: var(--sidebar-text-strong);
    font-size: var(--text-sm, 0.8125rem);
    line-height: 1.5;
    border-radius: 0.625rem;
    /* hairline so the tip stays distinct where it overlaps the equally dark sidebar */
    border: 1px solid rgb(255 255 255 / 14%);
    box-shadow: 0 8px 24px rgb(26 29 19 / 28%);
}

.tippy-box[data-theme~="bp-help"] .tippy-content {
    padding: 0.625rem 0.75rem;
}

.tippy-box[data-theme~="bp-help"] > .tippy-arrow {
    color: var(--ink);
}

/*
 * Depth system (2026-10-02, visual redesign step 2, see PROGRESS.md).
 *
 * Measured before: every surface in both panels — page sections, tab containers,
 * the table card, form inputs — carried the identical Filament shadow
 * (`0 0 0 1px rgba(9,9,11,.05), 0 1px 2px rgba(0,0,0,.05)`) at the identical 12px
 * radius, so nothing was above anything: a card inside a card (tabs > sections)
 * looked the same as the card around it, a dropdown looked the same as the page,
 * and hover changed colors but never height. Shadows were neutral black, which
 * reads cold against the warm paper/ink palette.
 *
 * Four elevations, all tinted with the brand ink (so shadows are warm, not gray),
 * each with a meaning:
 *   elev-1  resting surface that holds content (cards, table, sections)
 *   elev-2  raised: hovered/pressed-into-attention interactive surfaces
 *   elev-3  floating: dropdowns, popovers, toasts, tooltips
 *   elev-4  blocking: modal windows
 * Nested containers drop back to a flat hairline on a slightly sunken tone, which
 * is what makes the outer card read as outer. Radius is a scale with intent:
 * 8 controls, 14 cards, 16 overlays, pill only for avatars/counters.
 */
:root {
    --shadow-tint: 26 29 19; /* --ink as rgb channels, for rgb(var(--shadow-tint) / a) */
    --surface-sunken: #FAFBF6;
    --line-strong: #CFD3C4;
    --radius-control: 8px;
    --radius-card: 14px;
    --radius-overlay: 16px;
    --elev-1: 0 0 0 1px rgb(var(--shadow-tint) / 7%), 0 1px 2px rgb(var(--shadow-tint) / 6%), 0 2px 6px -2px rgb(var(--shadow-tint) / 6%);
    --elev-2: 0 0 0 1px rgb(var(--shadow-tint) / 10%), 0 2px 4px rgb(var(--shadow-tint) / 6%), 0 8px 16px -6px rgb(var(--shadow-tint) / 14%);
    --elev-3: 0 0 0 1px rgb(var(--shadow-tint) / 8%), 0 4px 8px rgb(var(--shadow-tint) / 8%), 0 16px 32px -8px rgb(var(--shadow-tint) / 20%);
    --elev-4: 0 0 0 1px rgb(var(--shadow-tint) / 8%), 0 8px 16px rgb(var(--shadow-tint) / 10%), 0 32px 64px -16px rgb(var(--shadow-tint) / 32%);
}

/* A container inside a container: flat hairline on a sunken tone, one level down. */
.fi-fo-tabs .fi-section,
.fi-section .fi-section {
    border-radius: 12px !important;
    background-color: var(--surface-sunken) !important;
    box-shadow: 0 0 0 1px var(--line) !important;
}

/* Table rows: a lime marker on the row's edge (the row's own hover background is the Θ look's: theme-theta.css). */
.fi-ta-row:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--brand);
}

/* Floating layers. */
.fi-dropdown-panel {
    border-radius: 12px !important;
    box-shadow: var(--elev-3) !important;
}

.fi-no-notification {
    border-radius: 12px !important;
    box-shadow: var(--elev-3) !important;
}

.fi-modal-close-overlay {
    background-color: rgb(var(--shadow-tint) / 46%) !important;
    backdrop-filter: blur(3px);
}

.fi-modal-window {
    border-radius: var(--radius-overlay) !important;
    box-shadow: var(--elev-4) !important;
}

.tippy-box[data-theme~="bp-help"] {
    box-shadow: var(--elev-3);
}

/* Controls: a hovered field announces itself before it is focused. */
.fi-input-wrp:not(:focus-within):hover {
    box-shadow: 0 0 0 1px rgb(var(--shadow-tint) / 24%), 0 1px 2px rgb(var(--shadow-tint) / 5%) !important;
}

/* The brand button gets a lit top edge and a warm shadow; it rises on hover. */
.fi-btn.fi-btn-color-primary[class*="bg-custom-600"] {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 42%), 0 1px 2px rgb(var(--shadow-tint) / 22%) !important;
}

.fi-btn.fi-btn-color-primary[class*="bg-custom-600"]:hover {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 42%), 0 4px 10px -2px rgb(var(--shadow-tint) / 30%) !important;
}

.fi-btn.fi-btn-color-primary[class*="bg-custom-600"]:active {
    box-shadow: inset 0 1px 2px rgb(var(--shadow-tint) / 28%) !important;
}

.fi-sidebar {
    box-shadow: inset -1px 0 0 rgb(255 255 255 / 6%);
}

/*
 * Dashboard composition (2026-10-02, visual redesign, see PROGRESS.md).
 *
 * Before: the Portal home was four identical white cards in a row (the same
 * size and weight for "2 / Απεριόριστο" as for the one number that matters), the
 * chart, then two full-width sections stacked; the admin home was four bare
 * numbers, a chart, fourteen identical job cards and a bare cost block.
 * Nothing said where to look first, and everything was the same width.
 *
 * Now there is a focal point and a rhythm of widths:
 *   Portal  — one dark "hero" metric (conversations this period) beside ONE
 *             grouped status list (AI Βοηθοί / Κενά Γνώσης / Πλάνο) instead of
 *             three more cards; chart full width; usage + recent activity side
 *             by side.
 *   Admin   — each stats widget is a single card with dividers (a "stat
 *             strip"), the job grid is dense and reports problems first.
 * Breakpoints are hand-written: the precompiled Filament bundle has no md:/xl:
 * utilities for our own markup (see the notes at the top of this file).
 */
.bp-dash-top {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 1rem;
}

.bp-dash-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.bp-dash-chart,
.bp-dash-bottom {
    margin-top: 1.5rem;
}

@media (max-width: 900px) {
    .bp-dash-top,
    .bp-dash-bottom {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The focal card. Colours, border and shadow come from the Θ look (theme-theta.css): a white card with an ink number. */
.bp-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 13rem;
    padding: 1.75rem;
    border-radius: var(--radius-card);
}

.bp-hero-eyebrow {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
}

.bp-hero-value {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.bp-hero-value--long {
    font-size: 2.75rem;
}

.bp-hero-value--xlong {
    font-size: 2rem;
}

.bp-hero-caption {
    font-size: var(--text-base);
}

.bp-hero-link {
    margin-top: auto;
    align-self: flex-start;
    padding-top: 1rem;
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
}

.bp-hero-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bp-hero-link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 4px;
}

/* One card, three rows — secondary facts grouped, not three more headline cards. */
.bp-status-list {
    display: flex;
    flex-direction: column;
    background-color: var(--surface);
}

.bp-status-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.875rem;
    align-items: start;
    padding: 1rem 1.25rem;
}

.bp-status-row + .bp-status-row {
    border-top: 1px solid var(--line);
}

.bp-status-icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background-color: var(--surface-sunken);
    box-shadow: 0 0 0 1px var(--line);
    color: var(--ink-soft);
}

.bp-status-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.bp-status-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.bp-status-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
}

.bp-status-value {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}

.bp-status-secondary {
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

/* A row that needs the owner's attention: amber icon chip, same card. */
.bp-status-row--attention .bp-status-icon {
    background-color: rgb(var(--warning-50));
    box-shadow: 0 0 0 1px rgb(var(--warning-200));
    color: rgb(var(--warning-700));
}

.fi-wi-stats-overview-stat-label {
    font-size: var(--text-sm) !important;
    font-weight: 500 !important;
    color: var(--ink-soft) !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 2rem !important;
    letter-spacing: var(--tracking-title) !important;
}

/* Scheduled jobs: a dense 3-column board, a status dot, and only what is needed per cell. */
.bp-job-summary-line {
    margin-bottom: 1rem;
    font-size: var(--text-base);
    color: var(--ink-soft);
}

.bp-job-summary-line strong {
    color: var(--ink);
}

.bp-job-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
}

@media (max-width: 1100px) {
    .bp-job-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .bp-job-status-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

.bp-job-card {
    display: grid;
    grid-template-columns: 0.625rem minmax(0, 1fr);
    gap: 0.25rem 0.75rem;
    align-items: start;
    padding: 0.75rem 0.875rem;
    text-align: left;
    border-radius: 10px;
    background-color: var(--surface-sunken);
    box-shadow: 0 0 0 1px var(--line);
}

.bp-job-card:hover {
    background-color: var(--surface);
    box-shadow: var(--elev-1);
}

.bp-job-dot {
    width: 0.625rem;
    height: 0.625rem;
    margin-top: 0.3rem;
    border-radius: 9999px;
    background-color: #A3A99A;
}

.bp-job-card--ok .bp-job-dot {
    background-color: rgb(var(--success-600));
}

.bp-job-card--unhealthy .bp-job-dot {
    background-color: rgb(var(--danger-600));
    box-shadow: 0 0 0 3px rgb(var(--danger-600) / 18%);
}

.bp-job-card--unhealthy {
    background-color: rgb(var(--danger-50));
    box-shadow: 0 0 0 1px rgb(var(--danger-200));
}

.bp-job-card--warning .bp-job-dot {
    background-color: rgb(var(--warning-600));
    box-shadow: 0 0 0 3px rgb(var(--warning-600) / 18%);
}

.bp-job-card--warning {
    background-color: rgb(var(--warning-50));
    box-shadow: 0 0 0 1px rgb(var(--warning-200));
}

.bp-job-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
}

.bp-job-summary,
.bp-job-meta {
    grid-column: 2;
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--ink-soft);
}

.bp-job-summary {
    color: var(--ink);
}

/* Confirmation texts are now full sentences: keep a one-letter word ("Η") from being stranded at a line end. */
.fi-modal-description {
    text-wrap: pretty;
}

/* One-line intro at the top of each agent form tab: plain text, not another card.
   Beats the resting-card and nested-container rules above (both !important). */
.fi-fo-tabs .bp-tab-intro.fi-section {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: 0;
}

.bp-tab-intro .fi-section-header {
    padding: 0;
}

.bp-tab-intro .fi-section-content-ctn {
    display: none;
}

.bp-tab-intro .fi-section-header-description {
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

/* Agent filter bar above a resource's list table (AgentSwitcher, inline variant). */
.bp-agent-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    background-color: var(--surface-sunken);
    box-shadow: 0 0 0 1px var(--line);
}

.bp-agent-filter--active {
    box-shadow: 0 0 0 1px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}

.bp-agent-filter-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
}

.bp-agent-filter-select {
    min-width: 12rem;
    max-width: 100%;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background-color: #fff;
    font-size: var(--text-sm);
    color: var(--ink);
}

.bp-agent-filter-hint {
    font-size: var(--text-xs);
    color: var(--ink-soft);
}

@media (max-width: 640px) {
    .bp-agent-filter-select {
        flex: 1 1 100%;
    }
}

/* Plan list: the actions column (last) stays stuck to the right edge when the table is wider than the window,
   so «Επεξεργασία» and «Διαγραφή» are always visible. */
.fi-ta-table:has(.bp-plan-row) th:last-child,
.fi-ta-table:has(.bp-plan-row) td:last-child {
    position: sticky;
    right: 0;
    background: #fff;
    box-shadow: -1px 0 0 rgb(0 0 0 / 0.08);
}

.dark .fi-ta-table:has(.bp-plan-row) th:last-child,
.dark .fi-ta-table:has(.bp-plan-row) td:last-child {
    background: rgb(17 24 39);
}

/*
 * The ✕ that closes the menu on a phone (resources/views/filament/sidebar-close.blade.php, SIDEBAR_NAV_START hook of both panels). Hidden from 1024px up,
 * where the sidebar is part of the page. Filament closes the drawer only by a tap outside it. (2026-10-09)
 */
.bp-sidebar-close-row {
    display: none;
}

@media (max-width: 1023.98px) {
    .bp-sidebar-close-row {
        display: flex;
        justify-content: flex-end;
        margin: -0.5rem -0.5rem 0.25rem 0;
    }

    .bp-sidebar-close {
        display: grid;
        place-items: center;
        width: 2.5rem;
        height: 2.5rem;
        border: 0;
        border-radius: 9999px;
        background: transparent;
        color: #C9CFC0;
        cursor: pointer;
    }

    .bp-sidebar-close:hover,
    .bp-sidebar-close:focus-visible {
        background-color: rgb(255 255 255 / 10%);
        color: #fff;
    }
}