/* GRN Dash widget styles (card eXtzzu67 round 2).
 * Filament v4's dist CSS ships NO raw Tailwind utilities (fi-* classes only),
 * so custom widget markup styles itself with these gd-* classes, injected via
 * a HEAD_END render hook in AdminPanelProvider. Dark mode = .dark on <html>. */

.gd-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .gd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .gd-grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .gd-grid-5 { grid-template-columns: repeat(5, 1fr); } }

.gd-card {
    border-radius: 0.75rem;
    background: #f9fafb;
    border: 1px solid rgba(3, 7, 18, 0.08);
    padding: 1rem;
    min-width: 0;
}
.dark .gd-card { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
a.gd-card { display: block; text-decoration: none; transition: background-color 0.15s; }
a.gd-card:hover { background: #ecfdf5; }
.dark a.gd-card:hover { background: rgba(255, 255, 255, 0.1); }

.gd-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.gd-row-center { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.gd-title { font-size: 0.875rem; font-weight: 600; color: #030712; }
.gd-title-lg { font-size: 1rem; font-weight: 600; color: #030712; }
.dark .gd-title, .dark .gd-title-lg { color: #fff; }

.gd-text { font-size: 0.875rem; color: #4b5563; }
.dark .gd-text { color: #d1d5db; }
.gd-muted { font-size: 0.75rem; color: #6b7280; }
.dark .gd-muted { color: #9ca3af; }
.gd-faint { font-size: 0.75rem; color: #9ca3af; }
.dark .gd-faint { color: #6b7280; }

.gd-value {
    font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums; color: #030712; line-height: 2rem;
}
.dark .gd-value { color: #fff; }
.gd-value-sm { font-size: 1.125rem; line-height: 1.5rem; }
.gd-warn { color: #d97706 !important; }
.gd-bad  { color: #dc2626 !important; }
.gd-na   { color: #9ca3af !important; }
.dark .gd-warn { color: #fbbf24 !important; }
.dark .gd-bad  { color: #f87171 !important; }

.gd-bar { height: 6px; border-radius: 9999px; background: #e5e7eb; overflow: hidden; margin-top: 0.375rem; }
.dark .gd-bar { background: rgba(255, 255, 255, 0.1); }
.gd-bar > div { height: 100%; border-radius: 9999px; }
.gd-fill-ok   { background: #059669; }
.gd-fill-warn { background: #f59e0b; }
.gd-fill-bad  { background: #dc2626; }
.gd-fill-na   { background: #d1d5db; }
/* an estimate from run costs (card qIUYWau8): neutral where a reading would be
 * green, and hatched in every color so it never reads as a measurement */
.gd-fill-est  { background: #9ca3af; }
.gd-bar > div.gd-est {
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.45) 0 3px, transparent 3px 6px);
}

.gd-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1rem; }

.gd-stack { display: flex; flex-direction: column; gap: 0.75rem; }
.gd-mt-1 { margin-top: 0.25rem; }
.gd-mt-2 { margin-top: 0.5rem; }
.gd-mt-3 { margin-top: 0.75rem; }
.gd-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.gd-scroll { overflow-x: auto; }
.gd-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.gd-table th {
    text-align: left; font-size: 0.75rem; font-weight: 500; color: #6b7280;
    padding: 0 1rem 0.5rem 0; white-space: nowrap;
}
.dark .gd-table th { color: #9ca3af; }
.gd-table td { padding: 0.625rem 1rem 0.625rem 0; border-top: 1px solid #f3f4f6; vertical-align: top; }
.dark .gd-table td { border-top-color: rgba(255, 255, 255, 0.1); }
.gd-table th.num, .gd-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.gd-table td.gd-cell-strong { font-weight: 500; color: #030712; white-space: nowrap; }
.dark .gd-table td.gd-cell-strong { color: #fff; }

.gd-list { display: flex; flex-direction: column; }
.gd-list > * {
    display: flex; justify-content: space-between; align-items: center;
    gap: 0.75rem; padding: 0.625rem 0; border-top: 1px solid #f3f4f6;
}
.gd-list > *:first-child { border-top: 0; padding-top: 0; }
.dark .gd-list > * { border-top-color: rgba(255, 255, 255, 0.1); }

.gd-link { font-weight: 500; color: #059669; text-decoration: none; }
.gd-link:hover { text-decoration: underline; }
.dark .gd-link { color: #34d399; }

.gd-empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: 2rem 1rem; text-align: center; border-radius: 0.75rem;
    background: #f9fafb; border: 1px solid rgba(3, 7, 18, 0.08);
}
.dark .gd-empty { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
.gd-empty svg { width: 2rem; height: 2rem; color: #9ca3af; }

.gd-note {
    display: flex; align-items: center; gap: 0.75rem; border-radius: 0.75rem;
    padding: 1rem; background: #fffbeb; border: 1px solid rgba(217, 119, 6, 0.2);
    font-size: 0.875rem; color: #b45309;
}
.dark .gd-note { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3); color: #fbbf24; }
.gd-note svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }

/* page layouts (page blades can't use tailwind utilities either) */
/* minmax(0, 1fr): a grid item defaults to min-width:auto, so a wide table in a
   .gd-scroll stretched its section past a phone screen instead of scrolling */
.gd-page { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.gd-split { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1280px) { .gd-split { grid-template-columns: 1fr 2fr; } }

/* sortable headers (card https://trello.com/c/lzNSCWS7) — public/js/grn-dash-sort.js
   marks a header it has wired with data-gd-sort and the active one with aria-sort */
table[data-sortable] thead th[data-gd-sort] { cursor: pointer; user-select: none; }
table[data-sortable] thead th[data-gd-sort]::after { content: ' \2195'; font-size: 0.875em; opacity: 0; }
table[data-sortable] thead th[data-gd-sort]:hover::after,
table[data-sortable] thead th[data-gd-sort]:focus-visible::after { opacity: 0.5; }
table[data-sortable] thead th[aria-sort]::after { opacity: 1; }
table[data-sortable] thead th[aria-sort="ascending"]::after { content: ' \25B2'; }
table[data-sortable] thead th[aria-sort="descending"]::after { content: ' \25BC'; }
table[data-sortable] thead th[aria-sort] { color: #374151; }
.dark table[data-sortable] thead th[aria-sort] { color: #e5e7eb; }
table[data-sortable] thead th[data-gd-sort]:focus-visible { outline: 2px solid #10b981; outline-offset: -2px; }