/* Record cards of the Admin and Customer panels (Design templates, Designs, Mockups, Previews, Catalog, Base catalog).
   One airy card: a frame around a rounded picture, a quiet body, corner controls and a round
   selection mark that only shows when it is needed. It replaces the earlier tinted header and footer strips.
   Fulfillment shares the Admin cards. Colours come from the --workspace-* tokens of workspace.css. */

:root {
    --card-bg: var(--workspace-surface, #f7f8f2);
    --card-media: #eceee3;
    --card-line: rgba(15, 26, 20, .09);
    --card-line-strong: rgba(15, 26, 20, .18);
    --card-ink: var(--workspace-ink, #0f1a14);
    --card-muted: #5a665e;
    --card-accent: var(--workspace-accent, #2a6244);
    --card-shadow: 0 1px 2px rgba(15, 26, 20, .05), 0 14px 28px -22px rgba(15, 26, 20, .38);
    --card-shadow-hover: 0 2px 4px rgba(15, 26, 20, .06), 0 22px 38px -24px rgba(15, 26, 20, .5);
    --card-chip: rgba(15, 26, 20, .06);
}
html.dark {
    --card-bg: var(--workspace-surface, #192b20);
    --card-media: #121f17;
    --card-line: rgba(239, 240, 232, .1);
    --card-line-strong: rgba(239, 240, 232, .22);
    --card-ink: var(--workspace-ink, #eff0e8);
    --card-muted: #a9b8ad;
    --card-accent: var(--workspace-accent, #a2c9ae);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 28px -22px rgba(0, 0, 0, .7);
    --card-shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 22px 38px -24px rgba(0, 0, 0, .85);
    --card-chip: rgba(239, 240, 232, .08);
}

/* ── The card ─────────────────────────────────────────────────── */
html body .fi-ta-content-grid { gap: 1.5rem !important; }

html body .fi-ta-content-grid .fi-ta-record {
    position: relative !important;
    min-width: 0 !important;
    padding: .625rem !important;
    border: 1px solid var(--card-line) !important;
    border-radius: 1.125rem !important;
    background: var(--card-bg) !important;
    box-shadow: var(--card-shadow) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    overflow: visible !important;
    /* No transform, translate, filter or isolation on the card: any of them makes it the containing block (or a
       stacking context) of the actions menu, which Filament positions with position: fixed. The menu then jumped
       away when the card was hovered and hid under the next card. Hover feedback is border and shadow only. */
    isolation: auto !important; /* the older card rules in the panel provider set isolate */
    transition: box-shadow .18s ease, border-color .18s ease !important;
}
html body .fi-ta-content-grid .fi-ta-record:hover {
    border-color: var(--card-line-strong) !important;
    box-shadow: var(--card-shadow-hover) !important;
}
html body .fi-ta-content-grid .fi-ta-record:has(a:focus-visible, button:focus-visible) {
    outline: 2px solid var(--card-accent);
    outline-offset: 3px;
}
html body .fi-ta-content-grid .fi-ta-record:has(.fi-ta-record-checkbox:checked) {
    border-color: var(--card-accent) !important;
    box-shadow: 0 0 0 1px var(--card-accent), var(--card-shadow) !important;
}

/* Two rows: the picture, then the text. The old header strip is gone. */
html body .fi-ta-content-grid .fi-ta-record > .flex.items-center {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "media" "body" !important;
    grid-template-rows: auto 1fr !important;
    align-items: stretch !important;
    gap: 0 !important;
    height: 100% !important;
    padding: 0 !important;
}
html body .fi-ta-content-grid .fi-ta-record > .flex.items-center::before { content: none !important; display: none !important; }
html body .fi-ta-content-grid .fi-ta-record > .flex.items-center > .flex.w-full,
html body .fi-ta-content-grid .fi-ta-record > .flex.items-center > .flex.w-full > .flex-1,
html body .fi-ta-content-grid .fi-ta-record .block.w-full {
    display: contents !important;
    padding: 0 !important;
}

/* Filament wraps the picture and the text in several boxes (columns, the inner stack). They are flattened so the
   picture and the text become the two rows of the card, whichever resource builds the card. */
html body .fi-ta-content-grid .fi-ta-record > .flex.items-center *:has(.mg-card-cover):not(.mg-card-cover),
html body .fi-ta-content-grid .fi-ta-record > .flex.items-center *:has(> .mg-card-flag):not(.mg-card-flag),
html body .fi-ta-content-grid .fi-ta-record > .flex.items-center *:has([class~="p-4"][class~="gap-1"]):not([class~="p-4"]),
html body .fi-ta-content-grid .fi-ta-record > .flex.items-center *:has(.catalog-card-body):not(.catalog-card-body) {
    display: contents !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* ── The picture ──────────────────────────────────────────────── */
html body .mg-card-cover {
    grid-area: media !important;
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: .75rem !important;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .6), transparent 62%),
        var(--card-media) !important;
    box-shadow: inset 0 0 0 1px var(--card-line) !important;
}
html.dark body .mg-card-cover {
    background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .06), transparent 62%), var(--card-media) !important;
}
html body .mg-card-cover::before,
html body .mg-card-cover::after { content: none !important; display: none !important; }
html body .mg-card-cover-img { padding: 1rem !important; transition: transform .25s ease; }
html body .fi-ta-record:hover .mg-card-cover-img { transform: scale(1.025); }
html body .mg-card-cover-empty { color: var(--card-muted) !important; font-size: .8125rem !important; }

/* ── Selection mark: round, in the corner of the picture, shown when it is useful ── */
html body .fi-ta-content-grid .fi-ta-record > .flex.items-center > label:has(.fi-ta-record-checkbox) {
    grid-area: media !important;
    z-index: 3 !important;
    justify-self: start !important;
    align-self: start !important;
    display: grid !important;
    width: 1.875rem !important;
    height: 1.875rem !important;
    place-items: center !important;
    margin: .625rem !important;
    border: 1px solid var(--card-line-strong) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 2px 8px -2px rgba(15, 26, 20, .25) !important;
    opacity: 0;
    transform: scale(.88);
    transition: opacity .15s ease, transform .15s ease !important;
    cursor: pointer;
}
html.dark body .fi-ta-content-grid .fi-ta-record > .flex.items-center > label:has(.fi-ta-record-checkbox) { background: rgba(16, 28, 21, .92) !important; }
html body .fi-ta-content-grid .fi-ta-record:hover > .flex.items-center > label:has(.fi-ta-record-checkbox),
html body .fi-ta-content-grid .fi-ta-record:focus-within > .flex.items-center > label:has(.fi-ta-record-checkbox),
html body .fi-ta-content-grid .fi-ta-record > .flex.items-center > label:has(.fi-ta-record-checkbox:checked),
html body .fi-ta-content-grid:has(.fi-ta-record-checkbox:checked) .fi-ta-record > .flex.items-center > label:has(.fi-ta-record-checkbox) {
    opacity: 1;
    transform: none;
}
@media (hover: none) {
    html body .fi-ta-content-grid .fi-ta-record > .flex.items-center > label:has(.fi-ta-record-checkbox) { opacity: 1; transform: none; }
}
html body .fi-ta-content-grid .fi-ta-record-checkbox {
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 !important;
    border-radius: .3125rem !important;
    box-shadow: none !important;
    background-color: transparent !important;
    color: var(--card-accent) !important;
}

/* ── The text ─────────────────────────────────────────────────── */
html body .fi-ta-content-grid .fi-ta-record.fi-ta-record [class~="p-4"][class~="gap-1"],
html body .fi-ta-content-grid .fi-ta-record.fi-ta-record .catalog-card-body {
    grid-area: body !important;
    min-width: 0 !important;
    gap: .75rem !important;
    padding: .875rem .5rem .5rem !important;
    border: 0 !important;
    background: transparent !important;
}

html body .fi-ta-content-grid .fi-ta-record .fi-ta-text-item-label.font-semibold {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    overflow-wrap: anywhere;
    padding-right: 0 !important;
    color: var(--card-ink) !important;
    font-size: 1rem !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
    letter-spacing: -.01em;
}
html body .fi-ta-content-grid .fi-ta-record .fi-ta-text-item-label.text-xs { color: var(--card-muted) !important; font-size: .8125rem !important; }
html body .fi-ta-content-grid .fi-ta-record .fi-ta-split { gap: .75rem !important; }

/* A row that has nothing to show (a mark that does not apply to this card) takes no room. */
html body .fi-ta-content-grid .fi-ta-record [class~="col-[--col-span-default]"]:has(.fi-ta-text):not(:has(.fi-ta-text-item, .fi-badge, img, svg, button, .mg-card-cover)) { display: none !important; }

/* Side by side marks sit next to each other, the last one to the right; the last row rests at the bottom of the card. */
html body .fi-ta-content-grid .fi-ta-record .fi-ta-split { justify-content: flex-start; align-items: center !important; }
html body .fi-ta-content-grid .fi-ta-record .fi-ta-split > [class~="col-[--col-span-default]"],
html body .fi-ta-content-grid .fi-ta-record .fi-ta-split > a > [class~="col-[--col-span-default]"] { flex: 0 1 auto !important; width: auto !important; }
html body .fi-ta-content-grid .fi-ta-record .fi-ta-split > [class~="col-[--col-span-default]"]:last-child { margin-left: auto !important; }
html body .fi-ta-content-grid .fi-ta-record .fi-ta-split [class~="text-center"],
html body .fi-ta-content-grid .fi-ta-record .fi-ta-split [class~="justify-center"] { justify-content: flex-start !important; text-align: start !important; }
html body .fi-ta-content-grid .fi-ta-record.fi-ta-record [class~="p-4"][class~="gap-1"] > [class~="col-[--col-span-default]"]:last-child,
html body .fi-ta-content-grid .fi-ta-record.fi-ta-record [class~="p-4"][class~="gap-1"] > a:last-child > [class~="col-[--col-span-default]"]:last-child {
    margin-top: auto !important;
    padding-top: .75rem !important;
    border-top: 1px solid var(--card-line) !important;
}
html body .fi-ta-content-grid .fi-ta-record.fi-ta-record [class~="p-4"][class~="gap-1"] > a:last-child > [class~="col-[--col-span-default]"]:last-child > .fi-ta-split { padding-top: 0 !important; }

/* Rows keep their own height (Filament gives each one flex-1, which would pull the last row up) so the last row can rest at the bottom. */
html body .fi-ta-content-grid .fi-ta-record.fi-ta-record [class~="p-4"][class~="gap-1"] > [class~="col-[--col-span-default]"],
html body .fi-ta-content-grid .fi-ta-record.fi-ta-record [class~="p-4"][class~="gap-1"] > a > [class~="col-[--col-span-default]"] { flex: 0 0 auto !important; }

/* Cards that keep it short (class mg-card-flat): no bottom row with a hairline, the marks follow the title. */
html body .fi-ta-content-grid .fi-ta-record.fi-ta-record [class~="p-4"][class~="gap-1"].mg-card-flat > [class~="col-[--col-span-default]"]:last-child,
html body .fi-ta-content-grid .fi-ta-record.fi-ta-record [class~="p-4"][class~="gap-1"].mg-card-flat > a:last-child > [class~="col-[--col-span-default]"]:last-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}
html body .fi-ta-content-grid .fi-ta-record.fi-ta-record .mg-card-flat { gap: .5rem !important; padding-bottom: .625rem !important; }

/* Catalog cards: the status mark sits beside the title. */
html body .fi-ta-content-grid .fi-ta-record .catalog-card-heading { padding-right: 0; }
html body .fi-ta-content-grid .fi-ta-record .catalog-card-footer { padding-top: 0; }

/* Status marks: small, even pills with room around them. */
html body .fi-ta-content-grid .fi-ta-record .fi-badge {
    gap: .3125rem !important;
    padding: .1875rem .625rem !important;
    border-radius: 999px !important;
    font-size: .6875rem !important;
    font-weight: 650 !important;
    letter-spacing: .01em;
    box-shadow: none !important;
}

/* ── Corner actions: aligned with selection, outside the clipped picture ── */
html body .fi-ta-content-grid .fi-ta-record .fi-ta-actions {
    grid-area: media !important;
    z-index: 3 !important;
    justify-self: end !important;
    align-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    margin: .625rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
html body .fi-ta-content-grid .fi-ta-actions .fi-dropdown-trigger :is(.fi-btn, .fi-icon-btn) {
    width: 1.875rem !important;
    height: 1.875rem !important;
    min-width: 1.875rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--card-line-strong) !important;
    border-radius: .625rem !important;
    background: var(--card-bg) !important;
    color: var(--card-accent) !important;
    box-shadow: 0 2px 8px -2px rgba(15, 26, 20, .2) !important;
}
html body .fi-ta-content-grid .fi-ta-actions .fi-dropdown-trigger :is(.fi-btn, .fi-icon-btn):hover,
html body .fi-ta-content-grid .fi-ta-actions .fi-dropdown-trigger :is(.fi-btn, .fi-icon-btn):focus-visible {
    border-color: var(--card-line) !important;
    background: var(--card-chip) !important;
    color: var(--card-ink) !important;
}

@media (max-width: 640px) {
    html body .fi-ta-content-grid { gap: 1rem !important; }
    html body .fi-ta-content-grid .fi-ta-record { padding: .5rem !important; }
}
@media (prefers-reduced-motion: reduce) {
    html body .fi-ta-content-grid .fi-ta-record,
    html body .mg-card-cover-img { transition: none !important; }
    html body .fi-ta-record:hover .mg-card-cover-img { transform: none; }
}

/* ── The fact table under the title ───────────────────────────── */
/* Facts wrap with the card width, not the viewport width; keep complete status labels readable. */
html body .fi-ta-content-grid .fi-ta-record.fi-ta-record .mg-card-flat > [class~="col-[--col-span-default]"]:has(.mg-card-meta),
html body .fi-ta-content-grid .fi-ta-record.fi-ta-record .mg-card-flat > a > [class~="col-[--col-span-default]"]:has(.mg-card-meta) {
    margin-top: auto !important;
    padding-top: .125rem !important;
}
html body .mg-card-meta {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
    gap: .75rem;
    margin: 0;
    padding: .75rem 0 0;
    border-top: 1px solid var(--card-line);
}
html body .mg-card-meta__cell { min-width: 0; }
html body .mg-card-meta dt {
    margin: 0 0 .1875rem;
    color: var(--card-muted);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
}
html body .mg-card-meta dd {
    display: flex;
    align-items: center;
    gap: .375rem;
    min-width: 0;
    margin: 0;
    color: var(--card-ink);
    font-size: .8125rem;
    font-weight: 550;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}
html body .mg-card-meta dd > span,
html body .mg-card-meta__link { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
html body a.mg-card-meta__link { color: inherit; text-decoration: underline; text-decoration-color: var(--card-muted); text-underline-offset: .2em; }
html body a.mg-card-meta__link:hover { color: var(--card-accent); text-decoration-color: currentColor; }
html body a.mg-card-meta__link:focus-visible { outline: 2px solid var(--card-accent); outline-offset: 3px; border-radius: .125rem; }
html body .mg-dot { flex: none; width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; }
html body .mg-card-meta .mg-dot { align-self: flex-start; margin-top: .3rem; }
html body .mg-card-meta .mg-tone-ok .mg-dot { color: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
html body .mg-card-meta .mg-tone-warn .mg-dot { color: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, .18); }
html body .mg-card-meta .mg-tone-bad .mg-dot { color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .16); }
html body .mg-card-meta .mg-tone-off .mg-dot { color: #94a3a0; box-shadow: 0 0 0 3px rgba(148, 163, 160, .2); }
html body .mg-card-meta .mg-tone-off > span,
html body .mg-card-meta .mg-tone-off > a { color: var(--card-muted); }
html.dark body .mg-card-meta .mg-tone-ok .mg-dot { color: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .16); }
html.dark body .mg-card-meta .mg-tone-warn .mg-dot { color: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .16); }
html.dark body .mg-card-meta .mg-tone-bad .mg-dot { color: #f87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, .16); }

/* The working revision needs review: a prominent link on the corner of the picture. */
html body .mg-card-flag {
    position: absolute;
    top: .625rem;
    right: 3.125rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    max-width: calc(100% - 6.25rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .4375rem .75rem;
    border-radius: 999px;
    color: #422006;
    background: #fbbf24;
    box-shadow: 0 0 0 1px rgba(146, 64, 14, .55), 0 4px 14px rgba(0, 0, 0, .3);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    backdrop-filter: blur(6px);
}
html body a.mg-card-flag { cursor: pointer; text-decoration: none; }
html body a.mg-card-flag::after { content: '→'; font-size: .9375rem; line-height: 1; }
html body a.mg-card-flag:hover { text-decoration: underline; filter: brightness(1.08); }
html body a.mg-card-flag:focus-visible { outline: 2px solid var(--card-accent); outline-offset: 3px; }
html body .mg-card-flag[data-status="rejected"] { color:#991b1b; background:rgba(254,226,226,.96); box-shadow:0 0 0 1px rgba(239,68,68,.4); }
html.dark body .mg-card-flag[data-status="rejected"] { color:#fca5a5; background:rgba(69,10,10,.94); }
html.dark body .mg-card-flag { color: #422006; background: #fbbf24; box-shadow: 0 0 0 1px rgba(253, 230, 138, .65), 0 4px 14px rgba(0, 0, 0, .5); }

@media (max-width: 420px) {
    html body .mg-card-meta dd { gap: .3rem; font-size: .75rem; }
    html body .mg-card-meta dt { letter-spacing: .04em; }
}