/*
 * Panel chrome for Kompas.
 *
 * Filament ships a light palette that paints the page background var(--gray-50) and every piece
 * of chrome and every card var(--color-white). Page, sidebar, topbar and cards then sit at
 * almost the same lightness, separated only by a 5% ring, which reads flat. This file warms the
 * canvas and gives the surfaces a visible hairline so the cards float on it instead of melting
 * into it. Only backgrounds, borders and shadows change: no text colour, no brand colour, no
 * layout, no component structure.
 *
 * This project has no CSS build pipeline, so the rules below target Filament's own hook classes
 * directly and must match their specificity. Filament's dark variants are written
 * :where(.dark,.dark *), which contributes no specificity, so every dark rule here prefixes
 * html.dark to win.
 *
 * Load order matters as much as specificity. Filament's base layout renders @filamentStyles
 * before the panel theme, so a normally registered asset would arrive before app.css and lose
 * every equal-specificity fight. AppServiceProvider therefore registers this file as
 * loaded-on-request and links it from the STYLES_AFTER render hook. See the comment there.
 *
 * .fi-sidebar is deliberately absent: app.css makes it transparent from 64rem up, so on desktop
 * it already carries the canvas colour, and it is opaque white only as the mobile drawer, where
 * a sheet should be white.
 *
 * Published to public/css/app/kompas-theme.css by `php artisan filament:assets`.
 */

html.fi {
    --kompas-canvas: #f6f4f0;
    --kompas-surface: #ffffff;
    --kompas-surface-muted: #f6f4f0;
    --kompas-border: #e8e4dc;
    --kompas-shadow: 0 1px 2px rgba(30, 27, 22, 0.05);
}

html.fi.dark {
    --kompas-canvas: #131211;
    --kompas-surface: #1c1b19;
    --kompas-surface-muted: rgba(255, 255, 255, 0.04);
    --kompas-border: rgba(255, 255, 255, 0.08);
    --kompas-shadow: none;
}

/* The canvas everything else sits on. The desktop sidebar inherits this by being transparent. */
.fi-body {
    background-color: var(--kompas-canvas);
}

html.dark .fi-body {
    background-color: var(--kompas-canvas);
}

/*
 * A crisp line beats Filament's default drop shadow here: the topbar is flush against the
 * canvas, and a shadow on a warm background reads as a smudge.
 */
.fi-topbar {
    background-color: var(--kompas-surface);
    border-bottom: 1px solid var(--kompas-border);
    box-shadow: none;
}

html.dark .fi-topbar {
    background-color: var(--kompas-surface);
    border-bottom-color: var(--kompas-border);
}

/*
 * The raised surfaces. The hairline is drawn as the first shadow layer rather than as a border
 * so it hugs the existing border-radius and adds nothing to the box size.
 */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-tabs:not(.fi-contained) {
    background-color: var(--kompas-surface);
    box-shadow:
        0 0 0 1px var(--kompas-border),
        var(--kompas-shadow);
}

html.dark .fi-section:not(.fi-section-not-contained):not(.fi-aside),
html.dark .fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn,
html.dark .fi-wi-stats-overview-stat,
html.dark .fi-ta-ctn,
html.dark .fi-tabs:not(.fi-contained) {
    background-color: var(--kompas-surface);
    box-shadow: 0 0 0 1px var(--kompas-border);
}

/* Secondary sections are the recessed ones, so they take the canvas colour rather than white. */
.fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-secondary,
.fi-section:not(.fi-section-not-contained).fi-aside.fi-secondary > .fi-section-content-ctn {
    background-color: var(--kompas-surface-muted);
}

html.dark .fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-secondary,
html.dark .fi-section:not(.fi-section-not-contained).fi-aside.fi-secondary > .fi-section-content-ctn {
    background-color: var(--kompas-surface-muted);
}

