/* ==========================================================================
   PragatiCRM — Premium design system
   Ported from design_handoff/styles.css + premium.css
   Geist Sans + Geist Mono | Enterprise corporate palette
   ========================================================================== */

/* ── Base tokens (light) ─────────────────────────────────────────────────── */
:root {
    --pg-bg-app:            #F1F3F7;
    --pg-bg-page:           #F6F7FB;
    --pg-bg-card:           #FFFFFF;
    --pg-bg-card-2:         #F3F5FA;
    --pg-bg-inset:          #EDF0F6;
    --pg-bg-hover:          #E7EBF3;
    --pg-border:            #DDE2EC;
    --pg-border-strong:     #BFC6D4;
    --pg-border-soft:       #E8ECF3;
    --pg-text:              #0F1729;
    --pg-text-2:            #475569;
    --pg-text-3:            #7C879C;
    --pg-text-4:            #B0B8C8;
    --pg-accent:            #C2410C;
    --pg-accent-soft:       #FFF1E6;
    --pg-accent-border:     #FCD4B0;
    --pg-success:           #15803D;
    --pg-success-soft:      #DCFCE7;
    --pg-warning:           #B45309;
    --pg-warning-soft:      #FEF3C7;
    --pg-danger:            #B91C1C;
    --pg-danger-soft:       #FEE2E2;
    --pg-info:              #1D4ED8;
    --pg-info-soft:         #DBEAFE;
    --pg-shadow-sm:         0 1px 2px rgba(20, 17, 12, 0.04);
    --pg-shadow:            0 1px 2px rgba(20, 17, 12, 0.05);
    --pg-shadow-lg:         0 10px 30px -10px rgba(20, 17, 12, 0.18), 0 4px 10px -4px rgba(20, 17, 12, 0.08);
    --pg-radius:            8px;
    --pg-radius-sm:         6px;
    --pg-radius-lg:         12px;

    /* Section palette — 8 semantic colors (revenue, pipeline, cash, action-queue,
       ai-insights, team/region, sales-metrics, inventory) */
    --pg-sec-sales:         #2F4FCC;   /* indigo  — sales metrics, top sellers */
    --pg-sec-sales-soft:    #E8EDFF;
    --pg-sec-ops:           #0E7C84;   /* teal    — inventory, order activity   */
    --pg-sec-ops-soft:      #DCF3F4;
    --pg-sec-cash:          #B45309;   /* amber   — receivables, cash flow       */
    --pg-sec-cash-soft:     #FEF3C7;
    --pg-sec-inv:           #B91C1C;   /* red     — action queue, critical items */
    --pg-sec-inv-soft:      #FEE2E2;
    --pg-sec-ai:            #6D28D9;   /* violet  — AI insights                  */
    --pg-sec-ai-soft:       #EDE3FE;
    --pg-sec-team:          #334155;   /* slate   — sales by region, team        */
    --pg-sec-team-soft:     #E2E8F0;
    --pg-sec-pipeline:      #1D4ED8;   /* blue    — order pipeline               */
    --pg-sec-pipeline-soft: #DCE7FF;
    --pg-sec-revenue:       #047857;   /* emerald — revenue chart, net sales     */
    --pg-sec-revenue-soft:  #D1FAE5;

    /* Mobile Typography — Phase A Session 29 */
    --pg-m-text-xs: 10.5px;
    --pg-m-text-sm: 12.5px;
    --pg-m-text-base: 14px;
    --pg-m-text-md: 15.5px;
    --pg-m-text-lg: 17px;
    --pg-m-touch: 44px;
    --pg-m-ls-wide: 0.04em;
    --pg-m-ls-wider: 0.08em;
    /* Mobile Surfaces — Phase B Session 29 */
    --pg-m-tab-inactive: #A8A29E;
    --pg-m-topbar-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 2px 12px rgba(194,65,12,0.10);
    --pg-m-chip-shadow-active: 0 3px 10px rgba(194,65,12,0.30);
    --pg-m-tabs-shadow: 0 -1px 0 rgba(0,0,0,0.05), 0 -6px 20px rgba(0,0,0,0.08);
}

/* ── Dark mode tokens ────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --pg-bg-app:            #0A0E1A;
    --pg-bg-page:           #0D1220;
    --pg-bg-card:           #121828;
    --pg-bg-card-2:         #161D2E;
    --pg-bg-inset:          #1A2236;
    --pg-bg-hover:          #1F2942;
    --pg-border:            #232C44;
    --pg-border-strong:     #364261;
    --pg-border-soft:       #1B2236;
    --pg-text:              #ECF0FA;
    --pg-text-2:            #A5B0C9;
    --pg-text-3:            #6F7C99;
    --pg-text-4:            #46506A;
    --pg-accent:            #F97316;
    --pg-accent-soft:       #2A1308;
    --pg-accent-border:     #5C2812;
    --pg-success:           #4ADE80;
    --pg-success-soft:      #052E16;
    --pg-warning:           #F59E0B;
    --pg-warning-soft:      #2A1A02;
    --pg-danger:            #F87171;
    --pg-danger-soft:       #2A0A0A;
    --pg-info:              #60A5FA;
    --pg-info-soft:         #0A1A2E;
    --pg-shadow-sm:         0 1px 0 rgba(0, 0, 0, 0.4);
    --pg-shadow:            0 1px 0 rgba(0, 0, 0, 0.5);
    --pg-shadow-lg:         0 10px 30px -10px rgba(0, 0, 0, 0.6);

    --pg-sec-sales:         #6E89F2;
    --pg-sec-sales-soft:    #1A1F3A;
    --pg-sec-ops:           #2BA8B0;
    --pg-sec-ops-soft:      #0A2226;
    --pg-sec-cash:          #F59E0B;
    --pg-sec-cash-soft:     #2A1A02;
    --pg-sec-inv:           #F87171;
    --pg-sec-inv-soft:      #2A0A0A;
    --pg-sec-ai:            #A78BFA;
    --pg-sec-ai-soft:       #1F1538;
    --pg-sec-team:          #94A3B8;
    --pg-sec-team-soft:     #1A2336;
    --pg-sec-pipeline:      #60A5FA;
    --pg-sec-pipeline-soft: #0A1A2E;
    --pg-sec-revenue:       #34D399;
    --pg-sec-revenue-soft:  #052E1F;
}

/* ── Filament top-nav overrides (admin panel only) ───────────────────────── */
/* Applied when ->topNavigation() is active. Targets fi-topbar-with-navigation
   class added by Filament on the outer wrapper. */

