/*
 * AgriShop admin panel theme
 * ---------------------------------------------------------------------------
 * Loaded only inside the Filament panel, through a HEAD_END render hook in
 * AdminPanelProvider, so nothing here reaches the public site or the API.
 *
 * It is plain CSS on purpose. The project has no Tailwind or theme build step
 * (resources/css/app.css is empty and there is no tailwind.config.js), and
 * production deploys are `git pull` + composer with no npm stage, so a compiled
 * Filament theme could not be rebuilt there. Everything below therefore layers
 * on top of Filament's own classes.
 *
 * Specificity: Filament styles with single-class utilities, so a `.fi-body`
 * prefix is usually enough to win without !important. The few exceptions are
 * marked individually with the reason.
 */

:root {
    /* ── Brand ─────────────────────────────────────────────────────────────
       Sampled from the real logo, by decoding the pixels of the Android
       launcher icon: #d32d2d covers 89.3% of the mark, with white for the
       frame and wordmark and #a7d149 for the leaf.

       It was #dc2626 here before, taken from public/favicon.svg — which turns
       out to be a hand-drawn placeholder whose colours are stock Tailwind
       values, not the brand. Close, but a shade off, and wrong in principle.

       The green is an accent only. It reads as "growing" next to the red and
       belongs on positive states, not on primary actions: the logo's own
       hierarchy puts red first and the leaf is a detail inside the frame.   */
    --ag-brand:            #d32d2d;
    --ag-brand-hover:      #b52525;
    --ag-brand-tint:       #fdf2f2;  /* pale wash for the active nav item */
    --ag-brand-tint-hover: #fbe4e4;
    --ag-accent:           #a7d149;  /* the leaf */
    --ag-accent-deep:      #6f9a22;  /* same hue, dark enough to read as text */

    /* ── State ─────────────────────────────────────────────────────────────
       Each state carries a text colour, a tint and a border so a badge never
       relies on colour alone to say what it means — the tint gives the fill,
       the border gives the edge, and the label still reads in greyscale.     */
    --ag-success:        #15803d;
    --ag-success-tint:   #dcfce7;
    --ag-success-border: #86efac;
    --ag-warning:        #b45309;
    --ag-warning-tint:   #fef3c7;
    --ag-warning-border: #fcd34d;
    --ag-danger:         #b91c1c;
    --ag-danger-tint:    #fee2e2;
    --ag-danger-border:  #fca5a5;
    --ag-info:           #1d4ed8;
    --ag-info-tint:      #dbeafe;
    --ag-info-border:    #93c5fd;
    --ag-neutral:        #475569;
    --ag-neutral-tint:   #f1f5f9;
    --ag-neutral-border: #cbd5e1;

    /* Visible focus, brand-tinted. Keyboard users need to see where they are,
       and the default outline disappears against several of these surfaces. */
    --ag-focus-ring:     0 0 0 3px rgba(211, 45, 45, .25);

    /* ── Surfaces and text ───────────────────────────────────────────────── */
    --ag-bg:          #f7f8fa;
    --ag-surface:     #ffffff;
    --ag-text:        #202124;
    --ag-text-muted:  #6b7280;
    --ag-border:      #e5e7eb;

    /* ── Spacing scale, 4px increments ───────────────────────────────────── */
    --ag-1:  4px;
    --ag-2:  8px;
    --ag-3: 12px;
    --ag-4: 16px;
    --ag-5: 20px;
    --ag-6: 24px;

    /* ── Component sizing ────────────────────────────────────────────────── */
    --ag-radius:        8px;
    --ag-radius-sm:     6px;
    --ag-control-h:     38px;  /* inputs and buttons */
    --ag-nav-item-h:    38px;
    --ag-content-pad:   20px;  /* same value top, right, bottom, left */
    --ag-card-pad:      16px;
    --ag-cell-pad-y:    9px;
    --ag-cell-pad-x:    14px;

    /* ── Type scale ──────────────────────────────────────────────────────── */
    --ag-text-section: 17px;   /* section headings  */
    --ag-text-card:    15px;   /* card titles       */
    --ag-text-body:    14px;
    --ag-text-table:   13.5px;
    --ag-text-th:      12.5px;
    --ag-text-label:   13px;
    --ag-text-help:    12px;
}

/* ───────────────────────────────────────────────────────────────────────────
   Typography
   Filament already loads Inter; this sets the scale and colour consistently
   instead of leaving each page to its own defaults.
   ─────────────────────────────────────────────────────────────────────────── */

