/* ═══════════════════════════════════════════════════════════════════════════
 * Diamond Agency — UI theme layer
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * One stylesheet that restyles every screen in the panel without touching a
 * single Blade file. It is loaded from AdminPanelProvider's HEAD_END hook,
 * after the inline <style> block in STYLES_AFTER (so it can refine those
 * rules) and before public/css/mobile.css (so the phone layout still wins).
 *
 * WHY A STYLESHEET AND NOT A REBUILD
 * ----------------------------------
 * Roughly thirty Blade files in this project draw their own cards, grids and
 * badges with inline styles. Rewriting them would be a week of work and would
 * regress layouts nobody is testing. Everything below instead targets
 * Filament's own `fi-*` class vocabulary, which every screen shares, so one
 * file improves all of them at once and a page nobody thought about inherits
 * the same treatment.
 *
 * RULES THIS FILE PLAYS BY
 * ------------------------
 *  1. No bare element selectors (`div`, `table`, `span`) inside `.fi-main`.
 *     Those pages are full of hand-written markup and a broad selector would
 *     repaint parts of it at random.
 *  2. Logical properties (`padding-inline`, `inset-inline-start`,
 *     `border-start-*`) rather than left/right. The panel runs in RTL for
 *     Arabic, and a physical `padding-left` lands on the wrong side there.
 *  3. `!important` only where Filament ships a utility class on the same
 *     element — a utility and a class selector have the same specificity, so
 *     source order decides, and Filament's CSS may load after this file.
 *  4. Light mode only. `darkMode(false)` is set on the panel and the inline
 *     styles across those thirty Blade files hardcode white backgrounds, so a
 *     dark palette here would produce black text on black cards.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
 * 1. Tokens
 *
 * The brand blue/violet pair already lives in three places (the panel
 * provider's Color::hex calls, resources/css/app.css, and the inline style
 * block). These are the same values expressed as a scale, so a shade used
 * twenty times below is defined once.
 * ─────────────────────────────────────────────────────────────────────────── */