/* Topbar nav element — height 56px, card bg, hairline border, no shadow/ring */
.fi-topbar-with-navigation nav {
    height: 56px;
    min-height: 56px;
    background-color: var(--pg-bg-card, #fff);
    border-bottom: 1px solid var(--pg-border, #DDE2EC);
    padding-left: 18px;
    padding-right: 18px;
    box-shadow: none;
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
}

/* Hide Filament's default brand logo area — topnav-brand.blade.php
   rendered at topbar.start handles the brand mark instead */
.fi-topbar-with-navigation .me-6 {
    display: none;
}

/* Hide any Filament-rendered page header/brand in the dashboard content body.
   The heading property is set to '' on Dashboard.php but belt-and-suspenders CSS. */
.fi-topbar-with-navigation .fi-page-header,
.fi-topbar-with-navigation .fi-header-heading {
    display: none;
}

/* Hide Filament's native brandLogo element in the top-nav layout.
   The topnav-brand hook (panels::topbar.start) already renders the brand mark —
   the brandLogo view is used only for the login screen. */
.fi-topbar-with-navigation .fi-logo {
    display: none;
}

/* Nav items list — stretch to full bar height so underline hits the bottom.
   overflow-x: auto lets all 12 groups scroll horizontally when < 1440px width. */
.fi-topbar-with-navigation ul {
    height: 100%;
    align-self: stretch;
    align-items: stretch;
    gap: 2px;
    margin-right: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap;
}
.fi-topbar-with-navigation ul::-webkit-scrollbar {
    display: none;
}

/* Each <li> item — full height, flex-centered, relative for underline */
.fi-topbar-item {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

/* Item button — override Filament's gray hover with premium tokens */
.fi-topbar-item-button {
    border-radius: 7px;
    padding: 6px 10px;
    gap: 5px;
    background: transparent;
}
.fi-topbar-item-button:hover {
    background-color: var(--pg-bg-hover, #E7EBF3);
}
/* Neutralise Tailwind utility classes Filament inlines */
.fi-topbar-item-button.hover\:bg-gray-50:hover,
.fi-topbar-item-button.dark\:hover\:bg-white\/5:hover {
    background-color: var(--pg-bg-hover, #E7EBF3);
}
.fi-topbar-item-button.bg-gray-50,
.fi-topbar-item-button.dark\:bg-white\/5 {
    background-color: transparent;
}

/* Item label */
.fi-topbar-item-label {
    font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--pg-text-2, #475569);
    white-space: nowrap;
}
.fi-topbar-item-button:hover .fi-topbar-item-label {
    color: var(--pg-text, #0F1729);
}
.fi-topbar-item-button.dark\:text-gray-200 .fi-topbar-item-label,
.fi-topbar-item-button .fi-topbar-item-label.text-gray-700 {
    color: var(--pg-text-2, #475569);
}

/* Item icon */
.fi-topbar-item-icon {
    width: 14px;
    height: 14px;
    color: var(--pg-text-3, #7C879C);
}
.fi-topbar-item-button:hover .fi-topbar-item-icon {
    color: var(--pg-text-2, #475569);
}

/* Dropdown chevron */
.fi-topbar-group-toggle-icon {
    width: 11px;
    height: 11px;
    color: var(--pg-text-4, #B0B8C8);
}

/* Active state — orange underline at nav bottom, stronger label */
.fi-active.fi-topbar-item::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 0;
    height: 2px;
    background: var(--pg-accent, #C2410C);
    border-radius: 1px;
    pointer-events: none;
}
.fi-active .fi-topbar-item-button {
    background: transparent;
}
.fi-active .fi-topbar-item-label {
    color: var(--pg-text, #0F1729);
    font-weight: 600;
}
.fi-active .fi-topbar-item-icon {
    color: var(--pg-accent, #C2410C);
}
/* Neutralise primary color Filament applies to active items */
.fi-active .fi-topbar-item-button .text-primary-600,
.fi-active .fi-topbar-item-button .dark\:text-primary-400 {
    color: var(--pg-accent, #C2410C);
}

/* Filament dropdown panel — styled like the design mega-menu */
.fi-dropdown-panel {
    border-radius: 12px;
    border: 1px solid var(--pg-border, #DDE2EC);
    background-color: var(--pg-bg-card, #fff);
    box-shadow: var(--pg-shadow-lg, 0 10px 30px -10px rgba(20,17,12,.18), 0 4px 10px -4px rgba(20,17,12,.08));
    min-width: 200px;
}
.fi-dropdown-list {
    padding: 6px;
}
.fi-dropdown-list-item {
    border-radius: 6px;
    font-size: 12.5px;
}
.fi-dropdown-list-item-label {
    font-family: "Geist", -apple-system, sans-serif;
    font-size: 12.5px;
    letter-spacing: -0.005em;
    color: var(--pg-text-2, #475569);
}
.fi-dropdown-list-item:hover .fi-dropdown-list-item-label,
.fi-dropdown-list-item:focus .fi-dropdown-list-item-label {
    color: var(--pg-text, #0F1729);
}
.fi-dropdown-list-item.fi-active .fi-dropdown-list-item-label {
    color: var(--pg-accent, #C2410C);
    font-weight: 600;
}

/* ── Tabular numeric utility ─────────────────────────────────────────────── */
.pg-num,
.pg-mono {
    font-family: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
    font-feature-settings: "tnum", "zero", "ss01";
}

/* ── Premium scope ───────────────────────────────────────────────────────── */
/* All dashboard widget markup is wrapped in .premium so these classes
   only activate inside PragatiCRM's custom widget views. They never
   touch Filament's own .fi-* elements. */
.premium {
    font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Card shell */
.premium .pg-card {
    background: var(--pg-bg-card);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    position: relative;
    overflow: hidden;
}

/* Card header strip */
.premium .pg-card-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--pg-bg-card-2);
    border-bottom: 1px solid var(--pg-border);
    gap: 10px;
}
.premium .pg-card-hd h3 {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pg-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.premium .pg-card-sub {
    font-size: 11px;
    color: var(--pg-text-3);
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
}

/* Icon square in card header */
.premium .pg-hd-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

/* Section color modifiers — apply to .pg-card */
.premium .pg-card.sec-sales     { border-top: 2px solid var(--pg-sec-sales); }
.premium .pg-card.sec-sales     .pg-card-hd { background: var(--pg-sec-sales-soft); }
.premium .pg-card.sec-sales     .pg-hd-icon { background: var(--pg-sec-sales); }
.premium .pg-card.sec-sales     .pg-card-hd h3 { color: var(--pg-sec-sales); }

.premium .pg-card.sec-ops       { border-top: 2px solid var(--pg-sec-ops); }
.premium .pg-card.sec-ops       .pg-card-hd { background: var(--pg-sec-ops-soft); }
.premium .pg-card.sec-ops       .pg-hd-icon { background: var(--pg-sec-ops); }
.premium .pg-card.sec-ops       .pg-card-hd h3 { color: var(--pg-sec-ops); }

.premium .pg-card.sec-cash      { border-top: 2px solid var(--pg-sec-cash); }
.premium .pg-card.sec-cash      .pg-card-hd { background: var(--pg-sec-cash-soft); }
.premium .pg-card.sec-cash      .pg-hd-icon { background: var(--pg-sec-cash); }
.premium .pg-card.sec-cash      .pg-card-hd h3 { color: var(--pg-sec-cash); }

.premium .pg-card.sec-inv       { border-top: 2px solid var(--pg-sec-inv); }
.premium .pg-card.sec-inv       .pg-card-hd { background: var(--pg-sec-inv-soft); }
.premium .pg-card.sec-inv       .pg-hd-icon { background: var(--pg-sec-inv); }
.premium .pg-card.sec-inv       .pg-card-hd h3 { color: var(--pg-sec-inv); }

.premium .pg-card.sec-ai        { border-top: 2px solid var(--pg-sec-ai); }
.premium .pg-card.sec-ai        .pg-card-hd { background: var(--pg-sec-ai-soft); }
.premium .pg-card.sec-ai        .pg-hd-icon { background: var(--pg-sec-ai); }
.premium .pg-card.sec-ai        .pg-card-hd h3 { color: var(--pg-sec-ai); }

.premium .pg-card.sec-team      { border-top: 2px solid var(--pg-sec-team); }
.premium .pg-card.sec-team      .pg-card-hd { background: var(--pg-sec-team-soft); }
.premium .pg-card.sec-team      .pg-hd-icon { background: var(--pg-sec-team); }
.premium .pg-card.sec-team      .pg-card-hd h3 { color: var(--pg-sec-team); }

.premium .pg-card.sec-pipeline  { border-top: 2px solid var(--pg-sec-pipeline); }
.premium .pg-card.sec-pipeline  .pg-card-hd { background: var(--pg-sec-pipeline-soft); }
.premium .pg-card.sec-pipeline  .pg-hd-icon { background: var(--pg-sec-pipeline); }
.premium .pg-card.sec-pipeline  .pg-card-hd h3 { color: var(--pg-sec-pipeline); }

.premium .pg-card.sec-revenue   { border-top: 2px solid var(--pg-sec-revenue); }
.premium .pg-card.sec-revenue   .pg-card-hd { background: var(--pg-sec-revenue-soft); }
.premium .pg-card.sec-revenue   .pg-hd-icon { background: var(--pg-sec-revenue); }
.premium .pg-card.sec-revenue   .pg-card-hd h3 { color: var(--pg-sec-revenue); }

/* Kicker label (uppercase tiny label above numbers) */
.premium .pg-kicker {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pg-text-3);
    font-weight: 600;
}

/* Big KPI number */
.premium .pg-big-num {
    font-family: "Geist", sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.025em;
    font-feature-settings: "tnum", "ss01";
    line-height: 1.1;
}
.premium .pg-big-num .pg-unit { color: var(--pg-text-3); font-weight: 500; }

/* Stat tile — small dense KPI inside a card */
.premium .pg-stat-tile {
    padding: 10px 12px;
    border-right: 1px solid var(--pg-border-soft);
    position: relative;
}
.premium .pg-stat-tile:last-child { border-right: none; }
.premium .pg-stat-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pg-text-3);
}
.premium .pg-stat-val {
    font-family: "Geist", sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.025em;
    font-feature-settings: "tnum", "ss01";
    margin-top: 4px;
    line-height: 1.1;
}
.premium .pg-stat-sub {
    font-size: 10.5px;
    color: var(--pg-text-3);
    margin-top: 2px;
}

/* Hero ribbon — 4-cell KPI bar across the top of the dashboard */
.premium .pg-hero-ribbon {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    overflow: hidden;
    background: var(--pg-bg-card);
}
.premium .pg-ribbon-cell {
    padding: 14px 16px 12px;
    border-right: 1px solid var(--pg-border-soft);
    position: relative;
}
.premium .pg-ribbon-cell:last-child { border-right: none; }
.premium .pg-ribbon-cell.sec-sales    { border-top: 2px solid var(--pg-sec-sales); }
.premium .pg-ribbon-cell.sec-ops      { border-top: 2px solid var(--pg-sec-ops); }
.premium .pg-ribbon-cell.sec-cash     { border-top: 2px solid var(--pg-sec-cash); }
.premium .pg-ribbon-cell.sec-inv      { border-top: 2px solid var(--pg-sec-inv); }
.premium .pg-ribbon-cell.sec-ai       { border-top: 2px solid var(--pg-sec-ai); }
.premium .pg-ribbon-cell.sec-revenue  { border-top: 2px solid var(--pg-sec-revenue); }
.premium .pg-ribbon-cell.sec-pipeline { border-top: 2px solid var(--pg-sec-pipeline); }
.premium .pg-ribbon-cell.sec-team     { border-top: 2px solid var(--pg-sec-team); }

/* Delta pill (+12.4% / -3.1%) */
.premium .pg-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 500;
    font-family: "Geist Mono", monospace;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: -0.01em;
}
.premium .pg-delta.up   { color: var(--pg-success); background: var(--pg-success-soft); }
.premium .pg-delta.down { color: var(--pg-danger);  background: var(--pg-danger-soft); }
.premium .pg-delta.flat { color: var(--pg-text-3);  background: var(--pg-bg-inset); }

/* Tag / status badge */
.premium .pg-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--pg-bg-inset);
    color: var(--pg-text-2);
    letter-spacing: -0.005em;
}
.premium .pg-tag.success  { background: var(--pg-success-soft);   color: var(--pg-success); }
.premium .pg-tag.warning  { background: var(--pg-warning-soft);   color: var(--pg-warning); }
.premium .pg-tag.danger   { background: var(--pg-danger-soft);    color: var(--pg-danger); }
.premium .pg-tag.info     { background: var(--pg-info-soft);      color: var(--pg-info); }
.premium .pg-tag.accent   { background: var(--pg-accent-soft);    color: var(--pg-accent); }
.premium .pg-tag.ai       { background: var(--pg-sec-ai-soft);    color: var(--pg-sec-ai); }
.premium .pg-tag.revenue  { background: var(--pg-sec-revenue-soft); color: var(--pg-sec-revenue); }

/* Progress bar */
.premium .pg-progress {
    height: 4px;
    background: var(--pg-bg-inset);
    border-radius: 3px;
    overflow: hidden;
}
.premium .pg-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--pg-text);
}
.premium .pg-progress.accent   .pg-progress-fill { background: var(--pg-accent); }
.premium .pg-progress.success  .pg-progress-fill { background: var(--pg-success); }
.premium .pg-progress.warning  .pg-progress-fill { background: var(--pg-warning); }
.premium .pg-progress.danger   .pg-progress-fill { background: var(--pg-danger); }
.premium .pg-progress.sales    .pg-progress-fill { background: var(--pg-sec-sales); }
.premium .pg-progress.ops      .pg-progress-fill { background: var(--pg-sec-ops); }
.premium .pg-progress.cash     .pg-progress-fill { background: var(--pg-sec-cash); }
.premium .pg-progress.revenue  .pg-progress-fill { background: var(--pg-sec-revenue); }
.premium .pg-progress.pipeline .pg-progress-fill { background: var(--pg-sec-pipeline); }
.premium .pg-progress.ai       .pg-progress-fill { background: var(--pg-sec-ai); }

/* Donut chart wrapper (inline SVG) */
.premium .pg-donut-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.premium .pg-donut-center {
    position: absolute;
    text-align: center;
}

/* Heatmap grid (7×N CSS grid of divs) */
.premium .pg-heatmap {
    display: grid;
    gap: 2px;
}
.premium .pg-heatmap-cell {
    aspect-ratio: 1;
    border-radius: 2px;
    min-width: 8px;
    min-height: 8px;
}

/* AI card — violet gradient + dashed border */
.premium .pg-ai-card {
    border: 1px dashed var(--pg-accent-border);
    background:
        radial-gradient(circle at 0% 0%, var(--pg-sec-ai-soft) 0%, transparent 40%),
        var(--pg-bg-card);
    border-radius: var(--pg-radius);
    padding: 14px;
}

/* Table inside premium card */
.premium .pg-table {
    width: 100%;
    font-size: 12.5px;
    border-collapse: collapse;
}
.premium .pg-table th {
    text-align: left;
    font-weight: 500;
    color: var(--pg-text-3);
    padding: 7px 12px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--pg-border);
    background: var(--pg-bg-card-2);
}
.premium .pg-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--pg-border-soft);
    color: var(--pg-text);
    vertical-align: middle;
}
.premium .pg-table tr:last-child td { border-bottom: none; }
.premium .pg-table .num {
    font-family: "Geist Mono", monospace;
    text-align: right;
    font-feature-settings: "tnum";
}

/* Inline avatar circle */
.premium .pg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pg-sec-sales), #1a2d6b);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Sparkline SVG (inline, 16–32px tall) */
.premium .pg-spark path.line {
    fill: none;
    stroke: var(--pg-text-2);
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.premium .pg-spark path.area { fill: url(#pgSparkFill); opacity: 0.16; }
.premium .pg-spark.revenue path.line { stroke: var(--pg-sec-revenue); }
.premium .pg-spark.sales   path.line { stroke: var(--pg-sec-sales); }
.premium .pg-spark.cash    path.line { stroke: var(--pg-sec-cash); }
.premium .pg-spark.danger  path.line { stroke: var(--pg-danger); }

/* Pipeline funnel bars */
.premium .pg-funnel {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 42px;
}
.premium .pg-funnel-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    min-height: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 3px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    overflow: hidden;
}

/* ==========================================================================
   Mobile design — Brief 8
   Target: 390px viewport. Components hidden at ≥ 1024px (lg:hidden + CSS).
   ========================================================================== */

/* ── Step 1: Mobile topbar ──────────────────────────────────────────────── */

/* Fixed overlay that covers the desktop topbar on mobile */
.pg-mobile-topbar-wrap {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: calc(64px + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 14px 0;
    background: var(--pg-bg-card, #fff);
    border-bottom: 1px solid var(--pg-border, #DDE2EC);
    z-index: 41;
    /* Geist font for children */
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Hide on desktop — belt-and-suspenders alongside lg:hidden Tailwind class */
@media (min-width: 1024px) {
    .pg-mobile-topbar-wrap { display: none !important; }
    .pg-mobile-root { display: none !important; }
}

/* On mobile, suppress the desktop logo link and category nav to avoid overlap */
@media (max-width: 1023px) {
    .pg-topnav-brand-wrap       { display: none !important; }
    nav[aria-label="Main navigation"] { display: none !important; }
    /* Hide Filament's own nav items inside the topbar */
    .fi-topbar-with-navigation nav > ul { display: none !important; }

    /* Remove stacking context — pg-mobile-topbar-wrap floats at root z-level (z:41) above chips (z:28) */
    .fi-topbar-with-navigation {
        position: static !important;
        z-index: auto !important;
    }
    /* Nav height = topbar + chips combined — pushes company card below all fixed bars */
    .fi-topbar-with-navigation nav {
        height: calc(111px + env(safe-area-inset-top, 0px)) !important;
        min-height: calc(111px + env(safe-area-inset-top, 0px)) !important;
    }
}

/* Icon button used in the mobile topbar */
.pg-mobile-iconbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--pg-text-2, #475569) !important;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.1s, color 0.1s;
}
.pg-mobile-iconbtn svg {
    stroke: currentColor;
    fill: none;
    display: block;
}
.pg-mobile-iconbtn:hover {
    background: var(--pg-bg-hover, #E7EBF3);
    color: var(--pg-text, #0F1729);
}

.pg-mobile-brand { display: flex; align-items: center; text-decoration: none; }

/* ── Step 2: Mobile category chip bar ──────────────────────────────────── */

.pg-mobile-chips-outer {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top, 0px));
    left: 0; right: 0;
    z-index: 28;
    background: var(--pg-bg-card, #fff);
    border-bottom: 1px solid var(--pg-border, #DDE2EC);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
}
.pg-mobile-chips-outer::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
    .pg-mobile-chips-outer { display: none !important; }
}

.pg-mobile-chips-row {
    display: flex;
    gap: 6px;
    padding: 8px 14px;
    width: max-content;
}

.pg-mobile-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--pg-border, #DDE2EC);
    font-size: 12px;
    font-weight: 500;
    color: var(--pg-text-2, #475569);
    white-space: nowrap;
    scroll-snap-align: start;
    text-decoration: none;
    font-family: 'Geist', -apple-system, sans-serif;
    background: transparent;
    cursor: pointer;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.pg-mobile-chip:hover {
    background: var(--pg-bg-hover, #E7EBF3);
    color: var(--pg-text, #0F1729);
}
.pg-mobile-chip.pg-active {
    background: var(--pg-accent, #C2410C);
    color: white;
    border-color: var(--pg-accent, #C2410C);
}

/* ── Step 3: Mobile bottom tab bar + drawer ─────────────────────────────── */

.pg-mobile-tabs-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    min-height: calc(60px + env(safe-area-inset-bottom, 0px));
    background: var(--pg-bg-card, #fff);
    border-top: 1px solid var(--pg-border, #DDE2EC);
    display: flex;
    align-items: stretch;
    z-index: 40;
    /* iOS safe area — bar grows to accommodate home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 1024px) {
    .pg-mobile-tabs-bar { display: none !important; }
}

.pg-mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--pg-text-3, #7C879C);
    font-size: 10px;
    font-family: 'Geist', -apple-system, sans-serif;
    font-weight: 500;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.pg-mobile-tab:hover,
.pg-mobile-tab.pg-active { color: var(--pg-accent, #C2410C); }

/* Drawer backdrop */
.pg-mobile-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 45;
    cursor: pointer;
}

/* Drawer panel (slides in from left) */
.pg-mobile-drawer-panel {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 288px;
    background: var(--pg-bg-card, #fff);
    z-index: 50;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    overflow: hidden;
}

/* Alpine transition classes for the drawer slide */
.pg-drawer-enter       { transition: transform 200ms cubic-bezier(0.25,0.46,0.45,0.94); }
.pg-drawer-enter-start { transform: translateX(-100%); }
.pg-drawer-enter-end   { transform: translateX(0); }
.pg-drawer-leave       { transition: transform 160ms ease-in; }
.pg-drawer-leave-start { transform: translateX(0); }
.pg-drawer-leave-end   { transform: translateX(-100%); }

/* Drawer nav item */
.pg-drawer-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12.5px;
    font-family: 'Geist', -apple-system, sans-serif;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--pg-text-2, #475569);
    margin-bottom: 1px;
    transition: background 0.1s, color 0.1s;
}
.pg-drawer-nav-item:hover {
    background: var(--pg-bg-hover, #E7EBF3);
    color: var(--pg-text, #0F1729);
}
.pg-drawer-nav-item.pg-active {
    background: var(--pg-accent-soft, #FFF1E6);
    color: var(--pg-accent, #C2410C);
    font-weight: 600;
}
.pg-drawer-nav-icon {
    width: 14px; height: 14px;
    flex-shrink: 0;
    color: var(--pg-text-3, #7C879C);
    display: flex; align-items: center;
}
.pg-drawer-nav-item.pg-active .pg-drawer-nav-icon { color: var(--pg-accent, #C2410C); }

/* Main content padding on mobile: chips bar (50px) + bottom tabs (60px) */
@media (max-width: 1023px) {
    .fi-main {
        padding-top: 0 !important;
        padding-bottom: 68px !important;
    }

    /* Remove section padding — fi-main padding already clears fixed bars */
    .fi-page.fi-dashboard-page > section {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* Tighten widget grid gap on mobile */
    .fi-dashboard-page .grid {
        gap: 12px !important;
    }
}

/* ── Step 4: Widget grid overrides on mobile ────────────────────────────── */

/* Hero ribbon: 4-col → 2x2 grid on mobile */
@media (max-width: 767px) {
    .pg-hero-ribbon,
    [class*="pg-hero-ribbon"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Add bottom border between the two rows */
    .pg-hero-ribbon > *:nth-child(-n+2),
    [class*="pg-hero-ribbon"] > *:nth-child(-n+2) {
        border-bottom: 1px solid var(--pg-border-soft, #E8ECF3) !important;
    }
}

/* Metrics strip: 6-col → 2-col (2×3) on mobile, 3-col on sm */
@media (max-width: 767px) {
    .pg-metrics-strip {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Add bottom separators every two cells */
    .pg-metrics-strip > *:not(:nth-last-child(-n+2)) {
        border-bottom: 1px solid var(--pg-border-soft, #E8ECF3) !important;
    }
}

/* ================================================================
   MOBILE UI OVERHAUL — PHASES A, B, C — Session 29
   These rules override inline styles in blade components.
   !important is required where blade <style> blocks have cascade priority.
================================================================ */

/* ── PHASE B: TOPBAR ── */
@media (max-width: 1023px) {
  .pg-mobile-topbar-wrap {
    background: linear-gradient(180deg, #FFFFFF 0%, #FEF8F5 100%) !important;
    border-bottom: 2.5px solid #C2410C !important;
    box-shadow: var(--pg-m-topbar-shadow) !important;
  }

  .pg-mobile-iconbtn {
    min-width: var(--pg-m-touch, 44px);
    min-height: var(--pg-m-touch, 44px);
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    color: #C2410C !important;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease, transform 80ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .pg-mobile-iconbtn:active {
    background: rgba(194, 65, 12, 0.10) !important;
    transform: scale(0.90);
  }
  .pg-mobile-iconbtn svg,
  .pg-mobile-iconbtn i {
    color: #C2410C !important;
    stroke: #C2410C !important;
  }

/* ── PHASE B: CHIPS BAR ── */
  .pg-mobile-chips-outer {
    background: #F7F5F4 !important;
    border-bottom: 1px solid #E5E1DD !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
  }

  .pg-chip {
    background: #FFFFFF !important;
    color: #57534E !important;
    border: 1.5px solid #D6D3D1 !important;
    border-radius: 20px !important;
    padding: 6px 13px !important;
    font-size: var(--pg-m-text-sm, 12.5px) !important;
    font-weight: 500 !important;
    letter-spacing: var(--pg-m-ls-wide, 0.04em) !important;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    transition: background 150ms ease, color 150ms ease,
                border-color 150ms ease, box-shadow 150ms ease,
                transform 100ms ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }
  .pg-chip:active {
    transform: scale(0.94) !important;
  }
  .pg-chip.pg-active {
    background: #C2410C !important;
    color: #FFFFFF !important;
    border-color: #C2410C !important;
    box-shadow: var(--pg-m-chip-shadow-active) !important;
    font-weight: 600 !important;
  }

/* ── PHASE B: BOTTOM TAB BAR ── */
  .pg-mobile-tabs-bar {
    background: #FFFFFF !important;
    border-top: none !important;
    box-shadow: var(--pg-m-tabs-shadow) !important;
  }

  .pg-tab-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--pg-m-touch, 44px);
    flex: 1;
    background: transparent;
    border: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 80ms ease;
    cursor: pointer;
    padding: 8px 4px;
  }
  .pg-tab-btn:active {
    transform: scale(0.88);
  }

  .pg-tab-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pg-m-tab-inactive, #A8A29E);
    transition: color 200ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .pg-tab-btn.pg-active .pg-tab-icon {
    color: #C2410C;
  }

  .pg-tab-label {
    font-size: var(--pg-m-text-xs, 10.5px) !important;
    font-weight: 500;
    letter-spacing: var(--pg-m-ls-wide, 0.04em);
    color: var(--pg-m-tab-inactive, #A8A29E);
    transition: color 200ms ease, font-weight 200ms ease;
    line-height: 1;
  }
  .pg-tab-btn.pg-active .pg-tab-label {
    color: #C2410C;
    font-weight: 600;
  }

/* ── PHASE B: DRAWER ── */
  .pg-mobile-drawer-overlay {
    background: rgba(28, 25, 23, 0.55) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }

  .pg-mobile-drawer-panel {
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18) !important;
  }

  /* Drawer header gradient — class added to header div in blade file */
  .pg-drawer-header {
    background: linear-gradient(135deg, #6B1A07 0%, #9A3412 50%, #C2410C 100%) !important;
    padding: 18px 16px 14px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Logo pill on gradient header */
  .pg-drawer-logo-pill {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
  }
  .pg-drawer-logo-pill img {
    height: 24px;
    width: auto;
    display: block;
  }

  /* Close button on gradient */
  .pg-drawer-close-btn {
    color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }
  .pg-drawer-close-btn:active {
    background: rgba(255, 255, 255, 0.25) !important;
  }

  /* Drawer nav section labels */
  .pg-drawer-section-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: var(--pg-m-ls-wider, 0.08em) !important;
    text-transform: uppercase !important;
    color: #A8A29E !important;
    padding: 12px 24px 4px !important;
    display: block;
  }

  /* Drawer nav items */
  .pg-drawer-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-radius: 8px;
    margin: 1px 8px;
    color: #44403C;
    font-size: var(--pg-m-text-base, 14px);
    font-weight: 500;
    transition: background 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    text-decoration: none;
  }
  .pg-drawer-nav-item:active {
    background: rgba(194, 65, 12, 0.08);
  }
  .pg-drawer-nav-item.pg-active {
    background: rgba(194, 65, 12, 0.10);
    color: #C2410C;
    font-weight: 600;
  }
  .pg-drawer-nav-item.pg-active svg,
  .pg-drawer-nav-item.pg-active i {
    color: #C2410C !important;
  }

/* ── PHASE C: ANIMATIONS ── */

  /* Tab active indicator pill (element added in blade file — Change 2A) */
  .pg-tab-indicator {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 20px;
    height: 3px;
    background: #C2410C;
    border-radius: 2px;
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
  }
  .pg-tab-btn.pg-active .pg-tab-indicator {
    transform: translateX(-50%) scaleX(1);
  }

  /* Tab icon bounce on activation */
  @keyframes pg-tab-pop {
    0%   { transform: scale(1)    translateY(0); }
    40%  { transform: scale(1.28) translateY(-3px); }
    70%  { transform: scale(0.94) translateY(0); }
    100% { transform: scale(1.08) translateY(-1px); }
  }
  .pg-tab-btn.pg-active .pg-tab-icon {
    animation: pg-tab-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  /* Chip selected feedback */
  @keyframes pg-chip-select {
    0%   { transform: scale(1); }
    35%  { transform: scale(0.93); }
    100% { transform: scale(1); }
  }
  .pg-chip.pg-active {
    animation: pg-chip-select 180ms ease forwards;
  }

  /* User panel slide-in */
  @keyframes pg-panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .pg-upanel-enter-active {
    animation: pg-panel-in 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  /* Respect reduced motion preference */
  @media (prefers-reduced-motion: reduce) {
    .pg-tab-indicator,
    .pg-tab-btn,
    .pg-tab-icon,
    .pg-chip,
    .pg-mobile-iconbtn,
    .pg-drawer-nav-item {
      transition: none !important;
      animation: none !important;
    }
  }
}

/* ================================================================
   MOBILE TABLE — COLUMN PRIORITY HIDING — Session 29
   Show: checkbox (1) + primary (2) + secondary (3) + actions (last).
   Everything between column 3 and last is hidden on phone screens.
   Users tap row → View page for full record (all panels, Session 25).
================================================================ */

@media (max-width: 767px) {
  .pg-col-mobile-hide {
    display: none !important;
  }
}

@media (max-width: 639px) {

  /* Primary column: allow wrapping, prevent overflow */
  .fi-ta-cell:nth-child(2) {
    max-width: 160px;
    white-space: normal !important;
    word-break: break-word;
  }

  /* Tighter padding across remaining cells */
  .fi-ta-cell,
  .fi-ta-header-cell {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Checkbox column: minimum footprint */
  .fi-ta-header-cell:first-child,
  .fi-ta-cell:first-child {
    min-width: 32px !important;
    width: 32px !important;
    padding-left: 10px !important;
    padding-right: 2px !important;
  }

  /* Actions column: shrink to icon only */
  .fi-ta-header-cell:last-child,
  .fi-ta-cell:last-child {
    min-width: 36px !important;
    width: 36px !important;
  }

  /* Ensure table still scrolls if the 3 columns still overflow */
  .fi-ta-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .fi-ta-wrap::-webkit-scrollbar { display: none; }
}

/* ================================================================
   MOBILE TABLE DENSITY — Session 29
   Filament tables use desktop padding/font (14px/16px padding).
   These overrides produce compact mobile rows with two-line layout.
================================================================ */

@media (max-width: 767px) {

  /* ── ROW DENSITY ── */
  .fi-ta-cell {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    vertical-align: top !important;
  }

  /* ── HEADER ROW ── */
  .fi-ta-header-cell {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #9CA3AF !important;
  }

  /* ── PRIMARY CELL TEXT ── */
  .fi-ta-col-wrp {
    line-height: 1.4 !important;
  }
  .fi-ta-col-wrp > div > span:first-child,
  .fi-ta-col-wrp > span {
    font-size: 13px !important;
    font-weight: 500 !important;
  }

  /* ── DESCRIPTION / SECOND LINE ──
     Targets Filament's ->description() output.
     Filament 3 renders description as a <p> or [class*="description"]
     inside .fi-ta-col-wrp */
  .fi-ta-col-wrp p,
  .fi-ta-col-wrp [class*="description"],
  .fi-ta-text-item-description {
    font-size: 11px !important;
    color: #78716C !important;
    margin-top: 2px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
  }

  /* ── STATUS BADGES IN DESCRIPTION ── keep colored */
  .fi-ta-col-wrp .fi-badge {
    font-size: 9px !important;
    padding: 1px 5px !important;
    line-height: 1.4 !important;
    border-radius: 4px !important;
  }

  /* ── CHECKBOX COLUMN ── */
  .fi-ta-header-cell:first-child,
  .fi-ta-cell:first-child {
    min-width: 32px !important;
    width: 32px !important;
    padding-left: 10px !important;
    padding-right: 2px !important;
  }

  /* ── ACTION BUTTONS ── smaller touch area */
  .fi-ta-cell .fi-btn,
  .fi-ta-cell .fi-dropdown-trigger {
    padding: 4px 6px !important;
    font-size: 12px !important;
    min-height: 30px !important;
    min-width: 30px !important;
  }
  .fi-ta-cell .fi-btn svg,
  .fi-ta-cell .fi-dropdown-trigger svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ================================================================
   MOBILE PAGE HEADER — HEADING + NEW BUTTON INLINE — Session 29
================================================================ */

@media (max-width: 767px) {
  /* Force single-row layout — correct selector: fi-header */
  header.fi-header {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 12px 16px !important;
    gap: 8px !important;
  }

  header.fi-header > div:first-child {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .fi-page-heading {
    font-size: 20px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* New button: compact, never wraps */
  header.fi-header .fi-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 7px 11px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
  }
  header.fi-header .fi-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ================================================================
   MOBILE CARD LAYOUT SYSTEM — Session 29

   Architecture:
   1. Exit table-formatting-context (table/tbody → block, tr → grid)
   2. Hide all <td> by default in grid context
   3. Show + position specific cells by fi-table-cell-{name} class
   4. No nth-child, no extraAttributes, no PHP changes needed

   fi-table-cell-{name} key:
   column_name → underscores+dots become hyphens, lowercase
   e.g. grand_total → fi-table-cell-grand-total
        customer.name → fi-table-cell-customer\.name
================================================================ */

@media (max-width: 767px) {

/* ── 1. EXIT TABLE FORMATTING CONTEXT ────────────────────────── */

.fi-ta-table {
  display: block !important;
}
.fi-ta-table > thead {
  display: none !important;
}
.fi-ta-table > tbody {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* ── 2. ROW → CARD ───────────────────────────────────────────── */

.fi-ta-table > tbody > tr.fi-ta-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  row-gap: 3px !important;
  align-items: start !important;
  background: #FFFFFF !important;
  border: 1px solid #EDE9E5 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 2px 10px rgba(0,0,0,0.04) !important;
  padding: 12px 13px !important;
}

/* ── 3. ALL CELLS HIDDEN BY DEFAULT (grid context, not table) ── */

.fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell {
  display: none !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ── 4. CHECKBOX ─────────────────────────────────────────────── */

.fi-ta-selection-cell {
  display: none !important;
}

/* ── 5. CARD ROLES ───────────────────────────────────────────── */

/* ─── ROLE A: PRIMARY (party name — top-left, large, bold) ─── */

/* Transaction tables: customer or supplier name */
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-customer\.name,
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-supplier\.name {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.fi-table-cell-customer\.name .fi-ta-col-wrp,
.fi-table-cell-supplier\.name .fi-ta-col-wrp {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}
/* Description on customer/supplier is empty — no text to hide */

/* Party list tables (Customer list, Supplier list, Lead list) —
   fi-table-cell-name is the primary column */
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-name {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.fi-table-cell-name .fi-ta-col-wrp > *:first-child {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
  line-height: 1.3 !important;
}
/* Keep description on 'name' — shows company · city below (Customer, Supplier) */
.fi-table-cell-name .fi-ta-col-wrp p {
  font-size: 11px !important;
  color: #A8A29E !important;
  margin-top: 2px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ─── ROLE B: REFERENCE NUMBER (bottom-left, muted, small) ─── */

.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-invoice-number,
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-quotation-number,
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-order-number,
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-po-number,
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-return-number,
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-credit-note-number,
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-debit-note-number,
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-recurring-number,
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-dc-number,
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-transfer-number,
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-contract-number,
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-ticket-number,
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-expense-number,
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-pl-number {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
}
.fi-table-cell-invoice-number .fi-ta-col-wrp,
.fi-table-cell-quotation-number .fi-ta-col-wrp,
.fi-table-cell-order-number .fi-ta-col-wrp,
.fi-table-cell-po-number .fi-ta-col-wrp,
.fi-table-cell-return-number .fi-ta-col-wrp,
.fi-table-cell-credit-note-number .fi-ta-col-wrp,
.fi-table-cell-debit-note-number .fi-ta-col-wrp,
.fi-table-cell-recurring-number .fi-ta-col-wrp,
.fi-table-cell-dc-number .fi-ta-col-wrp,
.fi-table-cell-transfer-number .fi-ta-col-wrp,
.fi-table-cell-contract-number .fi-ta-col-wrp,
.fi-table-cell-ticket-number .fi-ta-col-wrp,
.fi-table-cell-expense-number .fi-ta-col-wrp,
.fi-table-cell-pl-number .fi-ta-col-wrp {
  font-size: 11.5px !important;
  color: #A8A29E !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}
/* Hide description on ref columns (customer+amount shown in separate cells) */
.fi-table-cell-invoice-number .fi-ta-col-wrp p,
.fi-table-cell-quotation-number .fi-ta-col-wrp p,
.fi-table-cell-order-number .fi-ta-col-wrp p,
.fi-table-cell-po-number .fi-ta-col-wrp p,
.fi-table-cell-return-number .fi-ta-col-wrp p,
.fi-table-cell-credit-note-number .fi-ta-col-wrp p,
.fi-table-cell-debit-note-number .fi-ta-col-wrp p,
.fi-table-cell-recurring-number .fi-ta-col-wrp p {
  display: none !important;
}

/* Payment tables: date is the "ref" row */
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-payment-date {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
}
.fi-table-cell-payment-date .fi-ta-col-wrp {
  font-size: 11.5px !important;
  color: #A8A29E !important;
}
/* Product cards: SKU in secondary row */
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-sku {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
}
.fi-table-cell-sku .fi-ta-col-wrp {
  font-size: 11px !important;
  color: #A8A29E !important;
}

/* Lead cards: company in secondary row */
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-company {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
}
.fi-table-cell-company .fi-ta-col-wrp {
  font-size: 11px !important;
  color: #A8A29E !important;
}

/* ─── ROLE C: AMOUNT (top-right, orange, bold) ─── */

.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-grand-total,
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-total-amount,
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-total-value {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  text-align: right !important;
}
.fi-table-cell-grand-total .fi-ta-col-wrp,
.fi-table-cell-total-amount .fi-ta-col-wrp,
.fi-table-cell-total-value .fi-ta-col-wrp {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #C2410C !important;
  white-space: nowrap !important;
  text-align: right !important;
}

/* Payment: amount received */
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-total-settled {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  text-align: right !important;
}
.fi-table-cell-total-settled .fi-ta-col-wrp {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #C2410C !important;
  text-align: right !important;
}

/* Product: price (neutral dark, not orange) */
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-price {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  text-align: right !important;
}
.fi-table-cell-price .fi-ta-col-wrp {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1C1917 !important;
  text-align: right !important;
}

/* Expense: total_amount (show only one amount for expense cards) */
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-total-amount {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* ─── ROLE D: STATUS (bottom-right, badge) ─── */

.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-status {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  text-align: right !important;
  align-self: start !important;
}
/* Compact badge for card */
.fi-table-cell-status .fi-badge {
  font-size: 9.5px !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* ─── ROLE E: SECONDARY AMOUNT (stock qty, below price) ─── */

.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-stock-quantity {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  text-align: right !important;
}
.fi-table-cell-stock-quantity .fi-ta-col-wrp {
  font-size: 11px !important;
  color: #A8A29E !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* ─── HSN Code cards ─── */
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-code {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-code .fi-ta-col-wrp {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
}

.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-description {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
}
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-description .fi-ta-col-wrp {
  font-size: 11.5px !important;
  color: #A8A29E !important;
}

.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-gst-rate {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  text-align: right !important;
}

/* ─── Stock Movement cards ─── */
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-product\.name {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-product\.name .fi-ta-col-wrp {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
}

.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-created-at {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
}
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-created-at .fi-ta-col-wrp {
  font-size: 11.5px !important;
  color: #A8A29E !important;
}

.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-quantity {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  text-align: right !important;
}
.fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-quantity .fi-ta-col-wrp {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1C1917 !important;
  text-align: right !important;
}

/* ── 6. CLEAN UP TABLE CONTAINER ──────────────────────────────── */

/* Remove outer table border/striping */
.fi-ta-table > tbody > tr.fi-ta-row {
  border-top: none !important;
  border-bottom: none !important;
}
/* Outer wrap: no horizontal scroll needed with cards */
.fi-ta-wrap {
  overflow-x: hidden !important;
}
/* Table search/filter bar: full width */
.fi-ta-search-field-wrp {
  max-width: 100% !important;
}

/* White gap fix — Filament page section has py-8 (32px top padding).
   On mobile fi-main already handles the fixed-header offset via JS.
   Remove the section top padding and restore just enough breathing room. */
.fi-main section {
  padding-top: 0 !important;
}
header.fi-header {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

} /* end @media */

/* ================================================================
   SESSION 30 — MOBILE CARD ENHANCEMENTS
================================================================ */

/* ----------------------------------------------------------------
   1. CARD ACTION STRIP
   Positions the Filament actions cell as a full-width third row
   below the 2×2 card grid. Only shows when pg-mobile-action
   buttons are present (Invoice, Quotation, SalesOrder cards).
   ---------------------------------------------------------------- */

    /* Strengthen cell show rule to beat td.fi-ta-cell blanket hide */
    @media (max-width: 767px) {
        .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell:has(.pg-mobile-action) {
            display: flex !important;
            grid-column: 1 / -1;
            grid-row: 3;
            padding: 4px 12px 10px 12px;
            gap: 8px;
            align-items: center;
            border-top: 1px solid #F0EDE9;
            flex-wrap: wrap;
        }

        .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-actions-cell:not(:has(.pg-mobile-action)) {
            display: none !important;
        }

        /* Hide all buttons and links in the strip by default */
        .fi-ta-actions-cell button,
        .fi-ta-actions-cell a {
            display: none !important;
        }

        /* Show scenario A: class is directly on the button/link element */
        .fi-ta-actions-cell button.pg-mobile-action,
        .fi-ta-actions-cell a.pg-mobile-action {
            display: inline-flex !important;
            align-items: center;
            gap: 4px;
            padding: 5px 10px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 600;
            min-height: 30px;
            white-space: nowrap;
            cursor: pointer;
            text-decoration: none;
            border: 1px solid;
            line-height: 1;
        }

        /* Show scenario B: class is on a wrapper div containing the button/link */
        .fi-ta-actions-cell .pg-mobile-action button,
        .fi-ta-actions-cell .pg-mobile-action a {
            display: inline-flex !important;
            align-items: center;
            gap: 4px;
            padding: 5px 10px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 600;
            min-height: 30px;
            white-space: nowrap;
            cursor: pointer;
            text-decoration: none;
            border: 1px solid;
            line-height: 1;
        }

        /* Colour variants — applied whether class is on button or wrapper */
        .fi-ta-actions-cell .pg-action-whatsapp,
        .fi-ta-actions-cell .pg-action-whatsapp button,
        .fi-ta-actions-cell .pg-action-whatsapp a {
            background: #F0FDF4 !important; color: #15803D !important;
            border-color: #86EFAC !important;
        }
        .fi-ta-actions-cell .pg-action-pdf,
        .fi-ta-actions-cell .pg-action-pdf button,
        .fi-ta-actions-cell .pg-action-pdf a {
            background: #F8FAFC !important; color: #475569 !important;
            border-color: #CBD5E1 !important;
        }
        .fi-ta-actions-cell .pg-action-payment,
        .fi-ta-actions-cell .pg-action-payment button,
        .fi-ta-actions-cell .pg-action-payment a {
            background: #FFF7F5 !important; color: #C2410C !important;
            border-color: #FDBA74 !important;
        }
        .fi-ta-actions-cell .pg-action-approve,
        .fi-ta-actions-cell .pg-action-approve button,
        .fi-ta-actions-cell .pg-action-approve a {
            background: #EFF6FF !important; color: #1D4ED8 !important;
            border-color: #93C5FD !important;
        }
        .fi-ta-actions-cell .pg-action-generate,
        .fi-ta-actions-cell .pg-action-generate button,
        .fi-ta-actions-cell .pg-action-generate a {
            background: #FFFBEB !important; color: #92400E !important;
            border-color: #FCD34D !important;
        }
        .fi-ta-actions-cell .pg-action-whatsapp svg,
        .fi-ta-actions-cell .pg-action-pdf svg,
        .fi-ta-actions-cell .pg-action-payment svg,
        .fi-ta-actions-cell .pg-action-approve svg,
        .fi-ta-actions-cell .pg-action-generate svg {
            width: 14px !important; height: 14px !important; flex-shrink: 0;
        }
    }

/* ----------------------------------------------------------------
   2. DOT-ESCAPE RULES — RELATIONSHIP COLUMNS
   Filament preserves dots in column class names.
   customer.name → fi-table-cell-customer.name → CSS: customer\.name

   PaymentResource     : customer.name (ROLE A) — already in Session 29
                         payment_date  (ROLE B) — already in Session 29
                         total_settled (ROLE C) — already in Session 29

   SupplierPaymentResource: supplier.name (ROLE A) — already in Session 29
                            payment_date  (ROLE B) — already in Session 29
                            total_settled (ROLE C) — already in Session 29

   Rules below cover the remaining resources not handled in Session 29.
   ---------------------------------------------------------------- */
@media (max-width: 767px) {

    /* --- ExpenseResource — ROLE A: paid_to_label ---
       paid_to_label uses ->getStateUsing(); make() key is 'paid_to_label'
       CSS class: fi-table-cell-paid-to-label
       expense_number (ROLE B) — already in Session 29
       total_amount   (ROLE C) — already in Session 29
       status         (ROLE D) — already in Session 29 */
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-paid-to-label {
        display: block !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .fi-table-cell-paid-to-label .fi-ta-col-wrp {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1C1917 !important;
        line-height: 1.3 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* --- ProductBatchResource ---
       product.name (ROLE A) — already in Session 29
       status       (ROLE D) — already in Session 29 */

    /* ROLE B: batch_number — bottom-left muted ref */
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-batch-number {
        display: block !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    .fi-table-cell-batch-number .fi-ta-col-wrp {
        font-size: 11.5px !important;
        color: #A8A29E !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
    }

    /* ROLE C: expiry_date — top-right, most critical batch data point */
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-expiry-date {
        display: block !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        text-align: right !important;
    }
    .fi-table-cell-expiry-date .fi-ta-col-wrp {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #1C1917 !important;
        white-space: nowrap !important;
        text-align: right !important;
    }

    /* --- ProductSerialResource ---
       product.name (ROLE A) — already in Session 29
       status       (ROLE D) — already in Session 29 */

    /* ROLE B: serial_number — bottom-left muted ref */
    .fi-ta-table > tbody > tr.fi-ta-row > td.fi-table-cell-serial-number {
        display: block !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    .fi-table-cell-serial-number .fi-ta-col-wrp {
        font-size: 11.5px !important;
        color: #A8A29E !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
    }

    /* --- StockMovementResource ---
       product.name (ROLE A) — already in Session 29
       created_at   (ROLE B) — already in Session 29
       quantity     (ROLE C) — already in Session 29 */

    /* ROLE D: type badge — bottom-right (in/out/adjustment)
       Scoped to rows that contain a quantity cell — StockMovement only.
       Invoice also has a 'type' BadgeColumn but no quantity column,
       so this rule does not trigger for Invoice cards. */
    .fi-ta-table > tbody > tr.fi-ta-row:has(td.fi-table-cell-quantity) > td.fi-table-cell-type {
        display: block !important;
        grid-column: 2 !important;
        grid-row: 2 !important;
        text-align: right !important;
        align-self: start !important;
    }
    .fi-ta-table > tbody > tr.fi-ta-row:has(td.fi-table-cell-quantity) .fi-table-cell-type .fi-badge {
        font-size: 9.5px !important;
        padding: 2px 7px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }
}

/* ----------------------------------------------------------------
   3. CARD POLISH — BADGE COMPACTION
   Applies to all mobile cards system-wide.
   ---------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Compact status badges on mobile cards */
    .fi-ta-row .fi-badge {
        font-size: 9.5px !important;
        padding: 2px 7px !important;
        border-radius: 10px !important;
        line-height: 1.4 !important;
    }

    /* Ensure amount colour cascades through Filament's money wrapper */
    .fi-table-cell-grand-total .fi-ta-col-wrp,
    .fi-table-cell-grand-total .fi-ta-col-wrp span,
    .fi-table-cell-total-amount .fi-ta-col-wrp,
    .fi-table-cell-total-amount .fi-ta-col-wrp span,
    .fi-table-cell-total-value .fi-ta-col-wrp,
    .fi-table-cell-total-value .fi-ta-col-wrp span {
        color: #C2410C !important;
        font-weight: 700 !important;
        font-size: 14px !important;
    }
}

/* --- END SESSION 30 --- */

/* =========================================================================
   SESSION 31 — Left-border status accents
   Adds a 3px coloured left border to mobile table rows based on record state.
   Classes applied via ->recordClasses() in InvoiceResource, QuotationResource,
   SalesOrderResource. All rules scoped to mobile breakpoint only.
   ========================================================================= */
@media (max-width: 767px) {
    /* Selectors use full table ancestry to beat .fi-ta-table > tbody > tr.fi-ta-row (0,2,2) card rule */
    .fi-ta-table > tbody > tr.fi-ta-row.pg-row-paid,
    .fi-ta-table > tbody > tr.fi-ta-row.pg-row-approved,
    .fi-ta-table > tbody > tr.fi-ta-row.pg-row-dispatched {
        border-left: 3px solid #15803D !important;
    }

    .fi-ta-table > tbody > tr.fi-ta-row.pg-row-overdue {
        border-left: 3px solid #DC2626 !important;
    }

    .fi-ta-table > tbody > tr.fi-ta-row.pg-row-partial,
    .fi-ta-table > tbody > tr.fi-ta-row.pg-row-ready {
        border-left: 3px solid #D97706 !important;
    }
}

/* --- END SESSION 31 --- */

/* ============================================================
   SESSION 30 — PART D: ACTION BUTTON LABEL COMPRESSION
   WhatsApp + PDF → icon only (no text label)
   Record Payment → banknotes icon + ₹ symbol only
   Fixes overflow on 360px cards where 3 labelled buttons clip.
   ============================================================ */
@media (max-width: 767px) {

    /* --- Hide text labels: WhatsApp and PDF buttons --- */
    /* Targets fi-btn-label span (Filament 3 standard label class).
       Fallback: any span not containing an SVG (covers all rendering variants) */
    .fi-ta-actions-cell .pg-action-whatsapp .fi-btn-label,
    .fi-ta-actions-cell .pg-action-whatsapp button span:not(:has(svg)),
    .fi-ta-actions-cell .pg-action-whatsapp a span:not(:has(svg)),
    .fi-ta-actions-cell .pg-action-pdf .fi-btn-label,
    .fi-ta-actions-cell .pg-action-pdf button span:not(:has(svg)),
    .fi-ta-actions-cell .pg-action-pdf a span:not(:has(svg)) {
        display: none !important;
    }

    /* Icon-only buttons: tighten padding to a near-square tap target */
    .fi-ta-actions-cell .pg-action-whatsapp,
    .fi-ta-actions-cell .pg-action-whatsapp button,
    .fi-ta-actions-cell .pg-action-whatsapp a,
    .fi-ta-actions-cell .pg-action-pdf,
    .fi-ta-actions-cell .pg-action-pdf button,
    .fi-ta-actions-cell .pg-action-pdf a {
        padding: 6px 10px !important;
        min-width: 36px !important;
    }

    /* Enlarge SVG icons slightly for icon-only buttons */
    .fi-ta-actions-cell .pg-action-whatsapp svg,
    .fi-ta-actions-cell .pg-action-pdf svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* --- Record Payment: replace label text with ₹ symbol --- */
    /* Hide the "Record Payment" label span */
    .fi-ta-actions-cell .pg-action-payment .fi-btn-label,
    .fi-ta-actions-cell .pg-action-payment button span:not(:has(svg)),
    .fi-ta-actions-cell .pg-action-payment a span:not(:has(svg)) {
        font-size: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Inject ₹ symbol after the hidden label */
    .fi-ta-actions-cell .pg-action-payment .fi-btn-label::after,
    .fi-ta-actions-cell .pg-action-payment button span:not(:has(svg))::after,
    .fi-ta-actions-cell .pg-action-payment a span:not(:has(svg))::after {
        content: "₹";
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        color: inherit !important;
    }
}
/* --- END SESSION 30 PART D --- */

/* ============================================================
   SESSION 30 — PART E: WhatsApp + PDF pill styling on desktop
   Applies to any resource table that has pg-action-whatsapp or
   pg-action-pdf tagged actions (Invoice, Quotation).
   Mobile label-hiding (Part D) is scoped to max-width 767px 
   so labels show naturally here — icon + text on desktop.
   ============================================================ */
@media (min-width: 768px) {

    /* WhatsApp — green pill */
    .fi-ta-actions-cell .pg-action-whatsapp,
    .fi-ta-actions-cell .pg-action-whatsapp button,
    .fi-ta-actions-cell .pg-action-whatsapp a {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        padding: 4px 10px !important;
        border-radius: 8px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        background: #F0FDF4 !important;
        color: #15803D !important;
        border: 1px solid #86EFAC !important;
        text-decoration: none !important;
        white-space: nowrap;
        cursor: pointer;
        transition: background 75ms ease, border-color 75ms ease;
    }
    .fi-ta-actions-cell .pg-action-whatsapp:hover,
    .fi-ta-actions-cell .pg-action-whatsapp button:hover,
    .fi-ta-actions-cell .pg-action-whatsapp a:hover {
        background: #DCFCE7 !important;
        border-color: #4ADE80 !important;
    }

    /* PDF — slate pill */
    .fi-ta-actions-cell .pg-action-pdf,
    .fi-ta-actions-cell .pg-action-pdf button,
    .fi-ta-actions-cell .pg-action-pdf a {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        padding: 4px 10px !important;
        border-radius: 8px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        background: #F8FAFC !important;
        color: #475569 !important;
        border: 1px solid #CBD5E1 !important;
        text-decoration: none !important;
        white-space: nowrap;
        cursor: pointer;
        transition: background 75ms ease, border-color 75ms ease;
    }
    .fi-ta-actions-cell .pg-action-pdf:hover,
    .fi-ta-actions-cell .pg-action-pdf button:hover,
    .fi-ta-actions-cell .pg-action-pdf a:hover {
        background: #F1F5F9 !important;
        border-color: #94A3B8 !important;
    }

    /* Icon size — same as mobile */
    .fi-ta-actions-cell .pg-action-whatsapp svg,
    .fi-ta-actions-cell .pg-action-pdf svg {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0;
    }
}
/* --- END SESSION 30 PART E --- */

/* ============================================================
   SESSION 30 — PART F: Brand icons + mobile label fix
   Replaces generic Heroicons with brand SVGs via CSS mask-image.
   Fixes Part D label hiding — fi-btn-label class not present in
   Filament 3.3 table action render; using span sibling selector.
   ============================================================ */

/* --- 1. Hide the existing Heroicon SVGs in WhatsApp and PDF buttons --- */
.fi-ta-actions-cell .pg-action-whatsapp svg,
.fi-ta-actions-cell .pg-action-pdf svg {
    display: none !important;
}

/* --- 2. WhatsApp brand icon via CSS mask-image --- */
/* Renders as filled shape using currentColor (inherits green from button) */
.fi-ta-actions-cell .pg-action-whatsapp::before,
.fi-ta-actions-cell .pg-action-whatsapp button::before,
.fi-ta-actions-cell .pg-action-whatsapp a::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.37 5.07L2 22l4.93-1.37C8.42 21.5 10.15 22 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm.06 14.8c-1.04 0-2.06-.28-2.96-.81l-.21-.12-2.2.58.59-2.13-.14-.22a5.94 5.94 0 01-.91-3.1c0-3.31 2.7-6 6.01-6s6 2.69 6 6-2.7 6-6.18 6zm3.3-4.48c-.18-.09-1.06-.52-1.22-.58-.17-.06-.28-.09-.4.09-.12.18-.46.58-.57.7-.1.12-.21.13-.39.04-.18-.09-.75-.28-1.43-.89-.53-.47-.88-1.06-.99-1.24-.1-.18 0-.27.08-.36l.26-.31c.09-.1.12-.18.18-.3.06-.12.03-.22-.01-.31-.05-.09-.4-.97-.55-1.33-.14-.35-.29-.3-.4-.3-.1 0-.22-.01-.34-.01-.12 0-.31.04-.47.22-.16.18-.63.61-.63 1.49 0 .88.64 1.73.73 1.85.09.12 1.26 1.93 3.06 2.7.43.18.76.29 1.02.38.43.14.82.12 1.13.07.34-.05 1.06-.43 1.21-.85.15-.42.15-.77.1-.85-.05-.07-.16-.12-.34-.21z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.37 5.07L2 22l4.93-1.37C8.42 21.5 10.15 22 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm.06 14.8c-1.04 0-2.06-.28-2.96-.81l-.21-.12-2.2.58.59-2.13-.14-.22a5.94 5.94 0 01-.91-3.1c0-3.31 2.7-6 6.01-6s6 2.69 6 6-2.7 6-6.18 6zm3.3-4.48c-.18-.09-1.06-.52-1.22-.58-.17-.06-.28-.09-.4.09-.12.18-.46.58-.57.7-.1.12-.21.13-.39.04-.18-.09-.75-.28-1.43-.89-.53-.47-.88-1.06-.99-1.24-.1-.18 0-.27.08-.36l.26-.31c.09-.1.12-.18.18-.3.06-.12.03-.22-.01-.31-.05-.09-.4-.97-.55-1.33-.14-.35-.29-.3-.4-.3-.1 0-.22-.01-.34-.01-.12 0-.31.04-.47.22-.16.18-.63.61-.63 1.49 0 .88.64 1.73.73 1.85.09.12 1.26 1.93 3.06 2.7.43.18.76.29 1.02.38.43.14.82.12 1.13.07.34-.05 1.06-.43 1.21-.85.15-.42.15-.77.1-.85-.05-.07-.16-.12-.34-.21z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}

/* --- 3. PDF document icon via CSS mask-image --- */
/* Clean document-with-fold shape. "PDF" label shows on desktop. */
.fi-ta-actions-cell .pg-action-pdf::before,
.fi-ta-actions-cell .pg-action-pdf button::before,
.fi-ta-actions-cell .pg-action-pdf a::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zm-1 1.5L18.5 9H13V3.5zM6 4h6v6h6v10H6V4zm2 9h8v1.5H8V13zm0 3h5v1.5H8V16z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zm-1 1.5L18.5 9H13V3.5zM6 4h6v6h6v10H6V4zm2 9h8v1.5H8V13zm0 3h5v1.5H8V16z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}

/* --- 4. Mobile: fix label hiding (span sibling combinator — more reliable
   than fi-btn-label which is absent in Filament 3.3 table action render) --- */
@media (max-width: 767px) {

    /* Hide the text label span for WhatsApp, PDF, and Record Payment.
       span ~ span targets any span that follows another span in the same
       parent — i.e. the label span after the icon wrapper span. */
    .fi-ta-actions-cell .pg-action-whatsapp span ~ span,
    .fi-ta-actions-cell .pg-action-whatsapp button span ~ span,
    .fi-ta-actions-cell .pg-action-whatsapp a span ~ span,
    .fi-ta-actions-cell .pg-action-pdf span ~ span,
    .fi-ta-actions-cell .pg-action-pdf button span ~ span,
    .fi-ta-actions-cell .pg-action-pdf a span ~ span,
    .fi-ta-actions-cell .pg-action-payment span ~ span,
    .fi-ta-actions-cell .pg-action-payment button span ~ span,
    .fi-ta-actions-cell .pg-action-payment a span ~ span {
        display: none !important;
    }

    /* ₹ symbol after the Record Payment icon (replaces the hidden label) */
    .fi-ta-actions-cell .pg-action-payment::after,
    .fi-ta-actions-cell .pg-action-payment button::after,
    .fi-ta-actions-cell .pg-action-payment a::after {
        content: "₹";
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        color: inherit;
    }
}
/* --- END SESSION 30 PART F --- */

/* ============================================================
   SESSION 30 — PART G: Provided brand SVGs + no-text labels
   Overrides Part F mask-image approach with background-image.
   SVG files served from /images/icons/ — no data URL encoding.
   ============================================================ */

/* --- Remove existing Heroicons in WhatsApp and PDF buttons --- */
/* (already set in Part F — kept here for clarity if Part F absent) */
.fi-ta-actions-cell .pg-action-whatsapp svg,
.fi-ta-actions-cell .pg-action-pdf svg {
    display: none !important;
}

/* --- WhatsApp: provided brand SVG via background-image --- */
.fi-ta-actions-cell .pg-action-whatsapp::before,
.fi-ta-actions-cell .pg-action-whatsapp button::before,
.fi-ta-actions-cell .pg-action-whatsapp a::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-image: url('/images/icons/whatsapp.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- PDF: provided document SVG via background-image --- */
.fi-ta-actions-cell .pg-action-pdf::before,
.fi-ta-actions-cell .pg-action-pdf button::before,
.fi-ta-actions-cell .pg-action-pdf a::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-image: url('/images/icons/pdf.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- PDF button: update colour theme to match red SVG --- */
.fi-ta-actions-cell .pg-action-pdf,
.fi-ta-actions-cell .pg-action-pdf button,
.fi-ta-actions-cell .pg-action-pdf a {
    color: #DC2626 !important;
    border-color: #FECACA !important;
    background: #FFF5F5 !important;
}
.fi-ta-actions-cell .pg-action-pdf:hover,
.fi-ta-actions-cell .pg-action-pdf button:hover,
.fi-ta-actions-cell .pg-action-pdf a:hover {
    background: #FEE2E2 !important;
    border-color: #FCA5A5 !important;
}

/* --- Hide ALL text labels for WhatsApp and PDF on every screen size ---
   span~span: targets the label span that follows the icon wrapper span.
   Applies on both mobile and desktop — icon only, no text. */
.fi-ta-actions-cell .pg-action-whatsapp span ~ span,
.fi-ta-actions-cell .pg-action-whatsapp button span ~ span,
.fi-ta-actions-cell .pg-action-whatsapp a span ~ span,
.fi-ta-actions-cell .pg-action-pdf span ~ span,
.fi-ta-actions-cell .pg-action-pdf button span ~ span,
.fi-ta-actions-cell .pg-action-pdf a span ~ span {
    display: none !important;
}

/* Mobile: also hide Record Payment label + inject ₹
   (overrides Part D which used fi-btn-label — that class is absent in
   Filament 3.3 table action HTML; span~span is reliable) */
@media (max-width: 767px) {
    .fi-ta-actions-cell .pg-action-payment span ~ span,
    .fi-ta-actions-cell .pg-action-payment button span ~ span,
    .fi-ta-actions-cell .pg-action-payment a span ~ span {
        display: none !important;
    }
    .fi-ta-actions-cell .pg-action-payment::after,
    .fi-ta-actions-cell .pg-action-payment button::after,
    .fi-ta-actions-cell .pg-action-payment a::after {
        content: "₹";
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        color: inherit;
    }
}
/* --- END SESSION 30 PART G --- */

/* ============================================================
   SESSION 30 — PART H: Text node label suppression
   span selectors and fi-btn-label fail because Filament 3.3
   table actions render the label as a plain text node, not a
   span. font-size: 0 suppresses text nodes AND spans.
   background-image icons (::before) are unaffected by font-size.
   ============================================================ */

/* Suppress all text in WhatsApp and PDF buttons — both screens */
.fi-ta-actions-cell .pg-action-whatsapp,
.fi-ta-actions-cell .pg-action-whatsapp button,
.fi-ta-actions-cell .pg-action-whatsapp a,
.fi-ta-actions-cell .pg-action-pdf,
.fi-ta-actions-cell .pg-action-pdf button,
.fi-ta-actions-cell .pg-action-pdf a {
    font-size: 0 !important;
}
/* --- END SESSION 30 PART H --- */

/* ============================================================
   SESSION 30 — PART I: Unified yellow background on action buttons
   Text and icon colours unchanged. Background and border unified.
   ============================================================ */
.fi-ta-actions-cell .pg-action-whatsapp,
.fi-ta-actions-cell .pg-action-whatsapp button,
.fi-ta-actions-cell .pg-action-whatsapp a,
.fi-ta-actions-cell .pg-action-pdf,
.fi-ta-actions-cell .pg-action-pdf button,
.fi-ta-actions-cell .pg-action-pdf a,
.fi-ta-actions-cell .pg-action-payment,
.fi-ta-actions-cell .pg-action-payment button,
.fi-ta-actions-cell .pg-action-payment a {
    background: #FFFBEB !important;
    border-color: #FCD34D !important;
}

.fi-ta-actions-cell .pg-action-whatsapp:hover,
.fi-ta-actions-cell .pg-action-whatsapp button:hover,
.fi-ta-actions-cell .pg-action-whatsapp a:hover,
.fi-ta-actions-cell .pg-action-pdf:hover,
.fi-ta-actions-cell .pg-action-pdf button:hover,
.fi-ta-actions-cell .pg-action-pdf a:hover,
.fi-ta-actions-cell .pg-action-payment:hover,
.fi-ta-actions-cell .pg-action-payment button:hover,
.fi-ta-actions-cell .pg-action-payment a:hover {
    background: #FEF3C7 !important;
    border-color: #FBBF24 !important;
}
/* --- END SESSION 30 PART I --- */

/* === S31-A DESKTOP TABLE BORDER REFINEMENT ======================== */
@media (min-width: 768px) {
  .fi-ta-table {
    border-collapse: collapse !important;
    border: none !important;
  }
  .fi-ta-table td.fi-ta-cell {
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: 1px solid #F1F5F9 !important;
  }
  .fi-ta-table th.fi-ta-header-cell {
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: 2px solid #E2E8F0 !important;
    background-color: #FAFAF9 !important;
  }
  .fi-ta-table tr.fi-ta-row:hover td.fi-ta-cell {
    background-color: #FFFBF8 !important;
  }
}

/* === S31-B DESKTOP HIDE REDUNDANT CUSTOMER COLUMN ================= */
/* Description row already shows Customer · Amount · Status.          */
/* Class added via extraAttributes / extraHeaderAttributes in PHP.    */
/* Has zero effect on mobile — fi-table-cell-customer\.name rule      */
/* in the card layout block continues to control mobile display.      */
@media (min-width: 768px) {
  /* Target both <th> and <td> directly via Filament auto-generated classes.
     extraAttributes adds class to child div, NOT the <td> itself.
     These selectors target the actual table cells. */
  .fi-table-header-cell-customer\.name,
  .fi-table-cell-customer\.name {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }
}

/* === S31-C MOBILE OVERFLOW ROOT FIX ================================ */
/* .fi-ta-wrap is already overflow-x:hidden (line 1741).               */
/* Root cause is .fi-main — no overflow constraint exists on it.       */
@media (max-width: 767px) {
  .fi-main {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* === S31-D MOBILE CARD LEFT BORDER CORNER CLIP ==================== */
/* .fi-ta-row has border-radius:12px but no overflow property.         */
/* The 3px left status border bleeds past the radius on horizontal     */
/* scroll. overflow:hidden clips it to the card boundary.              */
@media (max-width: 767px) {
  .fi-ta-table > tbody > tr.fi-ta-row {
    overflow: hidden !important;
  }
}

/* === S31-E TABLE UNBOXED (ALL SCREENS) + DESKTOP HORIZONTAL SCROLL */
/* fi-ta-ctn outer container removed on all screen sizes — all resources */
.fi-ta-ctn {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}
/* Horizontal scroll on desktop only — mobile overflow handled by S31-C */
@media (min-width: 768px) {
  .fi-ta-wrap {
    overflow-x: auto !important;
  }
}

/* === S31-F BODY CELL PADDING — ALL DESKTOP TABLES ================ */
/* Filament default body cells have p-0. Add consistent padding.     */
@media (min-width: 768px) {
  .fi-ta-table td.fi-ta-cell {
    padding: 10px 12px !important;
  }
}

/* === S31-G ACTION COLUMN GRID — CORRECT TARGETS ================== */
/* Grid on .fi-ta-actions (confirmed actual flex container)          */
/* pg-action-* on BUTTON/A direct children of .fi-ta-actions        */
/* pg-table-* added to .fi-ta by JS on livewire:initialized          */
@media (min-width: 768px) {

  /* INVOICE — 5 slots */
  .pg-table-invoices .fi-ta-actions {
    display: grid !important;
    grid-template-columns: 122px 66px 118px 62px 78px !important;
    gap: 4px !important; align-items: center !important;
  }
  .pg-table-invoices .pg-action-payment  { grid-column: 1 !important; }
  .pg-table-invoices .pg-action-pdf      { grid-column: 2 !important; }
  .pg-table-invoices .pg-action-whatsapp { grid-column: 3 !important; }
  .pg-table-invoices .pg-action-edit     { grid-column: 4 !important; }
  .pg-table-invoices .pg-action-delete   { grid-column: 5 !important; }

  /* QUOTATION — 6 slots */
  .pg-table-quotations .fi-ta-actions {
    display: grid !important;
    grid-template-columns: 132px 100px 66px 118px 62px 78px !important;
    gap: 4px !important; align-items: center !important;
  }
  .pg-table-quotations .pg-action-convert    { grid-column: 1 !important; }
  .pg-table-quotations .pg-action-approve    { grid-column: 2 !important; }
  .pg-table-quotations .pg-action-pdf        { grid-column: 3 !important; }
  .pg-table-quotations .pg-action-whatsapp   { grid-column: 4 !important; }
  .pg-table-quotations .pg-action-edit       { grid-column: 5 !important; }
  .pg-table-quotations .pg-action-delete     { grid-column: 6 !important; }

  /* SALES ORDER — 6 slots */
  .pg-table-salesorders .fi-ta-actions {
    display: grid !important;
    grid-template-columns: 138px 110px 112px 148px 62px 78px !important;
    gap: 4px !important; align-items: center !important;
  }
  .pg-table-salesorders .pg-action-generate  { grid-column: 1 !important; }
  .pg-table-salesorders .pg-action-markready { grid-column: 2 !important; }
  .pg-table-salesorders .pg-action-picking   { grid-column: 3 !important; }
  .pg-table-salesorders .pg-action-dc        { grid-column: 4 !important; }
  .pg-table-salesorders .pg-action-edit      { grid-column: 5 !important; }
  .pg-table-salesorders .pg-action-delete    { grid-column: 6 !important; }

  /* PURCHASE ORDER — 4 slots */
  .pg-table-purchaseorders .fi-ta-actions {
    display: grid !important;
    grid-template-columns: 128px 66px 62px 78px !important;
    gap: 4px !important; align-items: center !important;
  }
  .pg-table-purchaseorders .pg-action-receive { grid-column: 1 !important; }
  .pg-table-purchaseorders .pg-action-pdf     { grid-column: 2 !important; }
  .pg-table-purchaseorders .pg-action-edit    { grid-column: 3 !important; }
  .pg-table-purchaseorders .pg-action-delete  { grid-column: 4 !important; }

  /* CREDIT NOTE — 3 slots */
  .pg-table-creditnotes .fi-ta-actions {
    display: grid !important;
    grid-template-columns: 66px 62px 78px !important;
    gap: 4px !important; align-items: center !important;
  }
  .pg-table-creditnotes .pg-action-pdf    { grid-column: 1 !important; }
  .pg-table-creditnotes .pg-action-edit   { grid-column: 2 !important; }
  .pg-table-creditnotes .pg-action-delete { grid-column: 3 !important; }

  /* DEBIT NOTE — 1 slot */
  .pg-table-debitnotes .fi-ta-actions {
    display: grid !important;
    grid-template-columns: 62px !important;
    gap: 4px !important; align-items: center !important;
  }
  .pg-table-debitnotes .pg-action-view { grid-column: 1 !important; }

  /* CUSTOMER / SUPPLIER / PRODUCT — 2 slots */
  .pg-table-customers .fi-ta-actions,
  .pg-table-suppliers .fi-ta-actions,
  .pg-table-products .fi-ta-actions {
    display: grid !important;
    grid-template-columns: 62px 78px !important;
    gap: 4px !important; align-items: center !important;
  }
  .pg-table-customers .pg-action-edit,
  .pg-table-suppliers .pg-action-edit,
  .pg-table-products .pg-action-edit   { grid-column: 1 !important; }
  .pg-table-customers .pg-action-delete,
  .pg-table-suppliers .pg-action-delete,
  .pg-table-products .pg-action-delete { grid-column: 2 !important; }

  /* EXPENSE — 4 slots */
  .pg-table-expenses .fi-ta-actions {
    display: grid !important;
    grid-template-columns: 100px 88px 62px 78px !important;
    gap: 4px !important; align-items: center !important;
  }
  .pg-table-expenses .pg-action-approve { grid-column: 1 !important; }
  .pg-table-expenses .pg-action-reject  { grid-column: 2 !important; }
  .pg-table-expenses .pg-action-edit    { grid-column: 3 !important; }
  .pg-table-expenses .pg-action-delete  { grid-column: 4 !important; }

  /* SERVICE TICKET — 3 slots */
  .pg-table-servicetickets .fi-ta-actions {
    display: grid !important;
    grid-template-columns: 88px 62px 78px !important;
    gap: 4px !important; align-items: center !important;
  }
  .pg-table-servicetickets .pg-action-resolve { grid-column: 1 !important; }
  .pg-table-servicetickets .pg-action-edit    { grid-column: 2 !important; }
  .pg-table-servicetickets .pg-action-delete  { grid-column: 3 !important; }

  /* DELIVERY CHALLAN — 7 slots */
  .pg-table-deliverychallans .fi-ta-actions {
    display: grid !important;
    grid-template-columns: 66px 92px 132px 122px 142px 62px 78px !important;
    gap: 4px !important; align-items: center !important;
  }
  .pg-table-deliverychallans .pg-action-pdf      { grid-column: 1 !important; }
  .pg-table-deliverychallans .pg-action-ewb       { grid-column: 2 !important; }
  .pg-table-deliverychallans .pg-action-dispatch  { grid-column: 3 !important; }
  .pg-table-deliverychallans .pg-action-deliver   { grid-column: 4 !important; }
  .pg-table-deliverychallans .pg-action-convert   { grid-column: 5 !important; }
  .pg-table-deliverychallans .pg-action-edit      { grid-column: 6 !important; }
  .pg-table-deliverychallans .pg-action-delete    { grid-column: 7 !important; }

  /* STOCK TRANSFER — 5 slots */
  .pg-table-stocktransfers .fi-ta-actions {
    display: grid !important;
    grid-template-columns: 122px 120px 66px 88px 62px !important;
    gap: 4px !important; align-items: center !important;
  }
  .pg-table-stocktransfers .pg-action-transit   { grid-column: 1 !important; }
  .pg-table-stocktransfers .pg-action-received  { grid-column: 2 !important; }
  .pg-table-stocktransfers .pg-action-pdf       { grid-column: 3 !important; }
  .pg-table-stocktransfers .pg-action-cancel    { grid-column: 4 !important; }
  .pg-table-stocktransfers .pg-action-edit      { grid-column: 5 !important; }

  /* SALES RETURN / PURCHASE RETURN — 3 slots */
  .pg-table-salesreturns .fi-ta-actions,
  .pg-table-purchasereturns .fi-ta-actions {
    display: grid !important;
    grid-template-columns: 210px 62px 62px !important;
    gap: 4px !important; align-items: center !important;
  }
  .pg-table-salesreturns .pg-action-confirm,
  .pg-table-purchasereturns .pg-action-confirm { grid-column: 1 !important; }
  .pg-table-salesreturns .pg-action-edit,
  .pg-table-purchasereturns .pg-action-edit    { grid-column: 2 !important; }
  .pg-table-salesreturns .pg-action-view,
  .pg-table-purchasereturns .pg-action-view    { grid-column: 3 !important; }
}

/* === S31-H REPORT PAGES — MOBILE REVAMP ========================== */
@media (max-width: 767px) {

  /* Stat cards — force single column on mobile */
  /* Filament uses sm:grid-cols-2 which fires from 640px.            */
  /* Override to single column on all phone viewports.               */
  .fi-wi-stats-overview {
    grid-template-columns: 1fr !important;
  }
  .fi-wi-stats-overview > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Report tab buttons — prevent wrapping, allow horizontal scroll  */
  .pg-report-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
    gap: 6px !important;
    scrollbar-width: none !important;
  }
  .pg-report-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .pg-report-tabs button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* Report page tables — horizontal scroll on mobile */
  .fi-page table {
    min-width: 500px !important;
  }
  .fi-page .overflow-x-auto,
  .fi-page div:has(> table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}
/* === END S31-H === */