.fi-body {
    background-color: var(--ag-bg);
    color: var(--ag-text);
    font-size: var(--ag-text-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.fi-header-heading {
    /* One title scale admin-wide: a custom page's heading reads the same size
       as the title inside a listing's table card, so moving between Users and,
       say, Razorpay Payments does not change the typographic rhythm. */
    font-size: var(--ag-text-section);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ag-text);
}

.fi-header-subheading {
    font-size: var(--ag-text-body);
    color: var(--ag-text-muted);
}

.fi-section-header-heading {
    font-size: var(--ag-text-section);
    font-weight: 600;
    color: var(--ag-text);
}

.fi-section-header-description {
    font-size: var(--ag-text-help);
    color: var(--ag-text-muted);
}

/* ───────────────────────────────────────────────────────────────────────────
   Density: page shell
   ─────────────────────────────────────────────────────────────────────────── */

.fi-main {
    padding-left: var(--ag-content-pad);
    padding-right: var(--ag-content-pad);
}

/* Filament's page section uses py-8 and gap-y-8; both are a lot of air. */
.fi-body .fi-page > section,
.fi-body section.fi-page-content {
    /* Matches the horizontal padding on .fi-main so the content sits the same
       distance from every edge. */
    padding-top: var(--ag-content-pad);
    padding-bottom: var(--ag-content-pad);
    gap: var(--ag-4);
}

.fi-header {
    margin-bottom: var(--ag-1);
    gap: var(--ag-3);
}

/* ───────────────────────────────────────────────────────────────────────────
   Sidebar
   ─────────────────────────────────────────────────────────────────────────── */

.fi-sidebar {
    background-color: var(--ag-surface);
    border-right: 1px solid var(--ag-border);
}

.fi-sidebar-header {
    background-color: var(--ag-surface);
    border-bottom: 1px solid var(--ag-border);
    box-shadow: none;
    height: 60px;
}

.fi-sidebar-nav {
    padding: var(--ag-3) var(--ag-3) var(--ag-6);
    gap: var(--ag-1);
}

.fi-sidebar-group {
    gap: var(--ag-1);
}

/* Group headings read as quiet section labels rather than competing with items. */
.fi-sidebar-group-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ag-text-muted);
}

.fi-sidebar-item-button {
    min-height: var(--ag-nav-item-h);
    padding: var(--ag-2) var(--ag-3);
    border-radius: var(--ag-radius-sm);
    gap: 10px;
    transition: background-color .12s ease, color .12s ease;
}

.fi-sidebar-item-label {
    font-size: var(--ag-text-body);
    font-weight: 500;
}

.fi-sidebar-item-icon {
    width: 19px;
    height: 19px;
    color: var(--ag-text-muted);
}

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

/* The active item is the one place red earns a background. */
.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: var(--ag-brand-tint);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--ag-brand);
    font-weight: 600;
}

/* Nested items sit in from their parent so the hierarchy is visible. */
.fi-sidebar-group-items .fi-sidebar-item-button {
    padding-left: var(--ag-4);
}

/* ───────────────────────────────────────────────────────────────────────────
   Topbar
   ─────────────────────────────────────────────────────────────────────────── */

.fi-topbar > nav {
    height: 60px;
    min-height: 60px;
    background-color: var(--ag-surface);
    border-bottom: 1px solid var(--ag-border);
    box-shadow: none;
    padding-left: var(--ag-content-pad);
    padding-right: var(--ag-content-pad);
}

/* ───────────────────────────────────────────────────────────────────────────
   Cards and sections
   ─────────────────────────────────────────────────────────────────────────── */