:root {
    /* ── Brand: black and gold, read off the logo ──────────────────────
     *
     * The gold in the logo runs #B37719 (deep, in the diamond's shadow)
     * through #C79537 to #D9AF68 (its lit facets). That range is beautiful
     * and almost unusable for text: #C79537 under white is 2.9:1, which
     * fails WCAG AA twice over.
     *
     * So the scale extends in both directions. The DEEP end carries white
     * text and does the work the old blue did (--d-primary at #8A6310 is
     * 5.35:1 under white, --d-primary-600 at 7.8:1). The LIT end is the
     * logo's own gold and appears only where it is decoration: borders,
     * icons, the rail on a stat card, accents against dark.
     *
     * Reversing that - bright gold behind white text - is the one mistake
     * this palette invites, and it is why the two ends are named rather
     * than left as one "brand gold".
     */
    --d-primary:          #8A6310;  /* text, links, fills under white text  */
    --d-primary-600:      #6B4A08;  /* deeper fill, 7.8:1 under white       */
    --d-primary-700:      #4A3206;  /* deepest, for pressed states          */
    --d-primary-300:      #D9AF68;  /* the logo's lit gold                  */
    --d-primary-100:      #F2E4C4;  /* tint: borders, selected rows         */
    --d-primary-50:       #FBF6EA;  /* tint: hover washes                   */
    --d-secondary:        #C79537;  /* the logo's mid gold - accents only   */
    --d-secondary-50:     #FDF8EE;

    /* The sidebar's near-black, matching the wordmark rather than a blue-grey. */
    --d-shell:            #0E1117;
    --d-shell-2:          #161B24;
    --d-shell-line:       #232A36;
    --d-shell-text:       #A8B0BE;

    /* Neutrals — a warm-leaning gray so the UI does not read as cold blue-gray */
    --d-ink:              #0f1729;
    --d-ink-2:            #334155;
    --d-ink-3:            #64748b;
    --d-ink-4:            #94a3b8;
    --d-line:             #e8ecf3;
    --d-line-2:           #f1f4f9;
    --d-surface:          #ffffff;
    --d-surface-2:        #f8fafc;
    --d-canvas:           #f4f6fb;

    /* Semantic */
    --d-success:          #0ea06a;
    --d-success-50:       #e7f8f0;
    --d-warning:          #d97706;
    --d-warning-50:       #fef4e6;
    --d-danger:           #dc2626;
    --d-danger-50:        #fdecec;
    --d-info:             #0369a1;
    --d-info-50:          #e8f4fd;

    /* Elevation — three steps, each a two-shadow stack so edges stay crisp
       while the ambient shadow does the lifting. */
    --d-shadow-1:         0 1px 2px rgba(15, 23, 41, .04), 0 1px 3px rgba(15, 23, 41, .05);
    --d-shadow-2:         0 2px 4px rgba(15, 23, 41, .04), 0 6px 16px rgba(15, 23, 41, .07);
    --d-shadow-3:         0 4px 8px rgba(15, 23, 41, .05), 0 16px 40px rgba(15, 23, 41, .11);
    --d-ring:             0 0 0 3px rgba(138, 99, 16, .18);

    /* Geometry */
    --d-r-sm:             8px;
    --d-r:                11px;
    --d-r-lg:             15px;
    --d-r-xl:             20px;

    --d-ease:             cubic-bezier(.4, 0, .2, 1);
    --d-fast:             .14s var(--d-ease);
    --d-med:              .22s var(--d-ease);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 2. Canvas & typography
 *
 * The default panel is white-on-white: a white page behind white cards, so
 * nothing has an edge and the eye has no structure to hold on to. A tinted
 * canvas is what makes every card below read as a card.
 * ─────────────────────────────────────────────────────────────────────────── */
.fi-body {
    background-color: var(--d-canvas);
    color: var(--d-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv01";
}

/* Cairo sits a little loose at body size; tightening the tracking on headings
   is most of what makes the type feel deliberate rather than defaulted. */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-ta-header-heading {
    color: var(--d-ink);
    letter-spacing: -.011em;
}

.fi-header-heading {
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1.25;
}

.fi-header-subheading,
.fi-section-header-description,
.fi-ta-header-description {
    color: var(--d-ink-3);
    font-size: .8rem;
    line-height: 1.55;
}

/* Numbers in tables, stat cards and reports must line up in a column. Cairo's
   proportional digits make a column of figures look ragged. */
.fi-wi-stats-overview-stat-value,
.fi-ta-text-item-label,
.fi-pagination-overview {
    font-variant-numeric: tabular-nums;
}

/* Page content fades in rather than snapping. The panel runs in SPA mode, so
   navigation swaps the main region and the jump is otherwise abrupt. */
.fi-main > * {
    animation: d-rise .26s var(--d-ease) both;
}

@keyframes d-rise {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

/* Honour the OS setting — this is motion for decoration, not for meaning. */
@media (prefers-reduced-motion: reduce) {
    .fi-main > * { animation: none; }
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
 * 3. Sidebar
 *
 * Fourteen navigation items in three groups. The default rendering gives each
 * one the same weight, so the list reads as an undifferentiated column. The
 * treatment below separates the three layers that are actually there: group
 * headings (quiet, uppercase), items (readable), and the active item (a solid
 * brand pill that is impossible to miss).
 * ─────────────────────────────────────────────────────────────────────────── */
/* The sidebar is the black half of "black and gold".
 *
 * It is also the one large surface that can carry the brand without costing
 * legibility: the content area stays white, so tables and forms are unaffected
 * while the chrome around them reads as the logo does. The brand mark switches
 * to its light variant here - see AdminPanelProvider::brandLogo(). */
.fi-sidebar {
    background: var(--d-shell);
    border-inline-end: 1px solid var(--d-shell-line);
    box-shadow: 0 0 1px rgba(0, 0, 0, .3);
}

.fi-sidebar-header {
    background: var(--d-shell);
    border-bottom: 1px solid var(--d-shell-line);
    box-shadow: none;
    height: 4.25rem;
}

.fi-sidebar-nav {
    padding-block: .75rem;
    padding-inline: .625rem;
    gap: .125rem;
}

/* Group heading: a label, not a button. */
.fi-sidebar-group-label {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #6E7686;
}

.fi-sidebar-group-button {
    padding-inline: .625rem;
    padding-block: .4rem;
}

.fi-sidebar-group-items {
    gap: .125rem;
}

/* Items */
.fi-sidebar-item-button {
    border-radius: var(--d-r);
    padding-block: .54rem;
    padding-inline: .625rem;
    gap: .7rem;
    transition: background-color var(--d-fast), color var(--d-fast), box-shadow var(--d-fast);
    position: relative;
}

.fi-sidebar-item-label {
    font-size: .835rem;
    font-weight: 500;
    letter-spacing: -.003em;
    color: var(--d-shell-text);
}

.fi-sidebar-item-icon {
    color: #6E7686;
    width: 1.3rem;
    height: 1.3rem;
    flex-shrink: 0;
    transition: color var(--d-fast), transform var(--d-fast);
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover {
    background-color: var(--d-shell-2);
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-label {
    color: #F0F2F6;
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: var(--d-primary-300);
}

/* Active: a filled pill. The gradient is the brand pair, so the one element
   carrying the strongest colour in the UI is also the one that tells you
   where you are. */
.fi-sidebar-item-active > .fi-sidebar-item-button,
.fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background-image: linear-gradient(135deg, var(--d-primary-600) 0%, var(--d-primary) 60%, #A67C15 130%);
    box-shadow: 0 2px 8px rgba(107, 74, 8, .34), inset 0 1px 0 rgba(255, 255, 255, .13);
}

.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label {
    color: #fff;
    font-weight: 600;
}

.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon {
    color: #fff;
}

/* Sub-items under a System heading: indented, with a hairline rail so the
   nesting is visible when a section is open. */
.fi-sidebar-sub-group-items {
    position: relative;
    padding-inline-start: 1.5rem;
    margin-top: .125rem;
    gap: .0625rem;
}

.fi-sidebar-sub-group-items::before {
    content: "";
    position: absolute;
    inset-block: .2rem;
    inset-inline-start: .95rem;
    width: 1.5px;
    background: var(--d-shell-line);
    border-radius: 2px;
}

.fi-sidebar-sub-group-items .fi-sidebar-item-label {
    font-size: .79rem;
}

.fi-sidebar-sub-group-items .fi-sidebar-item-icon {
    width: 1.1rem;
    height: 1.1rem;
}

/* Collapsed-to-icons state: the label is hidden, so centre the glyph and let
   the pill be square. */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button {
    justify-content: center;
    padding-inline: 0;
}

/* The brand logo */
.fi-logo {
    filter: saturate(1.04);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 4. Topbar
 *
 * Sticky and translucent. It carries the greeting, the language switcher and
 * the notification bell, all of which stay reachable while a long table
 * scrolls underneath.
 * ─────────────────────────────────────────────────────────────────────────── */
.fi-topbar > nav {
    background-color: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(170%) blur(14px);
    backdrop-filter: saturate(170%) blur(14px);
    border-bottom: 1px solid var(--d-line);
    box-shadow: 0 1px 2px rgba(15, 23, 41, .03);
    height: 4.25rem;
}

/* Safari before 16.4 ignores backdrop-filter on an element with a
   translucent background in some compositing paths; an opaque fallback is
   better than a half-readable bar. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .fi-topbar > nav { background-color: #fff; }
}

.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn {
    border-radius: var(--d-r-sm);
    color: var(--d-ink-2);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 5. Page shell
 * ─────────────────────────────────────────────────────────────────────────── */
.fi-main {
    padding-block: 1.75rem;
}

.fi-page-header-widgets,
.fi-page-footer-widgets {
    margin-block: 1.25rem;
}

/* Breadcrumbs: small and quiet. They are orientation, not content. */
.fi-breadcrumbs-item-label {
    font-size: .73rem;
    font-weight: 500;
    color: var(--d-ink-4);
    transition: color var(--d-fast);
}

.fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    color: var(--d-ink-2);
    font-weight: 600;
}

.fi-breadcrumbs-item-label:hover {
    color: var(--d-primary);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 6. Sections & cards
 *
 * The single largest visual change in this file. A section becomes a real
 * card: rounded, lifted, with a tinted header band that separates the title
 * from the fields under it.
 * ─────────────────────────────────────────────────────────────────────────── */
.fi-section,
.fi-wi-widget > .fi-section,
.fi-ta-ctn {
    background-color: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-lg);
    box-shadow: var(--d-shadow-1);
    transition: box-shadow var(--d-med), border-color var(--d-med);
}

/* Filament ships `ring-1 ring-gray-950/5` on these; the ring draws a second
   outline just outside our border and makes every card look doubled. */
.fi-section,
.fi-ta-ctn,
.fi-wi-widget > .fi-section {
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-section:hover {
    box-shadow: var(--d-shadow-2);
}

.fi-section-header {
    padding-block: 1rem;
    padding-inline: 1.25rem;
    border-bottom: 1px solid var(--d-line-2);
    background: linear-gradient(to bottom, #fcfdff, var(--d-surface));
    border-start-start-radius: var(--d-r-lg);
    border-start-end-radius: var(--d-r-lg);
}

.fi-section-header-heading {
    font-size: .95rem;
    font-weight: 700;
}

/* The section icon gets a tinted tile rather than floating loose. */
.fi-section-header-icon {
    color: var(--d-primary);
}

.fi-section-content {
    padding-inline: 1.25rem;
    padding-bottom: 1.25rem;
}

.fi-section-footer {
    border-top: 1px solid var(--d-line-2);
    background: var(--d-surface-2);
    padding-block: .85rem;
    padding-inline: 1.25rem;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 7. Stat widgets
 *
 * A KPI tile has one job: make the number the first thing read. The default
 * puts label, value and description at nearly equal weight. The accent rail
 * on the inline-start edge also gives a row of four tiles a rhythm.
 * ─────────────────────────────────────────────────────────────────────────── */
.fi-wi-stats-overview-stat {
    position: relative;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-lg);
    background: var(--d-surface);
    box-shadow: var(--d-shadow-1);
    overflow: hidden;
    padding: 1.15rem 1.25rem;
    transition: transform var(--d-med), box-shadow var(--d-med);
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-wi-stats-overview-stat::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--d-primary), var(--d-secondary));
    opacity: .85;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--d-shadow-2);
}

.fi-wi-stats-overview-stat-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .035em;
    text-transform: uppercase;
    color: var(--d-ink-3);
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.95rem;
    font-weight: 800;
    letter-spacing: -.028em;
    line-height: 1.1;
    color: var(--d-ink);
    margin-top: .3rem;
}

.fi-wi-stats-overview-stat-description {
    font-size: .74rem;
    font-weight: 500;
    color: var(--d-ink-3);
    margin-top: .35rem;
}

.fi-wi-stats-overview-stat-chart {
    opacity: .9;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 8. Tables
 *
 * The task and project lists are the screens this team spends its day in.
 * Roomier rows, a quiet uppercase header, and a hover state that marks the
 * row being read without shouting.
 * ─────────────────────────────────────────────────────────────────────────── */
.fi-ta-header-ctn {
    border-bottom: 1px solid var(--d-line-2);
    background: linear-gradient(to bottom, #fcfdff, var(--d-surface));
}

.fi-ta-header-toolbar {
    padding-block: .85rem;
    padding-inline: 1.1rem;
    gap: .6rem;
}

.fi-ta-header-cell {
    background-color: var(--d-surface-2);
    border-bottom: 1px solid var(--d-line);
    padding-block: .7rem !important;
}

.fi-ta-header-cell-label {
    font-size: .68rem !important;
    font-weight: 700 !important;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--d-ink-3) !important;
    white-space: nowrap;
}

.fi-ta-row {
    transition: background-color var(--d-fast), box-shadow var(--d-fast);
}

.fi-ta-row:hover {
    background-color: var(--d-primary-50) !important;
}

/* The divider between rows: Filament's `divide-y` gray-200 is heavier than it
   needs to be once rows have a hover state to separate them. */
.fi-ta-table tbody .fi-ta-row {
    border-top-color: var(--d-line-2);
}

.fi-ta-cell {
    padding-block: .78rem;
}

.fi-ta-text-item-label {
    font-size: .835rem;
    color: var(--d-ink-2);
}

/* A column's `description()` line — used all over this project to hang an
   email under a name or a relative date under a timestamp. */
.fi-ta-text .fi-ta-text-item + .fi-ta-text-item .fi-ta-text-item-label,
.fi-ta-col-wrp .text-xs {
    color: var(--d-ink-4);
}

/* Empty states: centre them properly and give the icon a tinted tile, so an
   empty table reads as "nothing here yet" rather than as a broken page. */
.fi-ta-empty-state {
    padding-block: 3.25rem;
}

.fi-ta-empty-state-icon-ctn {
    background: var(--d-primary-50);
    border-radius: 999px;
    padding: 1rem;
    box-shadow: inset 0 0 0 1px var(--d-primary-100);
}

.fi-ta-empty-state-icon {
    color: var(--d-primary);
}

.fi-ta-empty-state-heading {
    font-size: .95rem;
    font-weight: 700;
    color: var(--d-ink);
    margin-top: .85rem;
}

.fi-ta-empty-state-description {
    font-size: .8rem;
    color: var(--d-ink-3);
}

/* Pagination */
.fi-pagination {
    padding-block: .85rem;
    padding-inline: 1.1rem;
    border-top: 1px solid var(--d-line-2);
}

.fi-pagination-overview {
    font-size: .76rem;
    color: var(--d-ink-3);
}

.fi-pagination-item-button {
    border-radius: var(--d-r-sm);
    font-size: .78rem;
    transition: background-color var(--d-fast), color var(--d-fast);
}

/* Filter indicator chips above the table */
.fi-ta-filter-indicators {
    padding-block: .6rem;
    padding-inline: 1.1rem;
    background: var(--d-primary-50);
    border-top: 1px solid var(--d-primary-100);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 9. Badges
 *
 * Status, priority and stage are all badges in this system, so they appear
 * dozens of times per screen. Tinted fill + matching text + a hairline ring
 * reads at a glance and stays legible when ten of them stack in a column.
 * ─────────────────────────────────────────────────────────────────────────── */
.fi-badge {
    border-radius: 7px;
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .012em;
    padding-block: .22rem;
    padding-inline: .5rem;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 41, .055);
    white-space: nowrap;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 10. Buttons & links
 * ─────────────────────────────────────────────────────────────────────────── */
.fi-btn {
    border-radius: var(--d-r);
    font-weight: 600;
    letter-spacing: -.002em;
    transition: transform var(--d-fast), box-shadow var(--d-fast), background-color var(--d-fast), filter var(--d-fast);
}

.fi-btn:active {
    transform: translateY(.5px) scale(.993);
}

/* Primary: the brand gradient, so the main action on a screen is also the
   most saturated thing on it. Scoped away from outlined and ghost variants,
   which are deliberately quiet. */
.fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link) {
    background-image: linear-gradient(135deg, var(--d-primary-600), var(--d-primary) 65%, #9C7113);
    box-shadow: 0 1px 2px rgba(15, 23, 41, .08), 0 3px 10px rgba(107, 74, 8, .26);
    border-color: transparent;
}

.fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link):hover {
    filter: brightness(1.07) saturate(1.05);
    box-shadow: 0 2px 4px rgba(15, 23, 41, .09), 0 6px 18px rgba(107, 74, 8, .32);
}

.fi-btn.fi-color-gray:not(.fi-btn-outlined):not(.fi-link) {
    background-color: var(--d-surface);
    box-shadow: var(--d-shadow-1), inset 0 0 0 1px var(--d-line);
    color: var(--d-ink-2);
}

.fi-btn.fi-color-gray:not(.fi-btn-outlined):not(.fi-link):hover {
    background-color: var(--d-surface-2);
    box-shadow: var(--d-shadow-2), inset 0 0 0 1px var(--d-primary-100);
    color: var(--d-primary-700);
}

/* Icon-only buttons — row actions, dropdown triggers, the bell. */
.fi-icon-btn {
    border-radius: var(--d-r-sm);
    transition: background-color var(--d-fast), color var(--d-fast);
}

.fi-icon-btn:hover {
    background-color: var(--d-primary-50);
}

.fi-link {
    font-weight: 600;
    transition: color var(--d-fast);
}

/* Keyboard focus must stay obvious. Filament's own focus-visible ring is kept
   and widened rather than replaced. */
.fi-btn:focus-visible,
.fi-icon-btn:focus-visible,
.fi-link:focus-visible,
.fi-sidebar-item-button:focus-visible {
    outline: 2px solid var(--d-primary);
    outline-offset: 2px;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 11. Inputs
 *
 * Every task template is a long form, so the fields are most of what people
 * look at. Softer radius, a real focus ring, and a hover that confirms the
 * field is live before it is clicked.
 * ─────────────────────────────────────────────────────────────────────────── */
.fi-input-wrp {
    border-radius: var(--d-r);
    background-color: var(--d-surface);
    box-shadow: inset 0 0 0 1px var(--d-line), 0 1px 1px rgba(15, 23, 41, .025);
    transition: box-shadow var(--d-fast), background-color var(--d-fast);
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-input-wrp:hover {
    box-shadow: inset 0 0 0 1px #DED3BC, 0 1px 2px rgba(15, 23, 41, .04);
}

.fi-input-wrp:focus-within {
    background-color: #fff;
    box-shadow: inset 0 0 0 1.5px var(--d-primary), var(--d-ring);
}

.fi-input {
    font-size: .855rem;
    color: var(--d-ink);
}

.fi-input::placeholder {
    color: var(--d-ink-4);
}

.fi-input-wrp-prefix,
.fi-input-wrp-suffix {
    color: var(--d-ink-4);
    font-size: .8rem;
}

/* A field in error state must out-rank the hover and focus rules above, which
   is the one place a specificity bump is unavoidable. */
.fi-fo-field-wrp:has(.fi-fo-field-wrp-error-message) .fi-input-wrp {
    box-shadow: inset 0 0 0 1.5px var(--d-danger);
}

.fi-fo-field-wrp-error-message {
    font-size: .74rem;
    font-weight: 500;
}

.fi-fo-field-wrp-helper-text,
.fi-fo-field-wrp-hint {
    font-size: .74rem;
    color: var(--d-ink-3);
}

/* The toggle switch — used for every permission and notification setting. */
.fi-fo-toggle button[role="switch"] {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 41, .07);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 12. Tabs
 *
 * Rendered as a segmented control. The Reports page has three tabs and the
 * Settings page has six; as plain underlined text they read as a sentence
 * rather than as a control.
 * ─────────────────────────────────────────────────────────────────────────── */
.fi-tabs {
    background-color: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-lg);
    padding: .3rem;
    gap: .2rem;
    box-shadow: inset 0 1px 2px rgba(15, 23, 41, .03);
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-tabs-item {
    border-radius: var(--d-r-sm);
    font-size: .815rem;
    font-weight: 600;
    color: var(--d-ink-3);
    padding-block: .45rem;
    padding-inline: .85rem;
    transition: background-color var(--d-fast), color var(--d-fast), box-shadow var(--d-fast);
}

.fi-tabs-item:hover:not(.fi-tabs-item-active) {
    background-color: rgba(255, 255, 255, .75);
    color: var(--d-ink-2);
}

.fi-tabs-item-active {
    background-color: var(--d-surface);
    color: var(--d-primary-700);
    box-shadow: var(--d-shadow-1);
}

.fi-tabs-item-icon {
    width: 1.05rem;
    height: 1.05rem;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 13. Modals & dropdowns
 * ─────────────────────────────────────────────────────────────────────────── */
.fi-modal-window {
    border-radius: var(--d-r-xl);
    box-shadow: var(--d-shadow-3);
    overflow: hidden;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-modal-close-overlay {
    background-color: rgba(15, 23, 41, .42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.fi-modal-header {
    padding-block: 1.15rem;
    padding-inline: 1.4rem;
    border-bottom: 1px solid var(--d-line-2);
    background: linear-gradient(to bottom, #fcfdff, var(--d-surface));
}

.fi-modal-heading {
    font-size: 1.02rem;
    font-weight: 700;
}

.fi-modal-description {
    font-size: .8rem;
    color: var(--d-ink-3);
}

.fi-modal-footer {
    padding-block: 1rem;
    padding-inline: 1.4rem;
    border-top: 1px solid var(--d-line-2);
    background-color: var(--d-surface-2);
}

/* A slide-over keeps square outer corners on the edge it is docked to. */
.fi-modal-slide-over-window {
    border-radius: 0;
    box-shadow: var(--d-shadow-3);
}

.fi-dropdown-panel {
    border-radius: var(--d-r-lg);
    box-shadow: var(--d-shadow-3);
    border: 1px solid var(--d-line);
    overflow: hidden;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-dropdown-list {
    padding: .3rem;
}

.fi-dropdown-list-item {
    border-radius: var(--d-r-sm);
    font-size: .81rem;
    font-weight: 500;
    gap: .55rem;
    transition: background-color var(--d-fast), color var(--d-fast);
}

.fi-dropdown-list-item:hover {
    background-color: var(--d-primary-50);
}

.fi-dropdown-header {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--d-ink-4);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 14. Toasts
 * ─────────────────────────────────────────────────────────────────────────── */
.fi-no-notification {
    border-radius: var(--d-r-lg);
    box-shadow: var(--d-shadow-3);
    border: 1px solid var(--d-line);
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-no-notification-title {
    font-size: .855rem;
    font-weight: 650;
}

.fi-no-notification-body {
    font-size: .79rem;
    color: var(--d-ink-3);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 15. Login screen
 *
 * The one page every user sees before anything else, and the only one still
 * rendering as a bare white box on a gray field.
 * ─────────────────────────────────────────────────────────────────────────── */
.fi-simple-layout {
    background:
        radial-gradient(ellipse 80% 60% at 15% 0%,  rgba(138, 99, 16, .18), transparent 60%),
        radial-gradient(ellipse 70% 55% at 90% 100%, rgba(107, 74, 8, .16), transparent 60%),
        var(--d-canvas);
}

.fi-simple-main {
    border-radius: var(--d-r-xl);
    box-shadow: var(--d-shadow-3);
    border: 1px solid rgba(255, 255, 255, .7);
    background-color: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 2.25rem;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-simple-header-heading {
    font-weight: 700;
    letter-spacing: -.015em;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 16. Hand-written pages
 *
 * The Kanban board, the CRM pipeline, the dashboards and the report screens
 * draw their own cards with inline styles. Those cannot be restyled from here
 * without an important declaration per property, which is not worth it. What
 * IS worth it is the shared chrome around them: the scrollbars those boards
 * live inside, and the tooltips and dividers they share with the rest of the
 * panel.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Scrollbars. The Kanban board and the Gantt chart are horizontal scrollers,
   so their scrollbar is a permanent part of the page rather than an
   occasional visitor. Firefox takes the standard properties; WebKit needs its
   prefixed pseudo-elements and ignores the standard ones. */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
    border: 2.5px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    background-clip: content-box;
}

/* Keep the native scrollbar on inputs and selects, where a restyled one
   fights the control's own chrome. */
.fi-input::-webkit-scrollbar,
select::-webkit-scrollbar {
    width: auto;
    height: auto;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 17. Audit / history timeline
 *
 * Shared by the task history, the project history and the Audit Log screen.
 * These classes are written by our own Blade views, not by Filament, so they
 * are prefixed `d-` to make that obvious at the call site.
 * ─────────────────────────────────────────────────────────────────────────── */
.d-timeline {
    position: relative;
    padding-inline-start: 1.65rem;
}

/* The rail. Inset at both ends so it stops at the first and last dot rather
   than running past them. */
.d-timeline::before {
    content: "";
    position: absolute;
    inset-inline-start: .42rem;
    top: .6rem;
    bottom: .6rem;
    width: 2px;
    background: linear-gradient(to bottom, var(--d-line), var(--d-line-2));
    border-radius: 2px;
}

.d-timeline-item {
    position: relative;
    padding-bottom: 1.05rem;
}

.d-timeline-item:last-child {
    padding-bottom: 0;
}

.d-timeline-dot {
    position: absolute;
    inset-inline-start: -1.65rem;
    top: .42rem;
    width: .92rem;
    height: .92rem;
    border-radius: 999px;
    background: var(--d-surface);
    box-shadow: 0 0 0 2.5px var(--d-surface), 0 0 0 4px var(--d-line);
}

.d-timeline-dot[data-action="created"]  { background: var(--d-success); box-shadow: 0 0 0 2.5px var(--d-surface), 0 0 0 4px var(--d-success-50); }
.d-timeline-dot[data-action="updated"]  { background: var(--d-primary); box-shadow: 0 0 0 2.5px var(--d-surface), 0 0 0 4px var(--d-primary-100); }
.d-timeline-dot[data-action="deleted"]  { background: var(--d-danger);  box-shadow: 0 0 0 2.5px var(--d-surface), 0 0 0 4px var(--d-danger-50); }
.d-timeline-dot[data-action="restored"] { background: var(--d-warning); box-shadow: 0 0 0 2.5px var(--d-surface), 0 0 0 4px var(--d-warning-50); }

.d-timeline-card {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: .75rem .9rem;
    box-shadow: var(--d-shadow-1);
    transition: box-shadow var(--d-fast), border-color var(--d-fast);
}

.d-timeline-card:hover {
    box-shadow: var(--d-shadow-2);
    border-color: var(--d-primary-100);
}

.d-timeline-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: .5rem;
}

.d-who {
    font-size: .82rem;
    font-weight: 700;
    color: var(--d-ink);
}

.d-when {
    font-size: .71rem;
    color: var(--d-ink-4);
    font-variant-numeric: tabular-nums;
}

/* The field-change rows inside one history entry. */
.d-diff {
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr;
    gap: .3rem .75rem;
    font-size: .78rem;
}

.d-diff-field {
    font-weight: 650;
    color: var(--d-ink-2);
    padding-top: .12rem;
}

.d-diff-values {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}

.d-val {
    display: inline-block;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    border-radius: 6px;
    padding: .1rem .42rem;
    font-size: .755rem;
    line-height: 1.5;
}

.d-val-old {
    background: var(--d-danger-50);
    color: #8c1d1d;
    text-decoration: line-through;
    text-decoration-color: rgba(140, 29, 29, .35);
}

.d-val-new {
    background: var(--d-success-50);
    color: #0a6b48;
    font-weight: 600;
}

.d-val-empty {
    background: var(--d-line-2);
    color: var(--d-ink-4);
    font-style: italic;
}

/* The arrow between old and new. A pseudo-element so the Blade view does not
   have to emit a glyph that would then need flipping for RTL. */
.d-arrow {
    color: var(--d-ink-4);
    font-size: .8rem;
    line-height: 1;
}

[dir="rtl"] .d-arrow {
    transform: scaleX(-1);
    display: inline-block;
}

/* One narrow column cannot hold a two-column diff grid. */
@media (max-width: 640px) {
    .d-diff {
        grid-template-columns: 1fr;
        gap: .15rem;
    }

    .d-diff-field {
        font-size: .73rem;
        color: var(--d-ink-3);
    }

    .d-val {
        max-width: 100%;
        white-space: normal;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
 * 18. Key/value panels
 *
 * Used by the AI integration screen and anywhere a short labelled list reads
 * better than a table.
 * ─────────────────────────────────────────────────────────────────────────── */
.d-kv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .9rem 1.25rem;
    padding: 1rem 1.15rem;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.d-kv-label {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--d-ink-4);
}

.d-kv-value {
    font-size: .845rem;
    font-weight: 600;
    color: var(--d-ink);
    margin-top: .18rem;
    word-break: break-word;
}

.d-code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .76rem;
    background: #0f1729;
    color: #c8d4f5;
    border-radius: var(--d-r);
    padding: .9rem 1rem;
    overflow-x: auto;
    line-height: 1.65;
    /* Code is LTR even on an Arabic page. */
    direction: ltr;
    text-align: left;
    white-space: pre;
    -webkit-user-select: all;
    user-select: all;
}

.d-code-inline {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .76rem;
    background: var(--d-line-2);
    color: var(--d-ink);
    border-radius: 5px;
    padding: .1rem .35rem;
    direction: ltr;
    display: inline-block;
    word-break: break-all;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 19. RTL corrections
 *
 * Everything above uses logical properties, so it flips on its own. These are
 * the cases that cannot: a transform, and an icon whose glyph has a direction
 * baked into it.
 * ─────────────────────────────────────────────────────────────────────────── */
[dir="rtl"] .fi-breadcrumbs-item-separator,
[dir="rtl"] .fi-pagination-previous-btn svg,
[dir="rtl"] .fi-pagination-next-btn svg {
    transform: scaleX(-1);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 20. Print
 *
 * The report screens are printed to PDF. The panel chrome has no business on
 * paper; report.css handles the pages themselves.
 * ─────────────────────────────────────────────────────────────────────────── */
@media print {
    .fi-sidebar,
    .fi-topbar,
    .fi-page-footer-widgets,
    .fi-ta-header-toolbar,
    .fi-pagination {
        display: none !important;
    }

    .fi-body,
    .fi-main-ctn {
        background: #fff !important;
    }

    .fi-main {
        padding: 0 !important;
    }

    .fi-section,
    .fi-ta-ctn,
    .fi-wi-stats-overview-stat {
        box-shadow: none !important;
        border: 1px solid #d1d5db !important;
        break-inside: avoid;
    }
}