/* ==========================================================================
 * Utility subset
 *
 * Filament v5 serves semantic fi-* classes only. Its compiled stylesheet carries the Tailwind
 * preflight but none of the utility classes, and this project has no build pipeline to generate
 * them, so `class="rounded-xl border bg-white"` in a Blade view styles nothing at all and fails
 * silently. Our own pages were written against those names, so rather than rewrite every view
 * this block defines the subset they use, in the panel's warm palette.
 *
 * tests/Unit/PanelUtilityClassesTest.php holds the two in step: a class used in a view and
 * missing here fails the gate. Add the rule here rather than reaching for a name Tailwind would
 * have had, and keep dark variants prefixed html.dark, which is where Filament puts the class.
 * ========================================================================== */

html.fi {
    --kompas-gray-50: #f6f4f0;
    --kompas-gray-100: #efece5;
    --kompas-gray-200: #e8e4dc;
    --kompas-gray-300: #d8d3c8;
    --kompas-gray-500: #8b847a;
    --kompas-gray-600: #706a62;
    --kompas-gray-700: #56514a;
    --kompas-gray-900: #23211e;

    --kompas-text: #23211e;
    --kompas-text-muted: #706a62;
    --kompas-input-bg: #ffffff;
    --kompas-input-border: #d8d3c8;
    --kompas-danger: #dc2626;
    --kompas-focus-border: #41a4b4;
    --kompas-focus-ring: rgba(65, 164, 180, 0.25);
    --kompas-warning-bg: #fdf6e7;
    --kompas-warning-border: #f2c86a;
    --kompas-warning-text: #78500c;
    --kompas-success: #16a34a;
    --kompas-link: #1d4ed8;
    --kompas-danger-bg: rgba(239, 68, 68, 0.1);
    --kompas-danger-text: #b91c1c;
    /* Translucent, so a band reads the same whether the row beneath it is plain or already banded. */
    --kompas-band-overlay: rgba(30, 27, 22, 0.035);
}

html.fi.dark {
    --kompas-gray-50: #171614;
    --kompas-gray-100: rgba(255, 255, 255, 0.07);
    --kompas-gray-200: rgba(255, 255, 255, 0.1);
    --kompas-gray-300: rgba(255, 255, 255, 0.14);
    --kompas-gray-500: #a09a90;
    --kompas-gray-600: #b5afa5;
    --kompas-gray-700: #c9c4ba;
    --kompas-gray-900: #f3f0ea;

    --kompas-text: #f3f0ea;
    --kompas-text-muted: #a09a90;
    --kompas-input-bg: #171614;
    --kompas-input-border: rgba(255, 255, 255, 0.14);
    --kompas-danger: #f87171;
    --kompas-warning-bg: rgba(69, 45, 5, 0.35);
    --kompas-warning-border: rgba(146, 97, 14, 0.55);
    --kompas-warning-text: #f7c968;
    --kompas-success: #4ade80;
    --kompas-link: #93c5fd;
    --kompas-danger-bg: rgba(239, 68, 68, 0.15);
    --kompas-danger-text: #fca5a5;
    --kompas-band-overlay: rgba(255, 255, 255, 0.04);
}

/* Layout */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-4 { gap: 1rem; }
.hidden { display: none; }
.relative { position: relative; }
.mx-auto { margin-inline: auto; }
.w-full { width: 100%; }
.max-w-7xl { max-width: 80rem; }
.max-h-96 { max-height: 24rem; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

@media (min-width: 48rem) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Spacing */
.p-5 { padding: 1.25rem; }
.px-2 { padding-inline: 0.5rem; }
.px-5 { padding-inline: 1.25rem; }
.py-2 { padding-block: 0.5rem; }
.py-4 { padding-block: 1rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pt-0 { padding-top: 0; }

/* Typography */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.025em; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }

/* Radii and shadows */
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(30, 27, 22, 0.05); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(30, 27, 22, 0.1), 0 4px 6px -4px rgba(30, 27, 22, 0.1); }

html.dark .shadow-sm,
html.dark .shadow-lg { box-shadow: none; }