.fi-section,
.fi-wi-stats-overview-stat {
    background-color: var(--ag-surface);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.fi-section-content {
    padding: var(--ag-card-pad);
}

/*
 * A section's title needs room above the rule that follows it.
 *
 * The bottom padding was 0, so the divider sat flush against the descenders of
 * the heading while the first field below it had a comfortable 16px — the
 * title looked underlined rather than separated, and the rhythm was lopsided.
 * 12px below the title against 16px above it and 16px below the rule reads as
 * deliberate at this density.
 */
.fi-section-header {
    padding: var(--ag-card-pad) var(--ag-card-pad) var(--ag-3);
}

/* A description sits under the heading, so it needs its own small gap. */
.fi-section-header-description {
    margin-top: var(--ag-1);
}

/* An icon, heading and description read as one block, not three. */
.fi-section-header-ctn,
.fi-section-header > .fi-section-header-text-ctn {
    row-gap: var(--ag-1);
}

.fi-wi-stats-overview-stat {
    padding: var(--ag-card-pad);
}

/* ───────────────────────────────────────────────────────────────────────────
   Tables
   ─────────────────────────────────────────────────────────────────────────── */

.fi-ta {
    border-radius: var(--ag-radius);
    border: 1px solid var(--ag-border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.fi-ta-header-cell {
    padding: 9px var(--ag-cell-pad-x);
    font-size: var(--ag-text-th);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ag-text-muted);
    background-color: #fafbfc;
    white-space: nowrap;
}

.fi-ta-cell {
    padding: var(--ag-cell-pad-y) var(--ag-cell-pad-x);
    font-size: var(--ag-text-table);
}

.fi-ta-text-item-label,
.fi-ta-text {
    font-size: var(--ag-text-table);
}

.fi-ta-row:hover {
    background-color: #fafbfc;
}

/* The toolbar above a table carries search, filters and column controls. */
.fi-ta-header-ctn,
.fi-ta-header-toolbar {
    padding: 10px var(--ag-cell-pad-x);
    gap: var(--ag-2);
}

.fi-ta-content {
    /* Wide tables stay scrollable rather than stretching the page. */
    overflow-x: auto;
}

.fi-ta-empty-state {
    padding: var(--ag-6) var(--ag-4);
}

.fi-ta-pagination {
    padding: 10px var(--ag-cell-pad-x);
}

/* ───────────────────────────────────────────────────────────────────────────
   Header and listing toolbar as one compact region

   Filament renders the page header and the table as separate blocks, each with
   its own padding, so a listing began with roughly 120px of chrome before the
   first row. These rules pull the two together: the header loses its bottom
   gap, the table card sits directly beneath it, and the toolbar row is slim.
   Title and primary action stay on one line; search, filters and column
   controls stay on theirs, which keeps both readable rather than cramming
   everything into a single row.
   ─────────────────────────────────────────────────────────────────────────── */

.fi-body .fi-page > section > .fi-header {
    margin-bottom: 0;
}

/* ── Listings: the title row joins the table's box ──────────────────────────
   On a listing the page header and the table were two separate cards with a
   gap between, and the toolbar row beneath was mostly empty space to the left
   of the search field. The header is restyled as the first row of the table's
   own box — same white surface, same border, square where they meet — so the
   title and its primary action sit inside the box that carries the filter row,
   with no gap between them.

   Only listing pages are touched; forms, dashboards and custom pages keep the
   ordinary header. The markup is untouched, so every action stays exactly
   where Filament put it.                                                     */

/* Where the table absorbed the title and the Create action, the page's own
   header has nothing left to show. */
.fi-body .fi-resource-list-records-page:has(.fi-ta-header-heading) .fi-header {
    display: none;
}

/* One line: Filament stacks the heading block above the search/filter toolbar
   inside .fi-ta-header-ctn and rules a divider between them. Laid out as a row
   instead, the title and its action sit on the left and search and filters on
   the right — a single row. Below 1024px they stack again, so nothing is
   squeezed on a phone. */
@media (min-width: 1025px) {
    .fi-ta-header-ctn:has(.fi-ta-header-heading) {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--ag-4);
        padding: 10px var(--ag-cell-pad-x);
    }

    /* display:contents dissolves the heading block so the title and the
       primary action become items of the same row as search and filters, and
       can therefore be ordered independently of each other. */
    .fi-ta-header-ctn:has(.fi-ta-header-heading) > .fi-ta-header {
        display: contents;
    }

    /* 1. title, taking the slack */
    .fi-ta-header-ctn:has(.fi-ta-header-heading) > .fi-ta-header > :first-child {
        order: 1;
        flex: 1 1 auto;
    }

    /* 2. search and filters */
    .fi-ta-header-ctn:has(.fi-ta-header-heading) > :not(.fi-ta-header) {
        order: 2;
        flex: 0 0 auto;
        padding: 0;
        border-top: 0;
    }

    /* 3. the primary action, last — after the filter control.
       margin-inline-start cancels Filament's sm:ms-auto, which would
       otherwise push it away from the filter. */
    .fi-ta-header-ctn:has(.fi-ta-header-heading) > .fi-ta-header > .fi-ta-actions {
        order: 3;
        flex: 0 0 auto;
        /* Cancels Filament's sm:ms-auto, which would push the action away from
           the filter; the small gap keeps the filter's count badge off the
           button's corner. */
        margin-inline-start: var(--ag-2);
    }
}

/* Listings that keep their own header — Customers, Ledger — still read as one
   box with the table beneath. */
.fi-body .fi-resource-list-records-page .fi-header {
    background-color: var(--ag-surface);
    border: 1px solid var(--ag-border);
    border-bottom: 0;
    border-radius: var(--ag-radius) var(--ag-radius) 0 0;
    padding: var(--ag-3) var(--ag-cell-pad-x);
    margin-bottom: 0;
    align-items: center;
}

/* The table below continues that same box rather than starting a new one. */
.fi-body .fi-resource-list-records-page .fi-ta {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none;
}

/* The page section is a flex column with a row gap, and the table sits inside
   an unclassed wrapper after the header. Pulling that wrapper up by the gap
   closes the seam so header and table read as one box. Where something
   legitimately comes between them — the status tabs on Customers — the
   wrapper contains .fi-tabs and is left with its normal spacing. */
.fi-body .fi-resource-list-records-page:not(:has(.fi-ta-header-heading)) .fi-header + div:not(:has(.fi-tabs)) {
    margin-top: calc(-1 * var(--ag-4));
}

/* Non-listing pages keep a normal gap under their header. */
.fi-body .fi-page > section > .fi-ta {
    margin-top: var(--ag-2);
}

/* ── Column-toggle control ──────────────────────────────────────────────────
   Removed from the toolbar. It cannot be switched off from the table API:
   Filament's view decides whether to render the dropdown from
   hasToggleableColumns(), and never consults the trigger action's visibility,
   so ->hidden() on it has no effect. Removing toggleable() from the nine
   resources that use it would change which columns show by default, which is
   a data-presentation change rather than the UI removal asked for. Hidden
   with display:none so it also leaves the keyboard tab order.

   Targeted by Filament's own .fi-ta-col-toggle wrapper class. An earlier
   attempt matched on aria-label, which silently matched nothing — the label
   is inner text on this control, not an attribute.                          */
/* Filament's filter trigger always carries a count badge, and it renders "0"
   when nothing is filtered — the view calls ->badge($activeFiltersCount)
   unconditionally, so it cannot be turned off from the action. When filters
   really are active Filament already says so in its "Active filters" bar above
   the rows, which also offers Remove filter, so the badge only ever added a
   stray zero. */
.fi-ta-header-toolbar .fi-ta-filters-dropdown > .fi-dropdown-trigger > .fi-btn > .fi-btn-badge-ctn,
.fi-ta-header-toolbar .fi-modal > .fi-modal-trigger > .fi-btn > .fi-btn-badge-ctn,
/* The above-content-collapsible layout renders its trigger in a bare <span>
   outside both containers above, so Orders — the busiest listing — kept its
   stray "0" after the other layouts were fixed. Found only by reading the
   rendered DOM on the live site. */
.fi-ta-filters-above-content-ctn .fi-btn > .fi-btn-badge-ctn {
    display: none;
}

.fi-ta-col-toggle {
    display: none;
}

.fi-ta-header-ctn {
    border-bottom: 1px solid var(--ag-border);
}

/* Search and the filter/column buttons line up at the same height. */
.fi-ta-search-field .fi-input-wrp,
.fi-ta-header-ctn .fi-input-wrp {
    min-height: 34px;
}

.fi-ta-search-field .fi-input {
    min-height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.fi-ta-actions .fi-icon-btn,
.fi-ta-header-ctn .fi-icon-btn {
    width: 34px;
    height: 34px;
}

/* ───────────────────────────────────────────────────────────────────────────
   Resource tabs

   Some listings (Customers) put status tabs between the header and the table.
   They are real navigation and stay; they are only made to match the rest of
   the density so they cost a row rather than a block.
   ─────────────────────────────────────────────────────────────────────────── */

.fi-tabs {
    /* Filament centres the tab strip with mx-auto; left-aligning it lines the
       strip up with the card underneath instead of floating it mid-page. */
    margin-inline: 0 auto;
    padding: var(--ag-1);
    gap: var(--ag-1);
    border-radius: var(--ag-radius);
    border: 1px solid var(--ag-border);
    background-color: var(--ag-surface);
    box-shadow: none;
}

.fi-tabs-item {
    padding: 6px 10px;
    font-size: var(--ag-text-body);
    font-weight: 500;
    border-radius: var(--ag-radius-sm);
}

.fi-tabs-item-icon {
    width: 16px;
    height: 16px;
}

.fi-tabs-item-active {
    background-color: var(--ag-brand-tint);
    color: var(--ag-brand);
    font-weight: 600;
}

/* ───────────────────────────────────────────────────────────────────────────
   Table density

   Row height is driven by the tallest cell, so the image column is capped and
   every cell is vertically centred. A cell that genuinely needs more room — a
   wrapped address, a stacked name and code — still grows.
   ─────────────────────────────────────────────────────────────────────────── */

.fi-ta-cell,
.fi-ta-header-cell {
    vertical-align: middle;
}

.fi-ta-image {
    width: 34px;
    height: 34px;
    object-fit: cover;
}

/* Filament pads the wrapper inside each cell as well as the cell itself — a
   py-4 that added 32px to every row on top of the cell's own padding. The
   cell owns the vertical rhythm, so the wrappers inside it are flattened.
   Badges and buttons are left alone: their padding is their shape. */
.fi-ta-cell > div,
.fi-ta-cell > div > div:not(.fi-badge),
.fi-ta-cell .fi-ta-col-wrp,
.fi-ta-cell .fi-ta-image-ctn,
/* Every column type wraps its content in an element carrying py-4, nested
   several levels down (cell > col-wrp > a > wrapper), so each needs matching
   at any depth. Listed explicitly rather than with a wildcard, so a wrapper
   whose padding is part of its shape is not caught by accident. Internal grid
   gaps are untouched, so a stacked label and description still breathe. */
.fi-ta-cell .fi-ta-text,
.fi-ta-cell .fi-ta-icon,
.fi-ta-cell .fi-ta-image,
.fi-ta-cell .fi-ta-color,
.fi-ta-cell .fi-ta-select,
.fi-ta-cell .fi-ta-toggle,
.fi-ta-cell .fi-ta-checkbox,
.fi-ta-cell .fi-ta-text-input {
    padding-top: 0;
    padding-bottom: 0;
}

.fi-ta-record-checkbox-ctn,
.fi-ta-actions {
    padding-top: 0;
    padding-bottom: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   Badges
   ─────────────────────────────────────────────────────────────────────────── */

.fi-badge {
    padding: 4px 8px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: var(--ag-radius-sm);
    letter-spacing: .01em;
}

/* ───────────────────────────────────────────────────────────────────────────
   Buttons and inputs
   ─────────────────────────────────────────────────────────────────────────── */

.fi-btn {
    font-size: var(--ag-text-body);
    font-weight: 600;
    border-radius: var(--ag-radius-sm);
    min-height: var(--ag-control-h);
    padding-top: 0;
    padding-bottom: 0;
}

.fi-btn.fi-size-sm,
.fi-btn-size-sm {
    min-height: 32px;
    font-size: var(--ag-text-help);
}

.fi-input,
.fi-select-input,
.fi-input-wrp {
    border-radius: var(--ag-radius-sm);
    font-size: var(--ag-text-body);
}

.fi-input-wrp .fi-input {
    min-height: calc(var(--ag-control-h) - 2px);
    padding-top: 6px;
    padding-bottom: 6px;
}

/* A visible focus ring in the brand colour, for mouse and keyboard alike. */
.fi-input-wrp:focus-within {
    outline: 2px solid var(--ag-brand);
    outline-offset: -1px;
}

.fi-fo-field-wrp-label {
    font-size: var(--ag-text-label);
    font-weight: 600;
    color: var(--ag-text);
}

.fi-fo-field-wrp-helper-text,
.fi-fo-field-wrp-hint {
    font-size: var(--ag-text-help);
    color: var(--ag-text-muted);
}

.fi-fo-component-ctn {
    gap: var(--ag-3);
}

/* ───────────────────────────────────────────────────────────────────────────
   Modals
   ─────────────────────────────────────────────────────────────────────────── */

.fi-modal-window {
    border-radius: 10px;
}

.fi-modal-header {
    padding: var(--ag-4) var(--ag-5) var(--ag-2);
}

.fi-modal-content {
    padding: var(--ag-2) var(--ag-5) var(--ag-4);
    gap: var(--ag-3);
}

.fi-modal-footer {
    padding: var(--ag-3) var(--ag-5) var(--ag-4);
}

.fi-modal-heading {
    font-size: var(--ag-text-section);
    font-weight: 600;
}

/* ───────────────────────────────────────────────────────────────────────────
   Dropdowns
   ─────────────────────────────────────────────────────────────────────────── */

.fi-dropdown-panel {
    border-radius: var(--ag-radius);
    border: 1px solid var(--ag-border);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .10);
}

.fi-dropdown-list-item {
    font-size: var(--ag-text-body);
    padding: 7px 10px;
}

/* ───────────────────────────────────────────────────────────────────────────
   Accessibility
   ─────────────────────────────────────────────────────────────────────────── */

/* Density must not cost a visible focus ring for keyboard users. */
.fi-body :focus-visible {
    outline: 2px solid var(--ag-brand);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .fi-body *,
    .fi-body *::before,
    .fi-body *::after {
        animation-duration: .001ms !important;   /* honouring the user's own setting */
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   Narrow screens
   Touch targets go back up, and the tighter desktop padding is relaxed so
   nothing is cramped against the edge of a phone.
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    :root {
        --ag-content-pad: 16px;
        --ag-nav-item-h:  44px;
        --ag-control-h:   42px;
    }

    /* Title and actions stack instead of colliding. */
    .fi-header {
        flex-direction: column;
        align-items: stretch;
    }

    .fi-ta-header-ctn {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ─── Reports ─────────────────────────────────────────────────────────────────
   This project has no Tailwind build — the prebuilt Filament stylesheet does
   not carry gradient, grid-cols or shadow utilities — so the report chrome is
   written out here. Media queries cannot live in a style attribute either,
   which is the other reason these are classes rather than inline styles.    */

.ag-grad-sales   { background-image: linear-gradient(135deg, #2563eb, #7c3aed); }
.ag-grad-payment { background-image: linear-gradient(135deg, #ec4899, #ef4444); }
.ag-grad-user    { background-image: linear-gradient(135deg, #2563eb, #06b6d4); }

/* ── Overview cards ── */
.ag-report-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ag-4, 16px);
    align-items: stretch;
}

@media (max-width: 1024px) { .ag-report-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ag-report-cards { grid-template-columns: 1fr; } }

.ag-report-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    transition: box-shadow .15s ease, transform .15s ease;
}

.ag-report-card:hover {
    box-shadow: 0 8px 20px rgba(16, 24, 40, .09);
    transform: translateY(-2px);
}

.ag-report-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 14px;
}

.ag-report-card-icon svg { width: 23px; height: 23px; }

.ag-report-card-title { font-size: 1.02rem; font-weight: 700; color: #111827; margin: 0 0 6px; }

.ag-report-card-text {
    font-size: .83rem;
    line-height: 1.5;
    color: #6b7280;
    margin: 0 0 18px;
    /* Pushes the button to the bottom so cards of different text lengths keep
       their buttons on one line. */
    flex: 1 1 auto;
}

.ag-report-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 9px;
    color: #fff !important;
    font-size: .83rem;
    font-weight: 600;
    text-decoration: none;
    align-self: flex-start;
}

.ag-report-card-btn:hover { filter: brightness(1.07); }

/* ── Report page chrome ── */
.ag-report-banner {
    border-radius: 12px;
    padding: 15px 19px;
    color: #fff;
    margin-bottom: var(--ag-4, 16px);
}

.ag-report-banner h2 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.ag-report-banner p  { margin: 3px 0 0; font-size: .8rem; opacity: .9; }

.ag-report-filters {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: var(--ag-4, 16px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    align-items: end;
}

.ag-report-filters label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    margin-bottom: 5px;
}

.ag-report-filters input,
.ag-report-filters select {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: .85rem;
    background: #fff;
    color: #111827;
}

.ag-report-filters input:focus,
.ag-report-filters select:focus {
    outline: 2px solid rgba(37, 99, 235, .35);
    outline-offset: -1px;
    border-color: #2563eb;
}

/*
 * The buttons take a row of their own rather than a grid cell. Sharing the
 * auto-fit track with the inputs gave them a ~170px column once a report had
 * five filters, and three buttons then stacked vertically inside it.
 */
.ag-report-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 2px;
}

.ag-report-actions button {
    height: 38px;
    padding: 0 15px;
    border-radius: 8px;
    font-size: .83rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.ag-btn-apply { background: var(--ag-brand, #dc2626); color: #fff; }
.ag-btn-reset { background: #fff; color: #374151; border-color: #d1d5db !important; }
.ag-btn-pdf   { background: #111827; color: #fff; }
.ag-report-actions button:hover { filter: brightness(1.08); }

.ag-report-cards-stat {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: var(--ag-4, 16px);
}

@media (max-width: 900px) { .ag-report-cards-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ag-report-cards-stat { grid-template-columns: 1fr; } }

.ag-stat {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #94a3b8;
    border-radius: 11px;
    padding: 13px 15px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.ag-stat-label {
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b7280;
}

.ag-stat-value { font-size: 1.32rem; font-weight: 700; color: #111827; margin-top: 3px; }

/* Horizontal scroll keeps wide report tables usable on a phone without
   hiding columns someone came to the report to read. */
.ag-report-table-wrap {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow-x: auto;
}

.ag-report-table { width: 100%; border-collapse: collapse; font-size: .83rem; min-width: 760px; }
.ag-report-table thead th {
    color: #fff;
    text-align: left;
    padding: 10px 12px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}
.ag-report-table tbody td { padding: 10px 12px; border-top: 1px solid #f1f5f9; color: #334155; white-space: nowrap; }
.ag-report-table tbody tr:hover { background: #f8fafc; }
.ag-report-table .ag-num { text-align: right; font-variant-numeric: tabular-nums; }

.ag-report-empty { padding: 48px 16px; text-align: center; color: #94a3b8; font-size: .9rem; }

.ag-report-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: .85rem;
    margin-bottom: var(--ag-4, 16px);
}

.ag-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    text-transform: capitalize;
}

/* ─── Focus ───────────────────────────────────────────────────────────────────
   One visible focus treatment for everything a keyboard can reach. Filament's
   own rings are Tailwind ring utilities, which this panel's prebuilt CSS only
   carries for some components — so several controls focused invisibly. */

.fi-main :is(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--ag-focus-ring);
    border-radius: var(--ag-radius-sm);
}

/* The sidebar sits on a tinted surface where the brand ring disappears. */
.fi-sidebar :is(a, button):focus-visible {
    outline: 2px solid var(--ag-brand);
    outline-offset: -2px;
}

/* ─── Status badges ───────────────────────────────────────────────────────────
   Filament's badges carry a tint and a text colour. A border is added so the
   edge survives when colour does not — print, a greyscale screen, or the
   several forms of colour blindness that flatten red against green. Status is
   never only a hue here; the label is always in the badge. */

.fi-badge {
    border: 1px solid transparent;
    font-weight: 600;
}

.fi-badge.fi-color-success { border-color: var(--ag-success-border); }
.fi-badge.fi-color-warning { border-color: var(--ag-warning-border); }
.fi-badge.fi-color-danger  { border-color: var(--ag-danger-border); }
.fi-badge.fi-color-info    { border-color: var(--ag-info-border); }
.fi-badge.fi-color-primary { border-color: var(--ag-brand); }
.fi-badge.fi-color-gray    { border-color: var(--ag-neutral-border); }

/* ─── Destructive actions ─────────────────────────────────────────────────────
   Brand red and danger red are nearly the same hue here, which is a problem
   when the primary action and the delete action sit in one row. Destructive
   buttons are outlined rather than filled, so "Delete" never looks like the
   thing you are meant to press. */

.fi-modal-footer-actions .fi-btn.fi-color-danger,
.fi-ac .fi-btn.fi-color-danger {
    background: var(--ag-danger-tint);
    color: var(--ag-danger);
    border: 1px solid var(--ag-danger-border);
    box-shadow: none;
}

.fi-modal-footer-actions .fi-btn.fi-color-danger:hover,
.fi-ac .fi-btn.fi-color-danger:hover {
    background: #fecaca;
}

/* ─── Empty states ────────────────────────────────────────────────────────────
   Centred, quiet, and the same on every table rather than whatever each
   resource happened to set. */

.fi-ta-empty-state {
    padding: 56px 16px;
}

.fi-ta-empty-state-icon-ctn {
    background: var(--ag-neutral-tint);
    color: var(--ag-text-muted);
}

.fi-ta-empty-state-heading {
    font-size: var(--ag-text-card);
    color: var(--ag-text);
}

.fi-ta-empty-state-description {
    font-size: var(--ag-text-body);
    color: var(--ag-text-muted);
}

/* ─── Brand lockup ────────────────────────────────────────────────────────────
   Mark plus wordmark in the sidebar header. The wordmark is hidden when the
   sidebar collapses, leaving the mark centred in the icon rail. */

.ag-brand-lockup {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ag-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    flex: 0 0 auto;
}

.ag-brand-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ag-text);
    white-space: nowrap;
}

/* The leaf green, used where the logo itself uses it: as a second syllable,
   not as a second primary. */
.ag-brand-name-accent { color: var(--ag-accent-deep); }

/* ─── Collapsed sidebar ───────────────────────────────────────────────────────
   Filament hides the labels itself; these rules keep what remains centred and
   stop the group headings leaving empty bands in the rail. */

.fi-sidebar:not(.fi-sidebar-open) .ag-brand-name { display: none; }

.fi-sidebar:not(.fi-sidebar-open) .ag-brand-lockup {
    justify-content: center;
    gap: 0;
}

/* The heading and its collapse chevron both go: the chevron alone in a narrow
   rail is a control with nothing visible to collapse. Confirmed against the
   rendered DOM — the element carries `fi-sidebar fi-main-sidebar
   fi-sidebar-open` together, so this selector does reach it. */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-label,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-collapse-button { display: none; }

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-button {
    justify-content: center;
    padding: 0;
    min-height: 0;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* Groups still need separating once their headings are gone. */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group + .fi-sidebar-group {
    border-top: 1px solid var(--ag-border);
    padding-top: var(--ag-2);
    margin-top: var(--ag-2);
}

/* ─── Topbar ──────────────────────────────────────────────────────────────────
   It carried a bell and an avatar on 60px of otherwise empty bar. Shorter, and
   the collapse control sits at the left where it belongs. */

.fi-topbar > nav {
    height: 52px;
    min-height: 52px;
}

.fi-topbar .fi-icon-btn {
    color: var(--ag-text-muted);
}

.fi-topbar .fi-icon-btn:hover {
    color: var(--ag-text);
    background: var(--ag-neutral-tint);
}

/* ─── Sidebar hierarchy ───────────────────────────────────────────────────────
   Group headings were the same weight as the items under them, so the eye had
   to read the indentation to tell a heading from a destination. */

.fi-sidebar-group-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.fi-sidebar-group + .fi-sidebar-group { margin-top: var(--ag-4); }

/* A left marker on the active item, so the current page is identifiable
   without relying on the brand tint alone. */
.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item-active .fi-sidebar-item-button {
    position: relative;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button::before,
.fi-sidebar-item-active .fi-sidebar-item-button::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ag-brand);
}

/* The sidebar scrolls on shorter screens; a thin rail is less noisy than the
   platform default over a tinted surface. */
.fi-sidebar-nav { scrollbar-width: thin; }
.fi-sidebar-nav::-webkit-scrollbar { width: 6px; }
.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: #d7dbe0;
    border-radius: 3px;
}

/* ─── Dashboard ───────────────────────────────────────────────────────────────
   Built on the Phase 2 tokens. What was here before used seven gradient
   classes and ten emoji icons, which reads as a generic analytics template
   rather than a shop's own admin — and put colour everywhere, leaving the brand
   red with nothing left to emphasise.

   Each card carries one tinted left edge instead of a filled gradient, so the
   surface stays neutral and the number is what the eye lands on. */

.ag-dash-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ag-3);
    margin-bottom: var(--ag-5);
}

@media (min-width: 1280px) { .ag-dash-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .ag-dash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .ag-dash-cards { grid-template-columns: 1fr; } }

.ag-stat {
    display: block;
    background: var(--ag-surface);
    border: 1px solid var(--ag-border);
    border-left: 3px solid var(--ag-neutral-border);
    border-radius: var(--ag-radius);
    padding: var(--ag-3) var(--ag-4);
    text-decoration: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}

/* Only the linked cards lift, so the affordance means something. */
a.ag-stat:hover {
    box-shadow: 0 2px 8px rgba(16, 24, 40, .07);
    border-color: var(--ag-text-muted);
}

.ag-stat-label {
    font-size: var(--ag-text-help);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ag-text-muted);
}

.ag-stat-value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ag-text);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.ag-stat-sub {
    font-size: var(--ag-text-help);
    color: var(--ag-text-muted);
    margin-top: 2px;
}

.ag-stat--brand   { border-left-color: var(--ag-brand); }
.ag-stat--accent  { border-left-color: var(--ag-accent); }
.ag-stat--success { border-left-color: var(--ag-success); }
.ag-stat--warning { border-left-color: var(--ag-warning); }
.ag-stat--info    { border-left-color: var(--ag-info); }
.ag-stat--neutral { border-left-color: var(--ag-neutral-border); }

/* ── Today ──
   One line, not four cards: the same measures over a shorter window are not
   new information and did not deserve equal weight. */

.ag-today-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ag-4);
    align-items: baseline;
    background: var(--ag-surface);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radius);
    padding: var(--ag-3) var(--ag-4);
    margin-bottom: var(--ag-5);
    font-size: var(--ag-text-body);
    color: var(--ag-text-muted);
}

.ag-today-strip strong { color: var(--ag-text); }

/* ── Stock alerts ──
   Each state names its count in words as well as colour, and the resolved
   state says what the threshold was rather than only that nothing is wrong. */

.ag-alert-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ag-2);
    margin-bottom: var(--ag-5);
}

.ag-alert {
    display: inline-block;
    padding: var(--ag-2) var(--ag-3);
    border-radius: var(--ag-radius-sm);
    font-size: var(--ag-text-body);
    border: 1px solid transparent;
    text-decoration: none;
}

.ag-alert--ok {
    background: var(--ag-neutral-tint);
    border-color: var(--ag-border);
    color: var(--ag-text-muted);
}

.ag-alert--warning {
    background: var(--ag-warning-tint);
    border-color: var(--ag-warning-border);
    color: var(--ag-warning);
}

.ag-alert--danger {
    background: var(--ag-danger-tint);
    border-color: var(--ag-danger-border);
    color: var(--ag-danger);
}

a.ag-alert:hover { filter: brightness(.97); }