/* Border widths. Colour utilities come after these so a later border-* wins on colour. */
.border { border-width: 1px; border-color: var(--kompas-border); }
.border-t { border-top-width: 1px; border-color: var(--kompas-border); }
.border-b { border-bottom-width: 1px; border-color: var(--kompas-border); }
.divide-y > * + * { border-top-width: 1px; border-color: var(--kompas-border); }

/* Surfaces */
.bg-white { background-color: var(--kompas-surface); }
.bg-gray-50 { background-color: var(--kompas-gray-50); }
.odd\:bg-white:nth-child(odd) { background-color: var(--kompas-surface); }
.even\:bg-gray-50\/60:nth-child(even) { background-color: color-mix(in srgb, var(--kompas-gray-50) 60%, transparent); }

html.dark .dark\:bg-gray-800 { background-color: #1c1b19; }
html.dark .dark\:bg-gray-900 { background-color: #171614; }
html.dark .dark\:bg-gray-950 { background-color: #131211; }
html.dark .dark\:odd\:bg-gray-950:nth-child(odd) { background-color: #131211; }
html.dark .dark\:even\:bg-gray-900\/40:nth-child(even) { background-color: rgba(23, 22, 20, 0.4); }

/* Text colours */
.text-gray-500 { color: var(--kompas-gray-500); }
.text-gray-600 { color: var(--kompas-gray-600); }
.text-gray-700 { color: var(--kompas-gray-700); }
.text-gray-900 { color: var(--kompas-gray-900); }
.hover\:text-gray-600:hover { color: var(--kompas-gray-600); }

html.dark .dark\:text-gray-100 { color: #f3f0ea; }
html.dark .dark\:text-gray-200 { color: #e2ded6; }
html.dark .dark\:text-gray-300 { color: #c9c4ba; }
html.dark .dark\:text-gray-400 { color: #a09a90; }
html.dark .dark\:hover\:text-gray-300:hover { color: #c9c4ba; }

/* Border colours */
.border-gray-100 { border-color: var(--kompas-gray-100); }
.border-gray-200 { border-color: var(--kompas-gray-200); }
.border-gray-300 { border-color: var(--kompas-gray-300); }
.divide-gray-100 > * + * { border-color: var(--kompas-gray-100); }

html.dark .dark\:border-gray-700 { border-color: rgba(255, 255, 255, 0.1); }
html.dark .dark\:border-gray-800 { border-color: rgba(255, 255, 255, 0.07); }
html.dark .dark\:divide-gray-800 > * + * { border-color: rgba(255, 255, 255, 0.07); }

/*
 * Accents. The dashboard tints each KPI card's border by metric and carries one amber notice
 * banner, so these are the only coloured utilities the views ask for.
 */
.border-amber-100 { border-color: #fdeecf; }
.border-amber-200 { border-color: #fbdca3; }
.border-blue-100 { border-color: #dbeafe; }
.border-cyan-100 { border-color: #cffafe; }
.border-emerald-100 { border-color: #d1fae5; }
.border-fuchsia-100 { border-color: #fae8ff; }
.border-teal-100 { border-color: #ccfbf1; }
.border-violet-100 { border-color: #ede9fe; }
.bg-amber-50 { background-color: #fdf6e7; }
.text-amber-800 { color: #92610e; }
.text-amber-900 { color: #78500c; }

html.dark .dark\:border-amber-900\/40 { border-color: rgba(146, 97, 14, 0.4); }
html.dark .dark\:border-blue-900\/40 { border-color: rgba(30, 64, 175, 0.4); }
html.dark .dark\:border-cyan-900\/40 { border-color: rgba(22, 78, 99, 0.4); }
html.dark .dark\:border-emerald-900\/40 { border-color: rgba(6, 78, 59, 0.4); }
html.dark .dark\:border-fuchsia-900\/40 { border-color: rgba(112, 26, 117, 0.4); }
html.dark .dark\:border-teal-900\/40 { border-color: rgba(19, 78, 74, 0.4); }
html.dark .dark\:border-violet-900\/40 { border-color: rgba(76, 29, 149, 0.4); }
html.dark .dark\:bg-amber-950\/30 { background-color: rgba(69, 45, 5, 0.3); }
html.dark .dark\:text-amber-200 { color: #fbdca3; }
html.dark .dark\:text-amber-300 { color: #f7c968; }


/* ==========================================================================
 * Shared page primitives
 *
 * The custom pages under resources/views/filament/pages are hand-built rather than assembled
 * from Filament components, and several of them need the same card, filter row and table. Those
 * rules live here with one definition each, so a change lands on every page at once and no two
 * <style> blocks can disagree about what .rd-panel means. Anything genuinely local to a single
 * page stays in that page's own block.
 *
 * tests/Unit/CustomPageStylingTest.php fails if a page starts styling one of these names again.
 * ========================================================================== */

.rd-panel {
    background: var(--kompas-surface);
    border: 1px solid var(--kompas-border);
    border-radius: 0.875rem;
    padding: 1rem;
    box-shadow: var(--kompas-shadow);
}

.rd-section-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--kompas-text);
    margin-bottom: 0.5rem;
}

.rd-section-subtitle {
    font-size: 0.8125rem;
    color: var(--kompas-text-muted);
}

.rd-filters-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
    .rd-filters-grid { grid-template-columns: 1fr; }
}

.rd-field-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--kompas-text-muted);
    margin-bottom: 0.375rem;
}

.rd-filter-control {
    width: 100%;
    min-height: 42px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--kompas-input-border);
    border-radius: 0.625rem;
    background: var(--kompas-input-bg);
    color: var(--kompas-text);
    font-size: 0.875rem;
    box-shadow: var(--kompas-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rd-filter-control:focus {
    outline: none;
    border-color: var(--kompas-focus-border);
    box-shadow: 0 0 0 3px var(--kompas-focus-ring);
}

/* The native select arrow does not follow the theme, so it is drawn from the text colour. */
select.rd-filter-control {
    appearance: none;
    padding-right: 2.125rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--kompas-text-muted) 50%),
        linear-gradient(135deg, var(--kompas-text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.rd-table-wrap {
    border: 1px solid var(--kompas-border);
    border-radius: 0.75rem;
    overflow: auto;
}

.rd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.rd-table th,
.rd-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--kompas-gray-100);
    text-align: left;
    vertical-align: top;
}

.rd-table th {
    background: var(--kompas-gray-50);
    font-weight: 600;
    color: var(--kompas-text-muted);
}

.rd-table th.num,
.rd-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rd-table tr.rd-total td {
    background: var(--kompas-gray-50);
    font-weight: 700;
}

.rd-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--kompas-text-muted);
}

/*
 * Zebra banding. Opt-in per row rather than :nth-child, because a table may interleave detail
 * rows that belong to the row above them (the import comparison does), and counting those flips
 * the parity halfway down. The Blade drives it from $loop so a row and its detail share a band.
 */
.rd-table > tbody > tr.rd-row-alt,
.rd-table > tbody > tr.rd-row-alt > td {
    background: var(--kompas-gray-50);
}

/* Negative money. Wins over the zebra and total rows it sits inside. */
.rd-neg {
    color: var(--kompas-danger) !important;
}

/* ==========================================================================
 * Table header wrapping
 *
 * Filament pins every header cell to `white-space: nowrap`, so a column is never narrower than
 * its label on one line. Dutch labels are long ("Dubbele EAN CE", "Twinfield gereed"), which
 * pushed overviews like PIM-producten into a horizontal scroll on an ordinary desktop even when
 * the data itself was narrow.
 *
 * Letting the label wrap costs a second header line and takes the width back. Body cells keep
 * their nowrap so rows stay one line high; a column that genuinely needs wrapped data still asks
 * for it per column with ->wrap().
 * ========================================================================== */

.fi-ta-header-cell:not(.fi-wrapped) {
    white-space: normal;
    text-wrap: balance;
}

/* The sort control is a flex row; let the label shrink so it can wrap instead of pushing out. */
.fi-ta-header-cell .fi-ta-header-cell-sort-btn > span {
    min-width: 0;
}