@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700;800&display=swap');

:root {
    --crud-page-bg: #F2D4AE;
    --crud-white: #ffffff;
    --crud-surface: rgba(255, 255, 255, 0.75);
    --crud-surface-strong: rgba(255, 255, 255, 0.95);
    --crud-surface-soft: rgba(255, 255, 255, 0.45);
    --crud-panel-bg: rgba(255, 255, 255, 0.85);
    --crud-panel-highlight: #ffffff;
    --crud-glass-border: rgba(255, 255, 255, 0.5);
    --crud-border: rgba(199, 150, 124, 0.26);
    --crud-border-strong: rgba(198, 142, 163, 0.38);
    --crud-ink: #1e2430;
    --crud-ink-soft: #4e5566;
    --crud-muted: #7a6f68;
    --crud-blue: #007aff;
    --crud-green: #2fa35e;
    --crud-red: #e23d45;
    --crud-amber: #e99827;
    --crud-pen-blue: #2157b8;
    --crud-input-bg: #BED9B2;
    --crud-input-hover: #BED9B2;
    --crud-input-border: rgba(248, 191, 211, 0.8);
    --crud-input-border-strong: rgba(245, 164, 194, 0.94);
    --crud-radius-2xl: 30px;
    --crud-radius-xl: 24px;
    --crud-radius-lg: 18px;
    --crud-radius-md: 14px;
    --crud-radius-sm: 12px;
    --crud-radius-pill: 999px;
    --crud-shadow-ambient: 0 22px 60px rgba(123, 78, 39, 0.14);
    --crud-shadow-card: 0 18px 38px rgba(141, 100, 60, 0.14), 0 3px 10px rgba(255, 255, 255, 0.5) inset;
    --crud-shadow-soft: 0 10px 24px rgba(125, 83, 44, 0.1), 0 1px 0 rgba(255, 255, 255, 0.78) inset;
    --crud-shadow-press: 0 12px 22px rgba(125, 83, 44, 0.16);
    --crud-font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

html,
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

.merchant-layout,
.super-admin-layout {
    font-family: var(--crud-font);
    color: var(--crud-ink);
    line-height: 1.5;
}

.merchant-layout {
    background-color: var(--crud-page-bg);
}

::selection {
    background: rgba(0, 122, 255, 0.18);
    color: var(--crud-ink);
}

.merchant-layout a,
.super-admin-layout a,
[class^="crud-"] a,
[class*=" crud-"] a,
a[class^="crud-"],
a[class*=" crud-"] {
    color: var(--crud-blue);
    text-decoration: none;
}

.merchant-layout a:hover,
.super-admin-layout a:hover,
[class^="crud-"] a:hover,
[class*=" crud-"] a:hover,
a[class^="crud-"]:hover,
a[class*=" crud-"]:hover {
    color: #0059bc;
}

h1,
h2,
h3,
h4,
h5,
h6,
.crud-title,
.crud-section-title,
.crud-table thead th,
.crud-stat-label,
.crud-stat__label {
    font-family: var(--crud-font);
}

h1,
h2,
h3,
h4,
.crud-title,
.crud-section-title {
    font-weight: 800;
    letter-spacing: -0.04em;
    margin: 0;
}

code {
    font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
    font-size: 0.92em;
}

.crud-shell {
    width: 100%;
    margin: 0;
    padding: 24px;
}

.crud-shell > * + * {
    margin-top: 24px;
}

.crud-backlink {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: #1e2430 !important;
    text-decoration: none;
    font-size: 0.98rem;
    line-height: 1.1;
    min-height: 42px;
    padding: 10px 16px 10px 12px;
    width: fit-content;
    max-width: 100%;
    border-radius: var(--crud-radius-pill);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 183, 3, 0.52);
    box-shadow: 0 10px 24px rgba(123, 78, 39, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    margin: 0 0 8px;
}

.crud-backlink::before {
    content: "\2190";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #ffb703;
    color: #111827;
    font-size: 1rem;
    font-weight: 900;
    flex: 0 0 auto;
}

.crud-backlink:hover {
    color: #111827 !important;
    background: #ffffff;
    border-color: #ffb703;
    box-shadow: 0 14px 30px rgba(123, 78, 39, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateX(-3px);
}

.crud-backlink:focus-visible {
    outline: 3px solid rgba(255, 183, 3, 0.42);
    outline-offset: 3px;
}

.crud-backlink + .crud-hero,
.crud-backlink + .crud-panel,
.crud-backlink + .crud-form-card {
    margin-top: 16px;
}

.crud-page-nav--bottom {
    display: flex;
    justify-content: flex-start;
    padding-top: 8px;
    margin-top: 32px;
    border-top: 1px solid rgba(255, 183, 3, 0.26);
}

.crud-page-nav--bottom .crud-backlink {
    margin-bottom: 0;
}

.crud-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px;
    width: fit-content;
    max-width: 100%;
    border-radius: var(--crud-radius-pill);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 183, 3, 0.28);
    box-shadow: 0 10px 24px rgba(123, 78, 39, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.crud-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--crud-radius-pill);
    background: transparent;
    color: #1e2430 !important;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 850;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.crud-tab-btn:hover {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(255, 183, 3, 0.34);
    color: #111827 !important;
}

.crud-tab-btn.is-active,
.crud-tab-btn.active {
    background: #ffb703;
    border-color: #ffb703;
    color: #111827 !important;
    box-shadow: 0 8px 18px rgba(255, 183, 3, 0.22);
}

.crud-tab-btn:focus-visible {
    outline: 3px solid rgba(255, 183, 3, 0.42);
    outline-offset: 3px;
}

/* Hardened Padding Hierarchy: Panels provide the gutter, children fill it */
.crud-panel .crud-table-wrap,
.crud-panel .crud-form,
.crud-panel .crud-stat-grid {
    padding: 0 !important;
    margin-top: 24px;
}

.crud-hero,
.crud-panel,
.crud-form-card,
.crud-stat-card,
.crud-stat,
.crud-learn__card,
.crud-table-wrap,
.crud-search-vault,
.crud-query-bar,
.crud-totals {
    position: relative;
    border: 1px solid var(--crud-glass-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 248, 240, 0.54)),
        var(--crud-panel-bg);
    border-radius: var(--crud-radius-xl);
    box-shadow: var(--crud-shadow-card);
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
}

.crud-hero::before,
.crud-panel::before,
.crud-form-card::before,
.crud-stat-card::before,
.crud-stat::before,
.crud-table-wrap::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.08));
    pointer-events: none;
}

.crud-hero::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
}

.crud-hero > *,
.crud-panel > *,
.crud-form-card > *,
.crud-stat-card > *,
.crud-stat > *,
.crud-table-wrap > * {
    position: relative;
    z-index: 1;
}

.crud-hero,
.crud-panel,
.crud-form-card {
    animation: crud-rise 0.45s ease both;
}

.crud-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: start;
    padding: 32px 36px;
    overflow: hidden;
    background: linear-gradient(135deg, #052c22, #114232);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

.crud-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
}

.crud-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: var(--crud-radius-pill);
    background: rgba(255, 255, 255, 0.11);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: none;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.crud-hero .crud-kicker {
    color: #ffffff;
    background: transparent;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
    border: none;
}

.crud-hero .crud-kicker::before {
    background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.2));
}

.crud-title {
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: 0.98;
    color: var(--crud-ink);
}

.crud-hero .crud-title {
    color: #ffffff;
}

.crud-subtitle {
    max-width: 68ch;
    margin-top: 14px;
    color: var(--crud-ink-soft);
    font-size: 0.98rem;
}

.crud-hero .crud-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

.crud-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: var(--crud-radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.72);
    color: var(--crud-ink);
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: var(--crud-shadow-soft);
}

.crud-hero .crud-pill {
    background: #fce4ec;
    border-color: #f8bbd0;
    color: #880e4f;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    font-weight: 800;
}

.crud-hero .crud-pill--info {
    color: #880e4f;
}



.crud-pill--info {
    color: var(--crud-blue);
}

.crud-button,
button.crud-button,
a.crud-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: var(--crud-radius-pill);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(243, 239, 234, 0.78));
    color: var(--crud-ink);
    font-family: var(--crud-font);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(132, 90, 51, 0.12), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
}

.crud-button:hover,
button.crud-button:hover,
a.crud-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 28px rgba(132, 90, 51, 0.16), 0 1px 0 rgba(255, 255, 255, 0.82) inset;
    filter: saturate(1.02);
}

.crud-button:active,
button.crud-button:active,
a.crud-button:active {
    transform: translateY(0);
    box-shadow: var(--crud-shadow-press);
}

.crud-button--primary {
    background: linear-gradient(180deg, #007aff, #0059bc) !important;
    border-color: rgba(0, 74, 157, 0.9) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3) !important;
}

.crud-button--success {
    background: linear-gradient(180deg, #2fa35e, #1a7a42) !important;
    border-color: rgba(22, 94, 52, 0.9) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(47, 163, 94, 0.3) !important;
}

.crud-button--danger {
    background: linear-gradient(180deg, #e23d45, #b91c1c) !important;
    border-color: rgba(153, 27, 27, 0.9) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(226, 61, 69, 0.3) !important;
}

.crud-button--ghost {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: var(--crud-glass-border) !important;
    color: var(--crud-ink) !important;
}

/* Table Layout hardening */
.crud-table { table-layout: auto; width: 100%; }
.crud-table td { 
    max-width: 400px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    font-size: clamp(0.75rem, 1.5vw, 0.9rem);
}
.crud-table .row-title {
    font-size: clamp(0.85rem, 2vw, 1rem);
    font-weight: 800;
}
.crud-table .row-meta {
    font-size: clamp(0.65rem, 1.2vw, 0.78rem);
}
.crud-table td.allow-wrap { white-space: normal; overflow: visible; }
.crud-table td.actions-cell { text-align: right; white-space: nowrap; max-width: none; }

.crud-panel,
.crud-form-card {
    padding: 24px;
    overflow: hidden;
}

/* Global Responsive Hardening */
@media (max-width: 1024px) {
    .crud-stat-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .crud-stat-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .crud-hero {
        padding: 40px 20px;
    }
    .crud-title {
        font-size: 2.2rem;
    }
    .crud-panel {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .crud-stat-grid {
        grid-template-columns: 1fr !important;
    }
    /* ── Sortable Headers ── */
.sortable-header {
    color: var(--crud-red) !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 800;
    font-size: clamp(0.65rem, 1.2vw, 0.85rem);
    text-transform: uppercase;
    transition: color 0.2s;
}
.sortable-header:hover { color: var(--crud-ink) !important; }
.sortable-header::after { content: "↕"; opacity: 0.5; }

/* ── Table Footers & Totals ── */
.crud-table tfoot td {
    padding: 16px 24px;
    border-top: 2px solid var(--crud-border);
    vertical-align: middle;
}
.total-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--crud-muted);
    text-transform: uppercase;
    line-height: 1.4;
}
.total-value {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--crud-ink);
}
.total-value--success { color: var(--crud-green); }
.total-value--blue { color: var(--crud-blue); }

.crud-table-wrap {
    width: 100%;
    overflow-x: auto;
    background: var(--crud-surface);
}
    .crud-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .crud-table th, .crud-table td {
        padding: 12px 10px;
    }
}

.crud-section-title {
    font-size: 1.1rem;
    color: var(--crud-ink);
}

.crud-form,
.crud-inline-form {
    display: grid;
    gap: 18px;
}

.crud-form__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 18px;
    align-items: start;
}

/* 12-Column Responsive Span Utilities for intelligent 1, 2, 3, or 4 grid columns */
.span-12 { grid-column: span 12 !important; }
.span-9 { grid-column: span 9 !important; }
.span-8 { grid-column: span 8 !important; }
.span-6 { grid-column: span 6 !important; }
.span-4 { grid-column: span 4 !important; }
.span-3 { grid-column: span 3 !important; }
.span-2 { grid-column: span 2 !important; }
.span-1 { grid-column: span 1 !important; }

.crud-form-row {
    display: grid;
    gap: 18px;
}

.crud-form-row.grid-1 {
    grid-template-columns: minmax(0, 1fr);
}

.crud-form-row.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crud-form-row.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crud-form-row.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.crud-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.crud-form__grid > .crud-field {
    grid-column: span 3;
}

.crud-form__grid > .crud-field--wide,
.crud-form__grid > .crud-field:has(textarea),
.crud-form__grid > .crud-field:has(input[name*="description" i]),
.crud-form__grid > .crud-field:has(input[name*="message" i]),
.crud-form__grid > .crud-field:has(input[name*="notes" i]),
.crud-form__grid > .crud-field:has(input[name*="address" i]) {
    grid-column: span 12;
}

.crud-form__grid > .crud-field:has(input[type="email"]),
.crud-form__grid > .crud-field:has(input[type="tel"]),
.crud-form__grid > .crud-field:has(input[name*="name" i]),
.crud-form__grid > .crud-field:has(select[name*="student" i]),
.crud-form__grid > .crud-field:has(select[name*="company" i]),
.crud-form__grid > .crud-field:has(select[name*="vendor" i]),
.crud-form__grid > .crud-field:has(select[name*="sponsor" i]) {
    grid-column: span 6;
}

.crud-form__grid > .crud-field:has(select[name*="program" i]),
.crud-form__grid > .crud-field:has(select[name*="status" i]),
.crud-form__grid > .crud-field:has(select[name*="type" i]),
.crud-form__grid > .crud-field:has(select[name*="method" i]),
.crud-form__grid > .crud-field:has(select[name*="category" i]),
.crud-form__grid > .crud-field:has(select[name*="account" i]),
.crud-form__grid > .crud-field:has(input[type="date"]),
.crud-form__grid > .crud-field:has(input[name*="code" i]),
.crud-form__grid > .crud-field:has(input[name*="amount" i]),
.crud-form__grid > .crud-field:has(input[name*="price" i]),
.crud-form__grid > .crud-field:has(input[name*="fee" i]),
.crud-form__grid > .crud-field:has(input[name*="cost" i]) {
    grid-column: span 3;
}

.crud-label,
.crud-field > span,
.crud-field label,
.crud-query-bar__search,
.pager-info,
.page-size-picker label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--crud-ink);
}

.crud-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.crud-input-icon {
    position: absolute;
    left: 12px;
    width: 17px;
    height: 17px;
    color: rgba(33, 87, 184, 0.74);
    pointer-events: none;
    z-index: 2;
}

.crud-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.crud-form__grid input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.crud-form select,
.crud-form__grid select,
.crud-form textarea,
.crud-form__grid textarea,
.crud-form-card input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.crud-form-card select,
.crud-form-card textarea,
.crud-input,
.crud-select,
.crud-query-bar__search input,
.crud-query-bar__select,
.crud-search-input,
.page-size-picker select {
    width: 100%;
    height: 38px !important;
    min-height: 38px !important;
    padding: 10px 12px 10px 38px !important;
    border: 1px solid rgba(248, 191, 211, 0.8) !important;
    border-radius: var(--crud-radius-md) !important;
    background-color: #BED9B2 !important;
    color: var(--crud-pen-blue) !important;
    font-family: var(--crud-font) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    caret-color: var(--crud-pen-blue) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.48), 0 8px 18px rgba(137, 97, 60, 0.04) !important;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background-color 0.16s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-repeat: no-repeat !important;
    background-position: 12px 50% !important;
    background-size: 16px 16px !important;
}

.crud-form textarea,
.crud-form__grid textarea,
.crud-form-card textarea,
textarea.crud-input {
    height: auto !important;
    min-height: 80px !important;
    padding: 10px 12px 10px 38px !important;
    background-position: 12px 12px !important;
    resize: vertical !important;
}

.crud-input--icon {
    padding-left: 40px;
}

.crud-input--pill {
    border-radius: var(--crud-radius-pill) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.crud-form input:hover:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.crud-form__grid input:hover:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.crud-form select:hover,
.crud-form__grid select:hover,
.crud-form textarea:hover,
.crud-form__grid textarea:hover,
.crud-form-card input:hover:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.crud-form-card select:hover,
.crud-form-card textarea:hover,
.crud-input:hover,
.crud-select:hover,
.crud-query-bar__search input:hover,
.crud-query-bar__select:hover,
.crud-search-input:hover,
.page-size-picker select:hover {
    background-color: #BED9B2 !important;
    border-color: rgba(245, 164, 194, 0.94) !important;
}

.crud-form input:focus:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.crud-form__grid input:focus:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.crud-form select:focus,
.crud-form__grid select:focus,
.crud-form textarea:focus,
.crud-form__grid textarea:focus,
.crud-form-card input:focus:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.crud-form-card select:focus,
.crud-form-card textarea:focus,
.crud-input:focus,
.crud-select:focus,
.crud-query-bar__search input:focus,
.crud-query-bar__select:focus,
.crud-search-input:focus,
.page-size-picker select:focus {
    outline: 0 !important;
    background-color: #BED9B2 !important;
    border-color: rgba(0, 122, 255, 0.6) !important;
    box-shadow:
        0 0 0 4px rgba(0, 122, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.52),
        0 12px 24px rgba(0, 122, 255, 0.08) !important;
    transform: translateY(-1px) !important;
}

/* Dynamic SVG Icons for fields matching name attributes */
input[name*="name" i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232157b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}
input[name*="company" i], input[name*="vendor" i], input[name*="legal" i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232157b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='10' width='20' height='12' rx='2'/%3E%3Cpath d='m12 2 8 4-8 4-8-4 8-4Z'/%3E%3C/svg%3E") !important;
}
input[name*="address" i], input[name*="country" i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232157b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") !important;
}
input[name*="registration" i], input[name*="tax" i], input[name*="vat" i], input[name*="code" i], input[name*="reference" i], input[name*="id" i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232157b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 8h10M7 12h10M7 16h6'/%3E%3C/svg%3E") !important;
}
input[name*="amount" i], input[name*="fee" i], input[name*="price" i], input[name*="cost" i], input[name*="balance" i], input[name*="total" i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232157b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'%3E%3C/line%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'%3E%3C/path%3E%3C/svg%3E") !important;
}
input[name*="date" i], input[type="date"], input[name*="period" i], input[name*="month" i], input[name*="day" i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232157b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M3 10h18'/%3E%3C/svg%3E") !important;
}
textarea {
    background-image: none !important;
}

/* Explicit Icon Positioning Safeguard for name-matched SVG backgrounds */
input[name*="name" i],
input[name*="company" i],
input[name*="vendor" i],
input[name*="legal" i],
input[name*="address" i],
input[name*="country" i],
input[name*="registration" i],
input[name*="tax" i],
input[name*="vat" i],
input[name*="code" i],
input[name*="reference" i],
input[name*="id" i],
input[name*="amount" i],
input[name*="fee" i],
input[name*="price" i],
input[name*="cost" i],
input[name*="balance" i],
input[name*="total" i],
input[name*="date" i],
input[type="date"],
input[name*="period" i],
input[name*="month" i],
input[name*="day" i] {
    background-repeat: no-repeat !important;
    background-position: 12px 50% !important;
    background-size: 16px 16px !important;
    padding-left: 38px !important;
}

.crud-form input::placeholder,
.crud-form__grid input::placeholder,
.crud-form textarea::placeholder,
.crud-form__grid textarea::placeholder,
.crud-form-card input::placeholder,
.crud-form-card textarea::placeholder,
.crud-search-input::placeholder,
.crud-query-bar__search input::placeholder {
    color: rgba(33, 87, 184, 0.58);
}

.crud-form select,
.crud-form__grid select,
.crud-form-card select,
.crud-query-bar__select,
.page-size-picker select {
    padding-right: 36px !important;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(33, 87, 184, 0.72) 50%),
        linear-gradient(135deg, rgba(33, 87, 184, 0.72) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px) !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
}

.crud-query-bar__search,
.crud-search-vault {
    position: relative;
}

.crud-query-bar__search input,
.crud-search-input {
    min-height: 44px;
    padding-left: 42px;
}

.crud-query-bar__search::before,
.crud-search-vault::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
    opacity: 0.7;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232157b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}

.crud-search-vault {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 10px;
    flex: 1;
}

.crud-search-vault > svg {
    display: none;
}

.crud-form input[type="email"]:not(.crud-input--icon),
.crud-form__grid input[type="email"]:not(.crud-input--icon),
.crud-form-card input[type="email"]:not(.crud-input--icon) {
    padding-left: 40px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232157b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
    background-repeat: no-repeat, no-repeat;
    background-position: 12px 50%, 0 0;
    background-size: 16px 16px, auto;
}

.crud-form input[type="tel"]:not(.crud-input--icon),
.crud-form__grid input[type="tel"]:not(.crud-input--icon),
.crud-form-card input[type="tel"]:not(.crud-input--icon) {
    padding-left: 40px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232157b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 11.2 19a19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7l.5 2a2 2 0 0 1-.5 1.9L8 9a16 16 0 0 0 7 7l1.4-1.1a2 2 0 0 1 1.9-.5l2 .5a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
    background-repeat: no-repeat, no-repeat;
    background-position: 12px 50%, 0 0;
    background-size: 16px 16px, auto;
}

.crud-form input[type="date"]:not(.crud-input--icon),
.crud-form__grid input[type="date"]:not(.crud-input--icon),
.crud-form-card input[type="date"]:not(.crud-input--icon) {
    padding-left: 40px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232157b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M3 10h18'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
    background-repeat: no-repeat, no-repeat;
    background-position: 12px 50%, 0 0;
    background-size: 16px 16px, auto;
}

.crud-form input[name*="amount" i]:not(.crud-input--icon),
.crud-form input[name*="price" i]:not(.crud-input--icon),
.crud-form input[name*="fee" i]:not(.crud-input--icon),
.crud-form input[name*="cost" i]:not(.crud-input--icon),
.crud-form__grid input[name*="amount" i]:not(.crud-input--icon),
.crud-form__grid input[name*="price" i]:not(.crud-input--icon),
.crud-form__grid input[name*="fee" i]:not(.crud-input--icon),
.crud-form__grid input[name*="cost" i]:not(.crud-input--icon),
.crud-form-card input[name*="amount" i]:not(.crud-input--icon),
.crud-form-card input[name*="price" i]:not(.crud-input--icon),
.crud-form-card input[name*="fee" i]:not(.crud-input--icon),
.crud-form-card input[name*="cost" i]:not(.crud-input--icon) {
    padding-left: 40px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232157b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M17 6H9.6a3.6 3.6 0 1 0 0 7.2h4.8a3.6 3.6 0 0 1 0 7.2H6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
    background-repeat: no-repeat, no-repeat;
    background-position: 12px 50%, 0 0;
    background-size: 16px 16px, auto;
}

.currency-input,
.is-currency,
.currency-field,
.crud-money,
.crud-form input[name*="amount" i],
.crud-form__grid input[name*="amount" i],
.crud-form input[name*="price" i],
.crud-form__grid input[name*="price" i],
.crud-form input[name*="fee" i],
.crud-form__grid input[name*="fee" i],
.crud-form input[name*="cost" i],
.crud-form__grid input[name*="cost" i],
.crud-form input[name*="total" i],
.crud-form__grid input[name*="total" i],
.crud-form input[name*="balance" i],
.crud-form__grid input[name*="balance" i],
.crud-form input[name*="quantity" i],
.crud-form__grid input[name*="quantity" i],
.crud-form input[name*="stock" i],
.crud-form__grid input[name*="stock" i],
.crud-form input[name*="level" i],
.crud-form__grid input[name*="level" i],
.crud-form input[name*="order" i],
.crud-form__grid input[name*="order" i],
.crud-form-card input[name*="amount" i],
.crud-form-card input[name*="price" i],
.crud-form-card input[name*="fee" i],
.crud-form-card input[name*="cost" i],
.crud-form-card input[name*="total" i],
.crud-form-card input[name*="balance" i],
.crud-form-card input[name*="quantity" i],
.crud-form-card input[name*="stock" i],
.crud-form-card input[name*="level" i],
.crud-form-card input[name*="order" i],
.crud-stat-value,
.crud-stat__value {
    text-align: right !important;
    font-variant-numeric: tabular-nums lining-nums;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    color: var(--crud-ink);
}

.currency-input:focus {
    color: var(--crud-brand);
}

th.crud-money,
td.crud-money,
.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.crud-table th.crud-money {
    padding-right: 24px;
}

.crud-form__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 6px;
}

.crud-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
}

.crud-stats-row,
.crud-stat-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

.crud-stat-card,
.crud-stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    min-height: 132px;
    padding: 20px 22px;
    container-type: inline-size;
}

.crud-stat-label,
.crud-stat__label {
    display: block;
    color: var(--crud-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.crud-stat-value,
.crud-stat__value {
    display: block;
    width: 100%;
    color: var(--crud-ink);
    font-size: clamp(0.75rem, 10cqw, 2.45rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.crud-stat__meta {
    display: block;
    margin-top: 2px;
    color: var(--crud-ink-soft);
    font-size: 0.72rem;
    text-align: right;
    font-weight: 500;
}

.crud-stat--blue,
.stat-card--blue {
    background: linear-gradient(180deg, rgba(229, 241, 255, 0.92), rgba(255, 255, 255, 0.62));
}

.crud-stat--green,
.stat-card--green {
    background: linear-gradient(180deg, rgba(228, 247, 236, 0.92), rgba(255, 255, 255, 0.62));
}

.crud-stat--amber,
.crud-stat--warning,
.stat-card--amber {
    background: linear-gradient(180deg, rgba(255, 242, 218, 0.94), rgba(255, 255, 255, 0.62));
}

.crud-stat--danger,
.stat-card--danger {
    background: linear-gradient(180deg, rgba(255, 231, 231, 0.94), rgba(255, 255, 255, 0.62));
}

.crud-stat--gold,
.stat-card--gold {
    background: linear-gradient(180deg, #FFD700, #FFC107) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

.crud-stat--gold .crud-stat__label,
.crud-stat--gold .crud-stat-label,
.stat-card--gold .crud-stat-label {
    color: rgba(0, 0, 0, 0.55) !important;
}

.crud-stat--gold .crud-stat__value,
.crud-stat--gold .crud-stat-value,
.stat-card--gold .crud-stat-value {
    color: #1e2430 !important;
}

.crud-query-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
    padding: 16px;
    margin-bottom: 0;
    overflow-x: auto; /* Fallback for very small screens */
}

.crud-query-bar__search,
.crud-search-vault {
    flex: 1 1 460px;
    min-width: 320px;
}

.crud-query-bar__select,
.crud-query-bar > select,
.crud-query-bar__reset,
.crud-query-bar > button {
    flex: 0 0 auto;
    width: auto !important;
}

.crud-query-bar__select,
.crud-query-bar > select {
    min-width: 140px !important;
    max-width: 220px;
}

.crud-query-bar__reset,
.crud-query-bar > button {
    max-width: max-content;
}

.crud-query-bar__search {
    position: relative;
    display: flex;
    align-items: center;
}

.crud-query-bar__hint {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 24px;
    padding: 0 10px;
    border-radius: var(--crud-radius-pill);
    background: rgba(255, 255, 255, 0.68);
    color: var(--crud-blue);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(123, 87, 52, 0.08);
}

.crud-query-bar__reset {
    min-height: 40px;
    padding: 8px 18px;
    border: none;
    border-radius: var(--crud-radius-pill);
    background: #a30000;
    color: #ffffff;
    font-family: var(--crud-font);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(163, 0, 0, 0.2);
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.crud-query-bar__reset:hover {
    transform: translateY(-1px);
    background: #800000;
    box-shadow: 0 6px 16px rgba(163, 0, 0, 0.25);
}

/* System-wide query controls: searches get the room, filters stay compact. */
.crud-query-bar,
.crud-filters,
.crud-filter-bar,
.crud-search-filter-row,
.admin-main form:has(input[type="search"]),
.super-admin-layout form:has(input[type="search"]),
.crud-panel form:has(input[type="search"]),
.crud-shell form:has(input[type="search"]) {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

.crud-query-bar__search,
.crud-search-vault,
.crud-search-wrap,
.crud-query-bar > label:has(input[type="search"]),
.crud-query-bar > .crud-input-wrap:has(input[type="search"]),
.crud-query-bar > input[type="search"],
.crud-filters > label:has(input[type="search"]),
.crud-filters > .crud-input-wrap:has(input[type="search"]),
.crud-filters > input[type="search"],
.crud-filter-bar > label:has(input[type="search"]),
.crud-filter-bar > .crud-input-wrap:has(input[type="search"]),
.crud-filter-bar > input[type="search"],
.crud-search-filter-row > label:has(input[type="search"]),
.crud-search-filter-row > .crud-input-wrap:has(input[type="search"]),
.crud-search-filter-row > input[type="search"],
.admin-main form:has(input[type="search"]) > label:has(input[type="search"]),
.admin-main form:has(input[type="search"]) > div:has(> input[type="search"]),
.admin-main form:has(input[type="search"]) > input[type="search"],
.super-admin-layout form:has(input[type="search"]) > label:has(input[type="search"]),
.super-admin-layout form:has(input[type="search"]) > div:has(> input[type="search"]),
.super-admin-layout form:has(input[type="search"]) > input[type="search"],
.crud-panel form:has(input[type="search"]) > label:has(input[type="search"]),
.crud-panel form:has(input[type="search"]) > .crud-input-wrap:has(input[type="search"]),
.crud-panel form:has(input[type="search"]) > input[type="search"],
.crud-shell form:has(input[type="search"]) > label:has(input[type="search"]),
.crud-shell form:has(input[type="search"]) > .crud-input-wrap:has(input[type="search"]),
.crud-shell form:has(input[type="search"]) > input[type="search"] {
    flex: 999 1 min(760px, 58vw) !important;
    width: auto !important;
    min-width: min(100%, 420px) !important;
    max-width: none !important;
}

.crud-query-bar input[type="search"],
.crud-filters input[type="search"],
.crud-filter-bar input[type="search"],
.crud-search-filter-row input[type="search"],
.admin-main form:has(input[type="search"]) input[type="search"],
.super-admin-layout form:has(input[type="search"]) input[type="search"],
.crud-panel form:has(input[type="search"]) input[type="search"],
.crud-shell form:has(input[type="search"]) input[type="search"] {
    width: 100% !important;
    min-width: 0 !important;
}

.crud-query-bar__select,
.crud-query-bar > select,
.crud-query-bar > label:has(select),
.crud-query-bar > .crud-input-wrap:has(select),
.crud-query-bar > input[type="date"],
.crud-query-bar > input[type="month"],
.crud-query-bar > input[type="number"],
.crud-query-bar > input[data-role="filter"],
.crud-filters > select,
.crud-filters > label:has(select),
.crud-filters > .crud-input-wrap:has(select),
.crud-filters > input[type="date"],
.crud-filters > input[type="month"],
.crud-filters > input[type="number"],
.crud-filters > input[data-role="filter"],
.crud-filter-bar > select,
.crud-filter-bar > label:has(select),
.crud-filter-bar > .crud-input-wrap:has(select),
.crud-filter-bar > input[type="date"],
.crud-filter-bar > input[type="month"],
.crud-filter-bar > input[type="number"],
.crud-filter-bar > input[data-role="filter"],
.crud-search-filter-row > select,
.crud-search-filter-row > label:has(select),
.crud-search-filter-row > .crud-input-wrap:has(select),
.crud-search-filter-row > input[type="date"],
.crud-search-filter-row > input[type="month"],
.crud-search-filter-row > input[type="number"],
.crud-search-filter-row > input[data-role="filter"],
.admin-main form:has(input[type="search"]) > select,
.admin-main form:has(input[type="search"]) > label:has(select),
.admin-main form:has(input[type="search"]) > input[type="date"],
.admin-main form:has(input[type="search"]) > input[type="month"],
.admin-main form:has(input[type="search"]) > input[type="number"],
.admin-main form:has(input[type="search"]) > input[data-role="filter"],
.super-admin-layout form:has(input[type="search"]) > select,
.super-admin-layout form:has(input[type="search"]) > label:has(select),
.super-admin-layout form:has(input[type="search"]) > input[type="date"],
.super-admin-layout form:has(input[type="search"]) > input[type="month"],
.super-admin-layout form:has(input[type="search"]) > input[type="number"],
.super-admin-layout form:has(input[type="search"]) > input[data-role="filter"],
.crud-panel form:has(input[type="search"]) > select,
.crud-panel form:has(input[type="search"]) > label:has(select),
.crud-panel form:has(input[type="search"]) > .crud-input-wrap:has(select),
.crud-panel form:has(input[type="search"]) > input[type="date"],
.crud-panel form:has(input[type="search"]) > input[type="month"],
.crud-panel form:has(input[type="search"]) > input[type="number"],
.crud-panel form:has(input[type="search"]) > input[data-role="filter"],
.crud-shell form:has(input[type="search"]) > select,
.crud-shell form:has(input[type="search"]) > label:has(select),
.crud-shell form:has(input[type="search"]) > .crud-input-wrap:has(select),
.crud-shell form:has(input[type="search"]) > input[type="date"],
.crud-shell form:has(input[type="search"]) > input[type="month"],
.crud-shell form:has(input[type="search"]) > input[type="number"],
.crud-shell form:has(input[type="search"]) > input[data-role="filter"] {
    flex: 0 0 clamp(132px, 12vw, 190px) !important;
    width: clamp(132px, 12vw, 190px) !important;
    min-width: 132px !important;
    max-width: 190px !important;
}

.crud-query-bar > button,
.crud-query-bar__reset,
.crud-filters > button,
.crud-filter-bar > button,
.crud-search-filter-row > button,
.admin-main form:has(input[type="search"]) > button,
.super-admin-layout form:has(input[type="search"]) > button,
.crud-panel form:has(input[type="search"]) > button,
.crud-shell form:has(input[type="search"]) > button,
.crud-query-bar > a.crud-button,
.crud-filters > a.crud-button,
.crud-filter-bar > a.crud-button,
.crud-search-filter-row > a.crud-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: max-content !important;
}

.crud-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    margin-bottom: 16px;
}

.crud-totals__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: var(--crud-radius-pill);
    background: rgba(255, 255, 255, 0.72);
    color: var(--crud-ink-soft);
    font-size: 0.76rem;
    font-weight: 700;
    box-shadow: 0 10px 18px rgba(123, 87, 52, 0.08);
}

.crud-totals__chip b {
    color: var(--crud-ink);
    font-weight: 800;
}

.crud-totals__chip--grand {
    color: #0b61c2;
}

.crud-totals__chip--filter {
    color: #0d8c55;
}

.crud-totals__chip--page {
    color: #b46811;
}

.crud-table-wrap {
    overflow-x: auto;
    padding: 0 24px 20px;
}

/* Paging on top/bottom padding standard */
.crud-panel > [style*="border-bottom"] {
    padding: 14px 24px !important;
}

.crud-table-wrap[data-role="table-wrap"].is-loading {
    opacity: 0.62;
    transition: opacity 0.18s ease;
}

.crud-table {
    width: max-content;
    min-width: 100%;
    margin-top: 14px;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
    background: transparent;
}

.crud-table--compact {
    width: max-content;
    min-width: 100%;
}

.crud-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--crud-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid rgba(205, 157, 129, 0.22);
    border-right: 1px solid rgba(244, 143, 177, 0.35); /* Increased visibility for vertical line */
    text-align: left !important;
}

.crud-table thead th:last-child {
    border-right: none;
}

.crud-table tbody td,
.crud-table tfoot td {
    padding: 8px 12px;
    color: var(--crud-ink-soft);
    font-size: 0.8rem;
    font-weight: 500;
    vertical-align: middle;
    border-bottom: 1px solid rgba(244, 143, 177, 0.45); /* Increased visibility for horizontal border */
    border-right: 1px solid rgba(244, 143, 177, 0.35); /* Increased visibility for vertical line */
    white-space: nowrap;
}

.crud-table tbody td:last-child,
.crud-table tfoot td:last-child {
    border-right: none;
}

.crud-table tbody tr {
    background: rgba(255, 255, 255, 0.22);
    transition: transform 0.16s ease, background-color 0.16s ease;
}

.crud-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.44);
}

.crud-table tbody tr:last-child td {
    border-bottom: 0;
}

.crud-table tfoot tr td {
    background: rgba(255, 255, 255, 0.45);
    border-top: 2px solid #f48fb1; /* Pink accounting top border */
    border-bottom: 4px double #f06292; /* Double strip at the bottom */
    color: var(--crud-ink);
    font-weight: 800;
    padding: 16px 12px;
}

.crud-table tfoot .total-label {
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--crud-muted);
}

.crud-table a {
    color: #2157b8;
}

.crud-table .text-right,
.crud-table td.text-right,
.crud-table th.text-right {
    text-align: right !important;
}

.crud-col-hash,
.crud-row-num {
    width: 44px;
    color: var(--crud-muted);
    font-weight: 800;
    text-align: center;
}

.crud-col-actions {
    width: 88px;
    text-align: right;
}

.crud-row-title {
    display: block;
    color: var(--crud-ink);
    font-weight: 800;
}

.crud-row-meta {
    margin-top: 3px;
    color: var(--crud-muted);
    font-size: 0.72rem;
    line-height: 1.3;
}

.crud-code {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--crud-radius-pill);
    background: rgba(255, 255, 255, 0.7);
    color: var(--crud-ink);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.crud-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: var(--crud-radius-pill);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.crud-badge--neutral {
    background: rgba(255, 255, 255, 0.74);
    color: var(--crud-ink-soft);
}

.crud-badge--success {
    background: linear-gradient(180deg, #3ac774, #269b58);
    color: #f8fff8;
}

.crud-badge--warning {
    background: linear-gradient(180deg, #ffbf52, #e99827);
    color: #fffaf0;
}

.crud-badge--danger {
    background: linear-gradient(180deg, #ef656b, #df3f49);
    color: #fff8f8;
}

.crud-badge--blue {
    background: linear-gradient(180deg, #46a3ff, #007aff);
    color: #f5fbff;
}

.is-sortable {
    cursor: pointer;
    user-select: none;
}

.is-sortable:hover {
    color: var(--crud-blue);
}

.is-sortable.is-sorted {
    color: var(--crud-ink);
}

.is-sortable svg {
    width: 18px;
    height: 18px;
    margin-left: 8px;
    vertical-align: middle;
    opacity: 0.55;
    stroke-width: 2.5;
    transition: all 0.2s ease;
}

.is-sortable:hover svg,
.is-sortable.is-sorted svg {
    opacity: 1;
    color: var(--crud-blue);
    transform: translateY(-1px);
}

.sort-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    margin-left: 6px;
    color: var(--crud-blue);
    font-size: 0.78rem;
    font-weight: 800;
}

.crud-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.crud-actions form {
    display: inline-flex;
    margin: 0;
}

.crud-icon-btn,
.crud-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--crud-muted);
    text-decoration: none;
}

.crud-icon-btn svg,
.crud-action-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
    transition: transform 0.2s;
}

.crud-icon-btn:hover,
.crud-action-icon:hover {
    background: #F4F4F6;
    transform: translateY(-1px);
}

.crud-icon-btn--view:hover,
.icon-view:hover {
    background: rgba(16, 185, 129, 0.08);
    color: var(--crud-green);
}

.crud-icon-btn--edit:hover,
.icon-edit:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--crud-blue);
}

.crud-icon-btn--delete:hover,
.icon-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--crud-red);
}

.crud-icon-btn--view svg { color: var(--crud-green); }
.crud-icon-btn--edit svg { color: var(--crud-blue); }
.crud-icon-btn--delete svg { color: var(--crud-red); }

.crud-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--crud-glass-border);
    border-radius: var(--crud-radius-xl);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 247, 237, 0.56));
    box-shadow: var(--crud-shadow-soft);
}

.pager-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.pager-info {
    color: var(--crud-ink-soft);
    font-size: 0.84rem;
}

.pager-info strong {
    color: var(--crud-ink);
}

.pager-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.pager-spacer {
    color: var(--crud-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.crud-page-capsule {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 244, 238, 0.82));
    color: var(--crud-ink-soft);
    font-family: var(--crud-font);
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(123, 87, 52, 0.08);
    transition: transform 0.16s ease, box-shadow 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.crud-page-capsule:hover:not(:disabled) {
    transform: translateY(-1px);
    color: var(--crud-ink);
    box-shadow: 0 16px 24px rgba(123, 87, 52, 0.12);
}

.crud-page-capsule.is-active {
    background: linear-gradient(180deg, #2d97ff, #007aff);
    color: #f8fbff;
    border-color: rgba(0, 122, 255, 0.7);
}

.crud-page-capsule:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    box-shadow: none;
}

.crud-learn {
    grid-column: 1 / -1;
    margin-top: 4px;
    width: 100%;
}

.crud-learn__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--crud-font);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}

.crud-learn__trigger:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
    transform: none;
    box-shadow: none;
}

.crud-learn .crud-learn__label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.crud-learn__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 800;
    margin-right: 2px;
}

.crud-learn__chev {
    width: 16px;
    height: 16px;
    opacity: 0.8;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.crud-learn__body {
    display: none;
    width: 100%;
    overflow: hidden;
}

.crud-learn.is-open .crud-learn__body {
    display: block;
    margin-top: 16px;
    animation: crud-learn-fade 0.35s ease-out;
}

@keyframes crud-learn-fade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.crud-learn__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 24px;
}

.crud-learn.is-open .crud-learn__chev {
    transform: rotate(180deg);
}

.crud-learn__section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.crud-learn__section-title {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

.crud-learn__section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.crud-learn__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.crud-learn__card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

.crud-learn__card:hover {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.crud-learn__card h4 {
    margin: 0 0 12px 0;
    color: #1e293b;
    font-size: 1.05rem;
    font-weight: 700;
}

.crud-learn__card p {
    margin: 0;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.6;
}

.crud-learn__journal {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9rem;
}

.crud-learn__journal-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

.crud-learn__journal-row:last-of-type {
    border-bottom: none;
}

.crud-learn__journal-row--credit {
    padding-left: 28px;
}

.crud-learn__journal-label {
    color: #64748b;
}

.crud-learn__journal-value {
    font-weight: 700;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}

.crud-learn__journal-total {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    color: #0f172a;
}

.crud-learn__best-practices {
    display: grid;
    gap: 12px;
}

.crud-learn__practice {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

.crud-learn__practice-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 900;
}

.crud-learn__practice--do .crud-learn__practice-icon {
    background: #dcfce7;
    color: #166534;
}

.crud-learn__practice--dont .crud-learn__practice-icon {
    background: #fee2e2;
    color: #991b1b;
}

.crud-learn__practice-text {
    font-size: 0.92rem;
    color: #334155;
    line-height: 1.5;
}

.crud-learn__reporting {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.crud-learn__report-pill {
    padding: 8px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}




.p-24 {
    padding: 24px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.text-right {
    text-align: right !important;
}

@keyframes crud-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1280px) {
    .crud-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .crud-hero__actions {
        justify-content: flex-start;
    }

    .crud-stats-row,
    .crud-stat-grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crud-query-bar {
        /* Preserve one-row layout */
        flex-wrap: nowrap;
    }
}

@media (max-width: 960px) {
    .crud-shell {
        padding: 18px;
    }

    .crud-panel,
    .crud-form-card,
    .crud-hero,
    .crud-table-wrap {
        border-radius: 20px;
    }

    .crud-form__grid,
    .crud-form-row.grid-4,
    .crud-form-row.grid-3 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .crud-form__grid > .crud-field,
    .crud-form__grid > .crud-field:has(select[name*="program" i]),
    .crud-form__grid > .crud-field:has(select[name*="status" i]),
    .crud-form__grid > .crud-field:has(select[name*="type" i]),
    .crud-form__grid > .crud-field:has(select[name*="method" i]),
    .crud-form__grid > .crud-field:has(select[name*="category" i]),
    .crud-form__grid > .crud-field:has(select[name*="account" i]),
    .crud-form__grid > .crud-field:has(input[type="date"]),
    .crud-form__grid > .crud-field:has(input[name*="code" i]),
    .crud-form__grid > .crud-field:has(input[name*="amount" i]),
    .crud-form__grid > .crud-field:has(input[name*="price" i]),
    .crud-form__grid > .crud-field:has(input[name*="fee" i]),
    .crud-form__grid > .crud-field:has(input[name*="cost" i]) {
        grid-column: span 3;
    }

    .crud-form__grid > .crud-field:has(input[type="email"]),
    .crud-form__grid > .crud-field:has(input[type="tel"]),
    .crud-form__grid > .crud-field:has(input[name*="name" i]),
    .crud-form__grid > .crud-field:has(select[name*="student" i]),
    .crud-form__grid > .crud-field:has(select[name*="company" i]),
    .crud-form__grid > .crud-field:has(select[name*="vendor" i]),
    .crud-form__grid > .crud-field:has(select[name*="sponsor" i]) {
        grid-column: span 6;
    }

    .crud-query-bar {
        flex-wrap: nowrap;
    }

    .crud-learn__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crud-pagination {
        align-items: flex-start;
    }
}

@media (max-width: 720px) {
    .crud-shell {
        padding: 14px;
    }

    .crud-panel,
    .crud-form-card,
    .crud-hero {
        padding: 18px;
    }

    .crud-query-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .crud-stats-row,
    .crud-stat-grid,
    .crud-form__grid,
    .crud-form-row,
    .crud-form-row.grid-2,
    .crud-form-row.grid-3,
    .crud-form-row.grid-4,
    .crud-learn__cards {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: row;
    }

    .crud-form__grid > .crud-field,
    .crud-form__grid > .crud-field:has(input[type="email"]),
    .crud-form__grid > .crud-field:has(input[type="tel"]),
    .crud-form__grid > .crud-field:has(input[name*="name" i]),
    .crud-form__grid > .crud-field:has(select[name*="student" i]),
    .crud-form__grid > .crud-field:has(select[name*="company" i]),
    .crud-form__grid > .crud-field:has(select[name*="vendor" i]),
    .crud-form__grid > .crud-field:has(select[name*="sponsor" i]),
    .crud-form__grid > .crud-field:has(select[name*="program" i]),
    .crud-form__grid > .crud-field:has(select[name*="status" i]),
    .crud-form__grid > .crud-field:has(select[name*="type" i]),
    .crud-form__grid > .crud-field:has(select[name*="method" i]),
    .crud-form__grid > .crud-field:has(select[name*="category" i]),
    .crud-form__grid > .crud-field:has(select[name*="account" i]),
    .crud-form__grid > .crud-field:has(input[type="date"]),
    .crud-form__grid > .crud-field:has(input[name*="code" i]),
    .crud-form__grid > .crud-field:has(input[name*="amount" i]),
    .crud-form__grid > .crud-field:has(input[name*="price" i]),
    .crud-form__grid > .crud-field:has(input[name*="fee" i]),
    .crud-form__grid > .crud-field:has(input[name*="cost" i]),
    .crud-form__grid > .crud-field--wide,
    .crud-form__grid > .crud-field:has(textarea),
    .crud-form__grid > .crud-field:has(input[name*="description" i]),
    .crud-form__grid > .crud-field:has(input[name*="message" i]),
    .crud-form__grid > .crud-field:has(input[name*="notes" i]),
    .crud-form__grid > .crud-field:has(input[name*="address" i]) {
        grid-column: 1 / -1;
    }

    .crud-totals,
    .crud-pagination,
    .pager-meta,
    .pager-nav,
    .crud-form__footer,
    .crud-hero__actions {
        justify-content: flex-start;
    }

    .crud-table-wrap {
        padding: 0 14px 14px;
    }

    .crud-table thead th,
    .crud-table tbody td,
    .crud-table tfoot td {
        padding: 6px;
    }
}

/* Dowlo-aligned hero and form system. Tables, filters, pagination, stats and actions remain untouched. */
.crud-shell .crud-hero {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px;
    padding: 48px;
    margin-bottom: 32px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background:
        radial-gradient(circle at bottom right, rgba(19, 92, 168, 0.12), transparent 38%),
        radial-gradient(circle at bottom left, rgba(183, 121, 18, 0.14), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.82));
    box-shadow:
        0 18px 48px rgba(24, 37, 59, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

/* Super Admin Dark Blue Override */
.super-admin-layout .crud-hero {
    background: linear-gradient(135deg, #0a192f, #0d3263, #114b8c) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

.super-admin-layout .crud-hero .crud-title {
    color: #ffffff !important;
}

.super-admin-layout .crud-hero .crud-subtitle {
    color: rgba(255, 255, 255, 0.7) !important;
}

.super-admin-layout .crud-hero .crud-kicker {
    color: #38bdf8 !important; /* Brighter blue for the kicker */
}

/* Merchant/Tenant Side Forest Green Override */
body:not(.super-admin-layout) .crud-hero,
.merchant-layout .crud-hero {
    background: linear-gradient(135deg, #064e3b, #047857, #059669) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

body:not(.super-admin-layout) .crud-hero .crud-title,
.merchant-layout .crud-hero .crud-title {
    color: #ffffff !important;
}

body:not(.super-admin-layout) .crud-hero .crud-subtitle,
.merchant-layout .crud-hero .crud-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
}

body:not(.super-admin-layout) .crud-hero .crud-kicker,
.merchant-layout .crud-hero .crud-kicker {
    color: #a7f3d0 !important; /* Mint green kicker */
}

body:not(.super-admin-layout) .crud-hero .crud-learn__trigger,
.merchant-layout .crud-hero .crud-learn__trigger {
    color: rgba(255, 255, 255, 0.9) !important;
}

body:not(.super-admin-layout) .crud-hero .crud-learn__trigger svg,
.merchant-layout .crud-hero .crud-learn__trigger svg {
    stroke: rgba(255, 255, 255, 0.9) !important;
}

body:not(.super-admin-layout) .crud-hero .crud-button--ghost,
.merchant-layout .crud-hero .crud-button--ghost {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
}

body:not(.super-admin-layout) .crud-hero .crud-button--ghost:hover,
.merchant-layout .crud-hero .crud-button--ghost:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

body:not(.super-admin-layout) .crud-hero .crud-button--primary,
.merchant-layout .crud-hero .crud-button--primary {
    background: linear-gradient(180deg, #f59e0b, #d97706) !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3) !important;
}

body:not(.super-admin-layout) .crud-hero .crud-button--primary:hover,
.merchant-layout .crud-hero .crud-button--primary:hover {
    background: linear-gradient(180deg, #d97706, #b45309) !important;
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.45) !important;
}

body:not(.super-admin-layout) .crud-hero .crud-pill--info,
body:not(.super-admin-layout) .crud-hero .crud-pill,
.merchant-layout .crud-hero .crud-pill--info,
.merchant-layout .crud-hero .crud-pill {
    background: linear-gradient(135deg, #fbbf24, #d97706) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25) !important;
}

.crud-shell .crud-hero::before {
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.38), transparent 42%);
}

.crud-hero > div:first-child {
    width: 100%;
}

.crud-hero__actions {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-self: flex-end !important;
    justify-self: end !important;
    gap: 16px;
    width: auto;
    margin-top: 12px;
    margin-bottom: 6px;
}

.crud-kicker {
    gap: 10px;
    margin-bottom: 16px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #135ca8;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: none;
}

.crud-kicker::before {
    content: "";
    width: 46px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(19, 92, 168, 1), rgba(183, 121, 18, 0.85));
}

.crud-title {
    font-size: clamp(2.3rem, 4vw, 3.8rem);
    line-height: 1.1;
    padding-top: 6px;
    letter-spacing: -0.06em;
    font-weight: 800;
    color: #18253b;
}

.crud-subtitle {
    max-width: 68ch;
    margin: 14px 0 0;
    color: #536279;
    font-size: 0.98rem;
    line-height: 1.65;
}

.crud-form-card,
.crud-panel:has(> .crud-form) {
    padding: 24px;
    margin-bottom: 24px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.64);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.36)),
        var(--crud-page-bg);
    box-shadow: 0 16px 34px rgba(98, 62, 19, 0.08);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.crud-form-card:last-of-type,
.crud-panel:has(> .crud-form):last-of-type {
    margin-bottom: 0;
}

.crud-form,
.crud-form-card form {
    display: grid;
    gap: 18px;
}

.crud-form__grid {
    gap: 20px;
}

.crud-form-card .crud-form-row,
.crud-form .crud-form-row {
    gap: 20px;
}

.crud-field {
    position: relative;
    gap: 8px;
}

.crud-label,
.crud-field > span,
.crud-field label:not(:has(input)):not(:has(select)):not(:has(textarea)) {
    color: #6f7d95;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.crud-field__hint,
.crud-field small,
.crud-form-card small {
    margin: 0;
    color: #6f7d95;
    font-size: 0.84rem;
    line-height: 1.5;
}

.crud-input-wrap {
    position: relative;
}

.crud-input-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 16px;
    height: 16px;
    color: rgba(24, 37, 59, 0.55);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.18s ease;
}

.crud-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.crud-form select,
.crud-form textarea,
.crud-form-card input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.crud-form-card select,
.crud-form-card textarea {
    min-height: 44px;
    padding: 10px 14px;
    border: 2px solid rgba(255, 182, 193, 0.8);
    border-radius: 14px;
    background-color: #BED9B2;
    color: var(--crud-pen-blue);
    font-family: var(--crud-font);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.25;
    caret-color: var(--crud-pen-blue);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 8px 18px rgba(24, 37, 59, 0.06);
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.crud-form input:hover:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.crud-form select:hover,
.crud-form textarea:hover,
.crud-form-card input:hover:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.crud-form-card select:hover,
.crud-form-card textarea:hover {
    background-color: #BED9B2;
}

.crud-form input:focus:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.crud-form select:focus,
.crud-form textarea:focus,
.crud-form-card input:focus:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.crud-form-card select:focus,
.crud-form-card textarea:focus {
    outline: none;
    border-color: rgba(19, 92, 168, 0.36);
    background-color: #BED9B2;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 0 0 4px rgba(19, 92, 168, 0.1),
        0 14px 24px rgba(24, 37, 59, 0.1);
    transform: translateY(-1px);
}

.crud-form input::placeholder,
.crud-form textarea::placeholder,
.crud-form-card input::placeholder,
.crud-form-card textarea::placeholder {
    color: rgba(33, 87, 184, 0.58);
}

.crud-input--icon,
.crud-input-wrap .crud-input,
.crud-input-wrap .crud-select {
    padding-left: 40px !important;
}

.crud-form textarea,
.crud-form-card textarea {
    min-height: 110px;
    resize: vertical;
}

.crud-form select,
.crud-form-card select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2318253b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.crud-form-card .crud-grid:not(:last-child),
.crud-form-card .crud-field:not(:last-child),
.crud-panel:has(> .crud-form) .crud-field:not(:last-child) {
    margin-bottom: 16px;
}

.crud-section__title,
.crud-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    color: #18253b;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

@media (max-width: 1080px) {
    .crud-shell .crud-hero {
        padding: 40px;
    }
}

@media (max-width: 860px) {
    .crud-shell .crud-hero {
        padding: 28px;
        border-radius: 28px;
    }

    .crud-hero__actions {
        align-self: stretch !important;
        justify-content: flex-start;
    }
}

/* --- REAL-LIFE DOCUMENTS (Invoices/Receipts) --- */

.crud-document-wrap {
    display: flex;
    justify-content: center;
    padding: 15px 15px;
    background: #F4F4F6;
    min-height: 100vh;
    border-radius: var(--crud-radius-xl);
}

.crud-document {
    position: relative;
    width: 100%;
    max-width: 840px; /* A4-ish proportional width */
    background: #FFFFFF;
    padding: 30px 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border-radius: var(--crud-radius-xl);
    color: #111827;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overflow: hidden;
}

.crud-document__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    border-bottom: 2px solid #F3F4F6;
    padding-bottom: 15px;
}

.crud-document__logo img {
    height: 100px;
    max-width: 250px;
    object-fit: contain;
}

.crud-document__school-info {
    text-align: right;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #4B5563;
}

.crud-document__school-info strong {
    display: block;
    font-size: 1.1rem;
    color: #111827;
    margin-bottom: 4px;
}

.crud-document__meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.crud-document__.total-label {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--crud-muted);
    margin-bottom: 2px;
}

.crud-money div {
    font-family: var(--crud-font);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

.crud-row-title,
.row-title {
    font-family: var(--crud-font-display);
    font-size: 1.1rem;
    color: var(--crud-blue);
    font-weight: 600;
    margin-top: 4px;
}

/* Financial Ratios report */
.ratio-report {
    max-width: 1560px;
    margin-inline: auto;
}

.ratio-report .crud-hero {
    border-radius: 26px;
}


/* ==========================================================================
   FINANCIAL RATIOS REPORT — ULTIMATE PREMIUM v4
   ========================================================================== */

@keyframes ratioFadeIn {
    from { opacity: 0; transform: translateY(40px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shimmer {
    0%   { left: -100%; }
    100% { left: 200%; }
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.4); }
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0); }
    33%      { transform: translate(8px, -12px); }
    66%      { transform: translate(-6px, 6px); }
}

/* Section label above card rows */
.ratio-section-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 0 4px;
}
.ratio-section-label__text {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--crud-ink-soft);
    white-space: nowrap;
}
.ratio-section-label__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0,0,0,0.08), transparent);
}

.ratio-report .crud-hero {
    border-radius: 40px;
    margin-bottom: 40px;
    animation: ratioFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ratio-stat-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 22px;
    margin-bottom: 36px;
    animation: ratioFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--row-index, 1) * 0.18s);
}

.ratio-stat-grid .crud-stat {
    position: relative;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 28px;
    min-height: 148px;
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    overflow: hidden;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.025),
        0 1px 0 rgba(255, 255, 255, 0.95) inset;
    transition: all 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Decorative floating orb */
.ratio-stat-grid .crud-stat::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.07;
    filter: blur(30px);
    animation: orbFloat 8s ease-in-out infinite;
    pointer-events: none;
    top: -20px;
    right: -20px;
}
.ratio-stat--profit::before { background: #10b981; }
.ratio-stat--asset::before  { background: #3b82f6; }
.ratio-stat--equity::before { background: #ec4899; }
.ratio-stat--risk::before   { background: #f59e0b; }

/* Shimmer sweep on hover */
.ratio-stat-grid .crud-stat::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}
.ratio-stat-grid .crud-stat:hover::after {
    animation: shimmer 0.7s ease forwards;
}

.ratio-stat-grid .crud-stat:hover {
    transform: translateY(-8px) scale(1.02);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(255, 255, 255, 1);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(255, 255, 255, 1),
        0 1px 0 rgba(255, 255, 255, 1) inset;
}

/* Accent strip at top of card */
.ratio-stat__accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 28px 28px 0 0;
}
.ratio-stat--profit .ratio-stat__accent { background: linear-gradient(90deg, #10b981, #34d399); }
.ratio-stat--asset .ratio-stat__accent  { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.ratio-stat--equity .ratio-stat__accent { background: linear-gradient(90deg, #ec4899, #f472b6); }
.ratio-stat--risk .ratio-stat__accent   { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

/* Icon container */
.ratio-stat__icon {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
    transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ratio-stat--profit .ratio-stat__icon { background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #059669; }
.ratio-stat--asset .ratio-stat__icon  { background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #2563eb; }
.ratio-stat--equity .ratio-stat__icon { background: linear-gradient(135deg, #fdf2f8, #fce7f3); color: #db2777; }
.ratio-stat--risk .ratio-stat__icon   { background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #d97706; }

.ratio-stat-grid .crud-stat:hover .ratio-stat__icon {
    transform: scale(1.15) rotate(-5deg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* Pulsing status dot */
.ratio-stat__dot {
    position: absolute;
    top: 26px;
    right: 74px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulseGlow 2.5s ease-in-out infinite;
}
.ratio-stat--profit .ratio-stat__dot { background: #10b981; }
.ratio-stat--asset .ratio-stat__dot  { background: #3b82f6; }
.ratio-stat--equity .ratio-stat__dot { background: #ec4899; }
.ratio-stat--risk .ratio-stat__dot   { background: #f59e0b; }

/* Label */
.ratio-stat-grid .crud-stat__label {
    color: var(--crud-ink-soft);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    margin-bottom: 4px;
    text-transform: uppercase;
    opacity: 0.7;
    transition: opacity 0.3s;
}
.ratio-stat-grid .crud-stat:hover .crud-stat__label { opacity: 1; }

/* Value — themed gradient text */
.ratio-stat-grid .crud-stat__value {
    font-size: clamp(1.45rem, 5cqw, 2.1rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.1;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(135deg, #064e3b, #059669);
}
.ratio-stat--profit .crud-stat__value { background: linear-gradient(135deg, #064e3b, #059669); -webkit-background-clip: text; }
.ratio-stat--asset .crud-stat__value  { background: linear-gradient(135deg, #1e3a5f, #2563eb); -webkit-background-clip: text; }
.ratio-stat--equity .crud-stat__value { background: linear-gradient(135deg, #831843, #db2777); -webkit-background-clip: text; }
.ratio-stat--risk .crud-stat__value   { background: linear-gradient(135deg, #78350f, #d97706); -webkit-background-clip: text; }


.ratio-panel {
    background: transparent;
    box-shadow: none;
    border: 0;
    margin-top: 48px;
    animation: ratioFadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ratio-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
    padding: 0 6px;
}

.ratio-panel__header .panel-title {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #111;
}

.ratio-panel__header .crud-pill {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 7px 16px;
    border-radius: 100px;
    border: 0;
    color: white;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.ratio-table-wrap {
    overflow-x: visible;
    padding: 0 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.ratio-table-wrap::before { display: none; }

.ratio-table {
    border-collapse: separate;
    border-spacing: 0 12px;
    width: 100%;
    margin-top: -4px;
    table-layout: fixed;
}

.ratio-table thead th {
    position: static;
    padding: 10px 18px;
    background: transparent;
    border: 0;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: rgba(78, 85, 102, 0.55);
    white-space: normal;
}

.ratio-table tbody tr {
    background: transparent;
    animation: ratioFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ratio-table tbody tr:nth-child(1) { animation-delay: 0.05s; }
.ratio-table tbody tr:nth-child(2) { animation-delay: 0.10s; }
.ratio-table tbody tr:nth-child(3) { animation-delay: 0.12s; }
.ratio-table tbody tr:nth-child(4) { animation-delay: 0.16s; }
.ratio-table tbody tr:nth-child(5) { animation-delay: 0.20s; }
.ratio-table tbody tr:nth-child(6) { animation-delay: 0.24s; }
.ratio-table tbody tr:nth-child(7) { animation-delay: 0.28s; }
.ratio-table tbody tr:nth-child(8) { animation-delay: 0.32s; }
.ratio-table tbody tr:nth-child(9) { animation-delay: 0.36s; }

.ratio-table tbody td {
    padding: 22px 18px;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-left: 0;
    border-right: 0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.012);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ratio-table tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px 0 0 20px;
}
.ratio-table tbody td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 0 20px 20px 0;
}

.ratio-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(0, 0, 0, 0.04);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.045);
    transform: scale(1.003);
}

/* Ref badge */
.ratio-table .crud-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    color: #0369a1;
    border: 1px solid rgba(3, 105, 161, 0.08);
    box-shadow: 0 2px 6px rgba(3, 105, 161, 0.06);
}

.ratio-table .row-title {
    margin: 0;
    font-family: var(--crud-font);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--crud-ink);
}

.ratio-table .row-meta {
    color: var(--crud-ink-soft);
    font-size: 0.78rem;
    font-weight: 500;
    margin-top: 2px;
}

/* Formula — frosted showcase */
.ratio-table .ratio-formula {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.025),
        0 1px 0 rgba(255, 255, 255, 1) inset;
    min-width: 0;
    transition: all 0.4s ease;
}
.ratio-table tbody tr:hover .ratio-formula {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 0 rgba(255,255,255,1) inset;
    transform: scale(1.02);
}

/* Value */
.ratio-table .ratio-value {
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.2;
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    color: var(--crud-ink);
    transition: color 0.3s ease;
}
.ratio-table tbody tr:hover .ratio-value { color: #0369a1; }

/* Use description */
.ratio-table .ratio-use {
    font-size: 0.84rem;
    color: #6b7280;
    line-height: 1.55;
    font-weight: 450;
}


/* Column widths */
.ratio-table .ratio-col-ref { width: 60px; }
.ratio-table .ratio-col-indicator { width: 20%; }
.ratio-table .ratio-col-formula { width: 25%; }
.ratio-table .ratio-col-value { width: 100px; }
.ratio-table .ratio-col-use { width: auto; }


@media (max-width: 1120px) {
    .ratio-table .ratio-col-ref {
        width: 58px;
    }

    .ratio-table .ratio-col-indicator {
        width: 24%;
    }

    .ratio-table .ratio-col-formula {
        width: 26%;
    }

    .ratio-table .ratio-col-value {
        width: 104px;
    }
}

@media (max-width: 860px) {
    .ratio-table,
    .ratio-table thead,
    .ratio-table tbody,
    .ratio-table tr,
    .ratio-table th,
    .ratio-table td {
        display: block;
        width: 100%;
    }

    .ratio-table colgroup,
    .ratio-table thead {
        display: none;
    }

    .ratio-table tbody tr {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 8px 12px;
        padding: 14px;
        margin-bottom: 10px;
        border: 1px solid rgba(255, 255, 255, 0.78);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.68);
    }

    .ratio-table tbody td {
        padding: 0;
        border: 0;
        border-radius: 0 !important;
        background: transparent;
    }

    .ratio-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        color: var(--crud-muted);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .ratio-table tbody td[data-label="Ref"] {
        grid-row: span 4;
    }

    .ratio-table .ratio-value {
        text-align: left !important;
    }
}

.crud-document__title {
    font-size: 1.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #111827;
    margin: 0;
}

.crud-document__ref {
    font-family: var(--crud-font-display);
    font-size: 1.1rem;
    color: var(--crud-blue);
    font-weight: 600;
    margin-top: 4px;
}

.crud-document__billing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 20px;
}

.crud-document__bill-to h4,
.crud-document__details h4 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9CA3AF;
    margin-bottom: 12px;
}

.crud-document__bill-to p,
.crud-document__details p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Authentic Table Styling */
/* Excel-Style 'Orange' Grid Table Styling */
.crud-document__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0px; /* Attached to summary */
    border: 1px solid #ED7D31;
}

.crud-document__table th {
    text-align: left;
    padding: 6px 16px; /* Reduced height */
    background: #ED7D31;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid #ED7D31;
}

.crud-document__table td {
    padding: 6px 16px; /* Reduced height */
    border: 1px solid #ED7D31;
    font-size: 0.95rem;
    color: #1E293B;
}

/* Faint alternating colors */
.crud-document__table tbody tr:nth-child(even) {
    background-color: #FEF3EA; /* Very faint orange tint */
}

.crud-document__table .text-right { text-align: right; }

.crud-document__summary {
    display: flex;
    justify-content: flex-end;
}

.crud-document__summary-table {
    width: 320px;
    border-collapse: collapse;
    border: 1px solid #ED7D31;
    background: #FFFFFF;
}

.crud-document__summary-row td {
    padding: 6px 16px;
    border: 1px solid #ED7D31;
    font-size: 1rem;
    color: #1E293B;
}

.crud-document__summary-row--total td {
    border-top: 2px solid #111827;
    border-bottom: 4px double #111827;
    font-size: 1.25rem;
    font-weight: 900;
    color: #111827;
    padding: 8px 16px;
    background: #FEF3EA;
}

/* Status Stamps */
.crud-document__stamp {
    position: absolute;
    top: 120px;
    right: 60px;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 6px double currentColor;
    border-radius: 50%;
    font-weight: 900;
    font-size: 1.4rem;
    text-transform: uppercase;
    transform: rotate(-15deg);
    opacity: 0.15;
    pointer-events: none;
    user-select: none;
    z-index: 10;
}

.crud-document__stamp--paid { color: #10B981; }
.crud-document__stamp--void { color: #EF4444; }
.crud-document__stamp--refunded { color: #F59E0B; }

.crud-document__footer {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #F3F4F6;
    text-align: center;
    font-size: 0.85rem;
    color: #9CA3AF;
}

@media print {
    .crud-document-wrap { padding: 0 !important; background: white !important; display: block !important; }
    .crud-document { box-shadow: none !important; max-width: 100% !important; padding: 0 !important; }
    .crud-hero, .crud-backlink, .crud-sidebar, .crud-header, .crud-document-sidebar { display: none !important; }
}

/* =============================================================
   Record / Show / Detail Views (Premium System)
   ============================================================= */

.crud-record-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    margin-top: 24px;
}

.crud-data-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 
        0 20px 48px rgba(123, 78, 39, 0.08),
        0 4px 12px rgba(123, 78, 39, 0.04);
}

.crud-data-card + .crud-data-card {
    margin-top: 24px;
}

.crud-data-card__title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--crud-ink);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.01em;
}

.crud-data-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
}

.crud-data-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

.crud-data-grid--sidebar {
    grid-template-columns: 1fr;
    gap: 20px;
}

.crud-data-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.crud-data-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8c9aac;
    display: flex;
    align-items: center;
    gap: 6px;
}

.crud-data-label svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

.crud-data-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--crud-ink);
    line-height: 1.35;
}

.crud-data-value a {
    color: var(--crud-blue);
    text-decoration: none;
    border-bottom: 2px solid rgba(0, 122, 255, 0.1);
    transition: border-color 0.2s;
}

.crud-data-value a:hover {
    border-color: rgba(0, 122, 255, 0.4);
}

.crud-data-value--large {
    font-size: 1.5rem;
    letter-spacing: -0.03em;
}

@media (max-width: 1024px) {
    .crud-record-layout {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   RESPONSIVE HARDENING
   ============================================================= */
@media (max-width: 768px) {
    .crud-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 32px 24px;
    }
    
    .crud-title {
        font-size: 2.2rem;
    }

    .crud-form-row.grid-2,
    .crud-form-row.grid-3,
    .crud-form-row.grid-4 {
        grid-template-columns: 1fr;
    }

    .crud-totals {
        flex-direction: column;
        align-items: stretch;
    }

    .crud-totals__divider {
        display: none;
    }
    
    .crud-totals__item {
        padding: 12px 0;
        border-bottom: 1px solid var(--crud-border);
    }

    .crud-query-bar {
        flex-direction: column;
        gap: 12px;
    }

    .crud-query-bar > * {
        width: 100% !important;
    }

    .crud-table-footer {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
}

/* Staff Photos & Avatars */
.staff-photo-large {
    width: 140px !important;
    height: 140px !important;
    border-radius: 50% !important;
    margin: 0 auto;
    overflow: hidden !important;
    border: 4px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background: var(--crud-slate-light);
}

.staff-photo-large img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.staff-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: var(--crud-ink-soft);
    background: linear-gradient(135deg, var(--crud-slate-light), var(--crud-border));
}

.staff-avatar-mini {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 1px solid var(--crud-border);
    background: var(--crud-slate-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--crud-ink-soft);
}

.staff-avatar-mini img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.topbar-profile .profile-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: var(--crud-brand);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.topbar-profile .profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

@media (max-width: 480px) {
    .crud-title {
        font-size: 1.8rem;
    }
    
    .crud-button {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════
   Staff Profile (.sp-) — Apple Inspired Aesthetics
   ═══════════════════════════════════════════════════════ */

.sp {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 32px 80px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── Top Navigation ── */
.sp-nav-top {
    margin-bottom: 24px;
}

.sp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0071e3;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.2s ease, transform 0.2s ease;
}

.sp-back-link:hover {
    color: #0077ed;
    transform: translateX(-2px);
}

.sp-back-link__icon {
    font-size: 1.1rem;
    font-weight: 300;
    margin-top: -1px;
}

/* Card base - Apple Style */
.sp-card {
    background: #ffffff;
    border: none;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.sp-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

.sp-card--danger {
    background: #fffafa;
}

/* ── Hero Card ── */
.sp-hero-card {
    padding: 0;
    overflow: hidden;
    background: #ffffff;
}

.sp-cover {
    height: 220px;
    position: relative;
    background: linear-gradient(180deg, #064e3b 0%, #0d9488 100%);
    overflow: hidden;
}

.sp-cover__gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255,255,255,0.1), transparent);
}

/* Identity row */
.sp-identity {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 0 64px 64px;
    margin-top: -60px;
    position: relative;
    z-index: 2;
}

.sp-avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    border: 6px solid #ffffff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    background: #f5f5f7;
    flex-shrink: 0;
}

.sp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sp-avatar__letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 4rem;
    font-weight: 600;
    color: #86868b;
}

.sp-identity__text {
    flex: 1;
    min-width: 0;
}

.sp-name {
    font-size: 2rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.sp-role {
    font-size: 1.15rem;
    font-weight: 500;
    color: #0d9488;
    margin: 4px 0 0;
}

.sp-meta {
    font-size: 1rem;
    color: #86868b;
    margin: 12px 0 0;
}

.sp-identity__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

/* Status pill - iOS Style */
.sp-status {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 100px;
    text-transform: none;
    letter-spacing: normal;
    display: flex;
    align-items: center;
}

.sp-status--active {
    color: #008060;
    background: #e6f4f1;
}

/* Buttons - Apple Style */
.sp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 980px; /* Fully rounded */
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    text-decoration: none;
}

.sp-btn--primary {
    background: #0071e3; /* Apple Blue */
    color: #ffffff;
}

.sp-btn--primary:hover {
    background: #0077ed;
    box-shadow: 0 4px 15px rgba(0, 113, 227, 0.3);
}

.sp-btn--danger {
    background: #f5f5f7;
    color: #d60017;
    border: none;
}

.sp-btn--danger:hover {
    background: #ff3b30;
    color: #ffffff;
}

/* ── Stats Row ── */
.sp-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 32px;
}

.sp-stat-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px 24px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    border: 1px solid #f5f5f7;
}

.sp-stat__label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #86868b;
    margin-bottom: 12px;
}

.sp-stat__value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.01em;
}

.sp-stat__value--accent {
    color: #0d9488;
}

/* ── Content Grid ── */
.sp-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 32px;
    margin-top: 32px;
}

.sp-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 32px;
    letter-spacing: -0.01em;
}

.sp-bio {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #424245;
    margin: 0;
}

/* Contact Detail Grid */
.sp-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.sp-detail {
    display: flex;
    gap: 20px;
    align-items: center;
}

.sp-detail__icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.sp-detail__label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #86868b;
    margin-bottom: 2px;
}

.sp-detail__value {
    font-size: 1.05rem;
    color: #1d1d1f;
    font-weight: 600;
}

/* Sidebar Details */
.sp-sidebar-detail {
    padding: 24px 0;
    border-bottom: 1px solid #f5f5f7;
}

.sp-sidebar-detail:first-child { padding-top: 0; }
.sp-sidebar-detail:last-child { border-bottom: none; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .sp-grid { grid-template-columns: 1fr; }
    .sp-stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
    .sp-identity {
        flex-direction: column;
        text-align: center;
        gap: 24px;
        margin-top: -80px;
    }
    .sp-name { font-size: 2rem; }
}
padding: 0 24px 28px;
    }
    .sp-identity__actions {
        flex-direction: column;
    }
    .sp-detail-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    .sp-stats-row {
        grid-template-columns: 1fr 1fr;
    }
    .sp-cover {
        height: 140px;
    }
    .sp-name {
        font-size: 1.4rem;
    }
}


/* ==========================================================================
   MATHEMATICAL FORMULAS (LaTeX-Lite) - PREMIUM
   ========================================================================== */

.math-formula {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    font-family: "Latin Modern Math", "Cambria Math", "STIX Two Math", "Times New Roman", serif;
    font-size: 0.95rem;
    color: #111;
    line-height: 1.2;
    font-style: italic;
    white-space: normal;
    text-rendering: optimizeLegibility;
}

.math-fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    padding: 0 10px;
    margin: 0 6px;
}

.math-num {
    border-bottom: 1.5px solid #222;
    padding: 0 8px 3px 8px;
    width: 100%;
    text-align: center;
    font-size: 0.94em;
}

.math-den {
    padding: 3px 8px 0 8px;
    width: 100%;
    text-align: center;
    font-size: 0.94em;
}

.math-op {
    font-style: normal;
    margin: 0 12px;
    font-weight: 400;
    color: #555;
}

.math-paren {
    font-style: normal;
    font-size: 1.4em;
    font-weight: 200;
    color: #aaa;
}

.math-const {
    font-style: normal;
    font-weight: 800;
    margin: 0 8px;
    color: #000;
}


/* --- GLOBAL ELITE TABLE THEME --- */
.crud-table thead tr {
    background: #1e3a8a !important;
}
.crud-table thead th {
    background: #1e3a8a !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
    padding: 12px 16px !important;
}
.crud-table thead th a, 
.crud-table thead th .sortable-header,
.crud-table thead th div,
.crud-table thead th .icons,
.crud-table thead th svg {
    color: #ffffff !important;
}
.crud-table thead th.is-sortable:hover {
    background: #1e40af !important;
    cursor: pointer;
}

/* --- SYSTEM-WIDE RESPONSIVE OVERRIDES --- */
.crud-shell,
.crud-panel,
.crud-form-card,
.crud-hero,
.crud-table-wrap,
.crud-document,
.crud-query-bar,
.crud-form,
.crud-form__grid,
.crud-detail-list {
    max-width: 100%;
    min-width: 0;
}

.crud-shell {
    overflow-x: clip;
}

.crud-title,
.crud-section-title,
.crud-subtitle,
.row-title,
.row-meta,
.crud-table td,
.crud-table th {
    overflow-wrap: anywhere;
}

.crud-table-wrap,
.crud-panel .crud-table-wrap,
.crud-shell .crud-table-wrap,
.crud-document {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.crud-table {
    width: 100%;
}

.crud-table th,
.crud-table td {
    vertical-align: top;
}

.crud-table__actions,
.crud-table td:last-child,
.crud-table th:last-child {
    white-space: nowrap;
}

.crud-form__grid,
.crud-form-row,
.crud-stats-row,
.crud-stat-grid {
    min-width: 0;
}

.crud-field,
.crud-input-wrap,
.crud-query-bar__search,
.crud-query-bar__select,
.crud-query-bar input,
.crud-query-bar select,
.crud-query-bar button {
    min-width: 0 !important;
    max-width: 100%;
}

@media (max-width: 1180px) {
    .crud-stats-row,
    .crud-stat-grid,
    .stats-grid,
    .finance-chart__stack,
    .dashboard-chart__stack,
    section.crud-stat-grid,
    div.crud-stat-grid {
        grid-auto-flow: row !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .crud-shell .crud-hero {
        padding: 32px !important;
        gap: 24px !important;
    }
}

@media (max-width: 1320px) {
    .inventory-summary-bar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 16px !important;
        padding: 18px !important;
    }

    .inventory-summary-bar .summary-divider {
        display: none !important;
    }

    .inventory-summary-bar .summary-item {
        min-width: 0 !important;
        padding: 12px !important;
        border: 1px solid var(--crud-border);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.48);
    }

    .inventory-summary-bar .summary-value {
        flex-wrap: wrap !important;
        font-size: clamp(1.15rem, 2.2vw, 1.5rem) !important;
        line-height: 1.15 !important;
    }

    .inventory-summary-bar .summary-progress-wrapper {
        min-width: 0 !important;
    }

    .crud-query-bar {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }

    .crud-query-bar__search {
        flex: 1 1 420px !important;
        min-width: min(100%, 320px) !important;
    }

    .crud-query-bar__select,
    .crud-query-bar > select,
    .crud-query-bar__reset,
    .crud-query-bar > button {
        flex: 0 1 auto !important;
    }

    .crud-panel[data-role="crud-panel"] {
        overflow: hidden;
    }
}

@media (max-width: 860px) {
    .crud-shell {
        padding: 10px !important;
    }

    .crud-shell > * + * {
        margin-top: 16px !important;
    }

    .crud-panel,
    .crud-form-card,
    .crud-hero,
    .crud-shell .crud-hero,
    .crud-table-wrap {
        border-radius: 16px !important;
        padding: 16px !important;
    }

    .crud-panel[style],
    .crud-form-card[style],
    .crud-hero[style],
    .crud-table-wrap[style],
    .crud-document[style],
    form.crud-panel[style],
    section.crud-panel[style] {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .crud-hero__actions,
    .crud-form__footer,
    .crud-panel__header,
    .crud-query-bar,
    .crud-inline-form,
    .pager-nav,
    .pager-meta {
        width: 100%;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    .crud-hero__actions > *,
    .crud-form__footer > *,
    .crud-query-bar > *,
    .crud-inline-form > * {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .crud-query-bar {
        overflow-x: visible !important;
    }

    .crud-stats-row,
    .crud-stat-grid,
    .stats-grid,
    .finance-chart__stack,
    .dashboard-chart__stack,
    section.crud-stat-grid,
    div.crud-stat-grid,
    .crud-form__grid,
    .crud-form-row,
    .crud-form-row.grid-2,
    .crud-form-row.grid-3,
    .crud-form-row.grid-4,
    form[style*="grid-template-columns"],
    div[style*="grid-template-columns"],
    section[style*="grid-template-columns"] {
        grid-auto-flow: row !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .crud-form__grid > *,
    .crud-form-row > *,
    .crud-field,
    .crud-field--wide,
    [style*="grid-column"] {
        grid-column: 1 / -1 !important;
    }

    .crud-stat-card,
    .crud-stat {
        min-height: auto !important;
        padding: 16px !important;
    }

    .crud-stat-value,
    .crud-stat__value {
        font-size: clamp(1.2rem, 8vw, 2rem) !important;
        text-align: left !important;
    }

    .crud-stat__meta {
        text-align: left !important;
    }

    .crud-table {
        min-width: 760px;
    }

    .crud-table thead th,
    .crud-table tbody td,
    .crud-table tfoot td {
        padding: 10px 12px !important;
        font-size: 0.82rem !important;
    }
}

@media (max-width: 640px) {
    .inventory-summary-bar {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 560px) {
    .crud-panel,
    .crud-form-card,
    .crud-hero,
    .crud-shell .crud-hero,
    .crud-table-wrap {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .crud-title {
        font-size: clamp(1.6rem, 11vw, 2.4rem) !important;
        line-height: 1.05 !important;
        letter-spacing: 0 !important;
    }

    .crud-subtitle {
        font-size: 0.92rem !important;
    }

    .crud-button,
    button.crud-button,
    a.crud-button {
        width: 100% !important;
        min-height: 42px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .crud-table {
        min-width: 680px;
    }

    .crud-table-wrap::after {
        content: "Scroll sideways to view all columns";
        display: block;
        padding: 8px 4px 0;
        color: var(--crud-muted);
        font-size: 0.72rem;
        font-weight: 700;
        text-align: left;
    }
}

/* --- GLOBAL ELITE ERP HIGH-FIDELITY RESPONSIVENESS PATCH --- */
/*
 * Automatically overrides legacy inline grid layouts across all backend pages
 * to ensure premium responsive display on tablets and mobile devices.
 */

/* 1. Panel Grids (Sidebar + Main Column layouts) */
@media (max-width: 1024px) {
    .crud-panel-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* 2. List & Report Filters Grid Collapse */
@media (max-width: 960px) {
    .crud-filters,
    .crud-query-bar {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
        display: grid !important;
        gap: 12px !important;
    }
    .crud-filters > *,
    .crud-query-bar > * {
        grid-column: auto !important;
        width: 100% !important;
    }
}

@media (max-width: 560px) {
    .crud-filters,
    .crud-query-bar {
        grid-template-columns: 1fr !important;
    }
}

/* 3. Catch-All for Custom Inline Grids on Small Viewports */
@media (max-width: 768px) {
    /* Targets any element within panel/forms having inline grid styles,
       explicitly excluding graphic chart bar visualizations. */
    .crud-panel [style*="display: grid"]:not([class*="chart"]):not([class*="graph"]):not([class*="bar"]),
    .crud-panel [style*="display:grid"]:not([class*="chart"]):not([class*="graph"]):not([class*="bar"]),
    .crud-form [style*="display: grid"]:not([class*="chart"]):not([class*="graph"]):not([class*="bar"]),
    .crud-form [style*="display:grid"]:not([class*="chart"]):not([class*="graph"]):not([class*="bar"]),
    .crud-form-row[style*="grid-template-columns"],
    .crud-detail-list[style*="grid-template-columns"],
    .crud-stats-row[style*="grid-template-columns"],
    .dashboard-grid,
    .dashboard-graphs__grid,
    .finance-graphs__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Force children to span full-width inside standard grid cells on mobile */
    .crud-panel [style*="display: grid"]:not([class*="chart"]):not([class*="graph"]):not([class*="bar"]) > *,
    .crud-panel [style*="display:grid"]:not([class*="chart"]):not([class*="graph"]):not([class*="bar"]) > *,
    .crud-form [style*="display: grid"]:not([class*="chart"]):not([class*="graph"]):not([class*="bar"]) > *,
    .crud-form [style*="display:grid"]:not([class*="chart"]):not([class*="graph"]):not([class*="bar"]) > * {
        grid-column: 1 / -1 !important;
    }
}

/* --- PREMIUM GOLDEN METRIC CARDS OVERHAUL --- */
.finance-metric {
    position: relative;
    padding: 20px 22px !important;
    border: 1px solid rgba(217, 119, 6, 0.26) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.88), rgba(253, 230, 138, 0.65)) !important;
    box-shadow: 
        0 12px 28px rgba(180, 83, 9, 0.08), 
        inset 0 1.5px 0 rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.28s ease, 
                background 0.28s ease !important;
    cursor: pointer;
    overflow: hidden;
}

.finance-metric::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: 1;
}

.finance-metric > * {
    position: relative;
    z-index: 2;
}

.finance-metric:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 
        0 20px 38px rgba(180, 83, 9, 0.16), 
        inset 0 1.5px 0 rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(245, 158, 11, 0.52) !important;
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.98), rgba(252, 211, 77, 0.85)) !important;
}

.finance-metric span {
    display: block;
    color: #92400e !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin-bottom: 4px;
}

.finance-metric strong {
    display: block;
    margin: 8px 0 !important;
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: #1e2430 !important; /* Elegant slate ink */
    letter-spacing: -0.04em !important;
    font-family: var(--crud-font) !important;
    line-height: 1.1;
}

.finance-metric small {
    display: block;
    color: #b45309 !important;
    font-weight: 750 !important;
    font-size: 0.82rem !important;
    opacity: 0.85;
}

/* --- GOOGLE-INSPIRED DYNAMIC SEARCH HIGH-CONTRAST HIGHLIGHTS --- */
mark.search-highlight {
    background-color: rgba(254, 240, 138, 0.88) !important; /* Premium gold-yellow glow */
    color: #78350f !important; /* Deep rich bronze text */
    border-radius: 4px !important;
    padding: 0 3px !important;
    margin: 0 1px !important;
    box-shadow: 0 1px 3px rgba(217, 119, 6, 0.16) !important;
    font-weight: 750 !important;
    text-shadow: none !important;
}

/* --- GOOGLE-STYLE FLOATING AUTOCOMPLETE DROPDOWN --- */
.search-autocomplete-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    max-height: 240px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    border-radius: 14px;
    border: 1px solid var(--crud-border) !important;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 36px rgba(24, 37, 59, 0.12), inset 0 1px 0 #fff;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9999;
    overflow-y: auto;
}

.search-autocomplete-item {
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--crud-ink);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.search-autocomplete-item:hover,
.search-autocomplete-item.is-selected {
    background-color: rgba(254, 243, 199, 0.72);
    color: #78350f;
}

.search-autocomplete-item small {
    display: block;
    font-size: 0.72rem;
    color: var(--crud-muted);
    font-weight: 600;
    margin-top: 2px;
}

/* --- ADVANCED GOOGLE SEARCH EXTENSIONS --- */

/* 1. Recent Search History Dropdown */
.search-history-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    max-height: 240px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    border-radius: 14px;
    border: 1px solid var(--crud-border) !important;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 36px rgba(24, 37, 59, 0.12), inset 0 1px 0 #fff;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9999;
    overflow-y: auto;
}

.search-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--crud-ink);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.search-history-item:hover {
    background-color: rgba(0, 122, 255, 0.06);
}

.search-history-item .history-icon {
    margin-right: 10px;
    color: var(--crud-pen-blue);
    opacity: 0.65;
    display: flex;
    align-items: center;
}

.search-history-item .history-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-history-item .history-delete-btn {
    border: none;
    background: none;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--crud-red);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s ease;
    padding: 2px 6px;
    border-radius: 6px;
}

.search-history-item:hover .history-delete-btn {
    opacity: 0.8;
}

.search-history-item .history-delete-btn:hover {
    opacity: 1;
    background-color: rgba(226, 61, 69, 0.1);
}

/* 2. I'm Feeling Lucky Pulsating Keyframes */
@keyframes lucky-flash {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(233, 152, 39, 0.7); background: rgba(233, 152, 39, 0.3) !important; }
    50% { transform: scale(1.015); box-shadow: 0 0 24px 12px rgba(233, 152, 39, 0.4); background: rgba(233, 152, 39, 0.45) !important; }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(233, 152, 39, 0); }
}

.lucky-pulse {
    animation: lucky-flash 2.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    z-index: 10;
}

/* 3. Gooooooogle Pagination Widget */
.google-pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 2rem 0;
    font-family: var(--crud-font);
    font-weight: 800;
}

.google-pagination-letters {
    display: flex;
    align-items: flex-end;
    font-size: 1.8rem;
    letter-spacing: -1.5px;
    user-select: none;
}

.google-letter-G { color: #007aff; }
.google-letter-little-g { color: #007aff; }
.google-letter-l { color: #2fa35e; }
.google-letter-e { color: #e23d45; }

.google-letter-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20px;
}

.google-letter-o {
    line-height: 1;
    color: #e99827;
    transition: transform 0.2s ease;
}

.google-letter-o.active {
    color: #e23d45;
    transform: scale(1.15);
}

.google-letter-o.color-yellow { color: #e99827; }
.google-letter-o.color-blue { color: #007aff; }

.google-page-num {
    font-size: 0.8rem;
    color: var(--crud-muted) !important;
    margin-top: 4px;
    font-weight: 700;
    letter-spacing: normal;
}

.google-page-num.active {
    color: var(--crud-ink) !important;
    font-weight: 900;
    pointer-events: none;
}

.google-pag-prev,
.google-pag-next {
    font-size: 0.9rem;
    color: var(--crud-blue) !important;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.google-pag-prev span,
.google-pag-next span {
    font-weight: 800;
}

.google-pag-prev.disabled,
.google-pag-next.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.google-pag-prev:hover { transform: translateX(-3px); }
.google-pag-next:hover { transform: translateX(3px); }

/* 4. Search Bookmarks */
.search-bookmarks-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: -8px;
    margin-bottom: 1rem;
    align-items: center;
}

.search-bookmark-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-family: var(--crud-font);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--crud-pen-blue);
    background: #BED9B2;
    border: 1.5px solid rgba(248, 191, 211, 0.7);
    border-radius: var(--crud-radius-pill);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    transition: all 0.15s ease;
}

.search-bookmark-pill .bookmark-pill-text {
    cursor: pointer;
}

.search-bookmark-pill .bookmark-pill-text:hover {
    text-decoration: underline;
}

.search-bookmark-pill .bookmark-pill-delete {
    border: none;
    background: none;
    font-size: 0.9rem;
    font-weight: 900;
    color: var(--crud-red);
    opacity: 0.6;
    cursor: pointer;
    padding: 0 2px;
    display: flex;
    align-items: center;
    line-height: 1;
}

.search-bookmark-pill .bookmark-pill-delete:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* 6. Help Cheatsheet Tooltip */
.search-help-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--crud-border);
    background: var(--crud-surface-soft);
    font-family: var(--crud-font);
    font-size: 0.7rem;
    font-weight: 900;
    color: var(--crud-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-help-badge:hover {
    border-color: var(--crud-border-strong);
    color: var(--crud-ink);
    background: var(--crud-surface);
}

.search-syntax-tooltip {
    position: absolute;
    bottom: 24px;
    right: 0;
    width: 320px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--crud-border-strong);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
    z-index: 1000;
    text-align: left;
    text-transform: none;
    color: var(--crud-ink);
    font-weight: normal;
    letter-spacing: normal;
}

.search-syntax-tooltip .search-tip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 600;
}

.search-syntax-tooltip .badge {
    background: #BED9B2;
    color: var(--crud-pen-blue);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 800;
    font-family: monospace;
}

/* --- GOOGLE KNOWLEDGE PANEL & AUTO-CORRECT STYLES --- */

/* Clickable table rows for inspection */
tbody tr:not(.no-results-row):not(.crud-table__empty) {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

tbody tr:not(.no-results-row):not(.crud-table__empty):hover {
    background-color: rgba(248, 191, 211, 0.18) !important;
}

/* 1. Google Knowledge Panel Sidebar */
.google-knowledge-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 440px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-left: 1.5px solid var(--crud-border-strong);
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.08);
    z-index: 10000;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--crud-font);
}

.google-knowledge-sidebar.open {
    transform: translateX(0);
}

.google-knowledge-header {
    padding: 24px 28px;
    border-bottom: 1.5px solid var(--crud-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
}

.google-knowledge-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--crud-ink);
    letter-spacing: -0.5px;
}

.google-knowledge-subtitle {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--crud-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

.google-knowledge-close {
    border: none;
    background: none;
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--crud-muted);
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    transition: color 0.15s ease, transform 0.15s ease;
}

.google-knowledge-close:hover {
    color: var(--crud-red);
    transform: scale(1.1);
}

.google-knowledge-body {
    padding: 28px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Sidebar dynamic card widgets */
.knowledge-kpi-card {
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.9), rgba(253, 230, 138, 0.65));
    border: 1.5px solid #ffffff;
    border-radius: var(--crud-radius-lg);
    padding: 20px 24px;
    box-shadow: var(--crud-shadow-card);
    display: flex;
    flex-direction: column;
}

.knowledge-kpi-card span {
    font-size: 0.72rem;
    font-weight: 800;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.knowledge-kpi-card strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--crud-ink);
    line-height: 1.1;
    margin-top: 6px;
    letter-spacing: -1px;
}

.knowledge-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--crud-surface-soft);
    border: 1px solid var(--crud-border);
    border-radius: var(--crud-radius-md);
    padding: 20px;
}

.knowledge-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
    padding-bottom: 8px;
}

.knowledge-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.knowledge-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--crud-muted);
}

.knowledge-value {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--crud-ink);
}

.knowledge-action-btn {
    margin-top: auto;
    height: 48px;
    width: 100%;
    background: #BED9B2;
    border: 1.5px solid var(--crud-input-border);
    border-radius: var(--crud-radius-md);
    font-family: var(--crud-font);
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--crud-pen-blue);
    cursor: pointer;
    box-shadow: var(--crud-shadow-soft);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.knowledge-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--crud-shadow-press);
    background: rgba(190, 217, 178, 0.88);
}

/* 2. Google Auto-Correction Notice Banner */
.google-correction-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: rgba(254, 243, 199, 0.78);
    backdrop-filter: blur(12px);
    border: 1.5px solid rgba(253, 230, 138, 0.8);
    border-radius: var(--crud-radius-md);
    font-family: var(--crud-font);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--crud-ink);
    margin-bottom: 1.2rem;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.05);
    animation: bannerSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bannerSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.google-correction-banner strong {
    font-weight: 850;
    color: var(--crud-red);
}

.google-correction-banner a {
    color: var(--crud-blue) !important;
    text-decoration: underline !important;
    font-weight: 850;
}

/* ----- Global CRUD/Admin Content Responsive Fit Layer ----- */
@media (max-width: 780px) {
    .crud-shell {
        padding: 12px !important;
    }

    .crud-shell > * + * {
        margin-top: 14px !important;
    }

    .crud-hero,
    .crud-panel,
    .crud-form-card,
    .crud-stat,
    .crud-stat-card,
    .crud-table-wrap {
        max-width: 100%;
        padding: 16px !important;
        border-radius: 16px !important;
    }

    .crud-title {
        font-size: clamp(1.45rem, 7.5vw, 2rem) !important;
        line-height: 1.08 !important;
        letter-spacing: 0 !important;
        overflow-wrap: anywhere;
    }

    .crud-subtitle {
        font-size: 0.9rem !important;
        line-height: 1.45 !important;
    }

    .crud-section-title,
    .crud-card-title,
    .crud-panel-title {
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
    }

    .crud-form__grid,
    .crud-form-row,
    .crud-stat-grid,
    .crud-stats-row,
    section.crud-stat-grid,
    div.crud-stat-grid,
    [style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
    }

    .crud-form__grid > *,
    .crud-form-row > *,
    [style*="grid-column"] {
        grid-column: 1 / -1 !important;
    }

    .crud-query-bar,
    .crud-form__footer,
    .crud-inline-form,
    .crud-hero__actions {
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .crud-query-bar > *,
    .crud-form__footer > *,
    .crud-inline-form > *,
    .crud-hero__actions > * {
        max-width: 100% !important;
    }

    .crud-button,
    .crud-input,
    .crud-select,
    .crud-textarea,
    .crud-field input,
    .crud-field select,
    .crud-field textarea,
    input[type="search"] {
        max-width: 100%;
        min-height: 40px;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    .crud-button {
        padding: 10px 13px !important;
        white-space: normal !important;
    }

    .crud-button svg,
    .crud-icon-button svg,
    .crud-action svg,
    .crud-table svg {
        width: 17px !important;
        height: 17px !important;
    }

    .crud-icon-button,
    .crud-action,
    .action-button {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    .crud-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .crud-table {
        min-width: 680px;
    }

    .crud-table th,
    .crud-table td {
        padding: 10px 12px !important;
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
    }

    .crud-table .row-title,
    .row-title {
        font-size: 0.9rem !important;
        line-height: 1.25 !important;
    }

    .search-bookmark-btn,
    .voice-search-btn,
    .lucky-search-btn {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
    }

    .search-autocomplete-dropdown,
    .search-autocomplete-list,
    .search-syntax-tooltip {
        width: min(100%, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
    }

    .google-knowledge-sidebar {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

@media (max-width: 380px) {
    .crud-shell {
        padding: 10px !important;
    }

    .crud-hero,
    .crud-panel,
    .crud-form-card,
    .crud-stat,
    .crud-stat-card,
    .crud-table-wrap {
        padding: 14px !important;
    }

    .crud-title {
        font-size: clamp(1.35rem, 7vw, 1.8rem) !important;
    }

    .crud-icon-button,
    .crud-action,
    .action-button {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
    }
}

/* Final query-row sizing contract. Keep this last so page-specific rules and
   inline grid/flex layouts cannot make search fields tiny again. */
.crud-query-bar,
.crud-filters,
.crud-filter-bar,
.crud-search-filter-row,
.admin-main form:has(input[type="search"]),
.super-admin-layout form:has(input[type="search"]),
.crud-panel form:has(input[type="search"]),
.crud-shell form:has(input[type="search"]) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    grid-template-columns: none !important;
    overflow-x: visible !important;
}

.crud-query-bar__search,
.crud-search-vault,
.crud-search-wrap,
.crud-query-bar > label:has(input[type="search"]),
.crud-query-bar > .crud-input-wrap:has(input[type="search"]),
.crud-query-bar > input[type="search"],
.crud-filters > label:has(input[type="search"]),
.crud-filters > .crud-input-wrap:has(input[type="search"]),
.crud-filters > input[type="search"],
.crud-filter-bar > label:has(input[type="search"]),
.crud-filter-bar > .crud-input-wrap:has(input[type="search"]),
.crud-filter-bar > input[type="search"],
.crud-search-filter-row > label:has(input[type="search"]),
.crud-search-filter-row > .crud-input-wrap:has(input[type="search"]),
.crud-search-filter-row > input[type="search"],
.admin-main form:has(input[type="search"]) > label:has(input[type="search"]),
.admin-main form:has(input[type="search"]) > div:has(> input[type="search"]),
.admin-main form:has(input[type="search"]) > input[type="search"],
.super-admin-layout form:has(input[type="search"]) > label:has(input[type="search"]),
.super-admin-layout form:has(input[type="search"]) > div:has(> input[type="search"]),
.super-admin-layout form:has(input[type="search"]) > input[type="search"],
.crud-panel form:has(input[type="search"]) > label:has(input[type="search"]),
.crud-panel form:has(input[type="search"]) > .crud-input-wrap:has(input[type="search"]),
.crud-panel form:has(input[type="search"]) > input[type="search"],
.crud-shell form:has(input[type="search"]) > label:has(input[type="search"]),
.crud-shell form:has(input[type="search"]) > .crud-input-wrap:has(input[type="search"]),
.crud-shell form:has(input[type="search"]) > input[type="search"] {
    flex: 999 1 min(820px, 62vw) !important;
    width: auto !important;
    min-width: min(100%, 460px) !important;
    max-width: none !important;
}

.crud-query-bar input[type="search"],
.crud-filters input[type="search"],
.crud-filter-bar input[type="search"],
.crud-search-filter-row input[type="search"],
.admin-main form:has(input[type="search"]) input[type="search"],
.super-admin-layout form:has(input[type="search"]) input[type="search"],
.crud-panel form:has(input[type="search"]) input[type="search"],
.crud-shell form:has(input[type="search"]) input[type="search"] {
    width: 100% !important;
    min-width: 0 !important;
}

.crud-query-bar__select,
.crud-query-bar > select,
.crud-query-bar > label:has(select),
.crud-query-bar > .crud-input-wrap:has(select),
.crud-query-bar > input[type="date"],
.crud-query-bar > input[type="month"],
.crud-query-bar > input[type="number"],
.crud-query-bar > input[data-role="filter"],
.crud-filters > select,
.crud-filters > label:has(select),
.crud-filters > .crud-input-wrap:has(select),
.crud-filters > input[type="date"],
.crud-filters > input[type="month"],
.crud-filters > input[type="number"],
.crud-filters > input[data-role="filter"],
.crud-filter-bar > select,
.crud-filter-bar > label:has(select),
.crud-filter-bar > .crud-input-wrap:has(select),
.crud-filter-bar > input[type="date"],
.crud-filter-bar > input[type="month"],
.crud-filter-bar > input[type="number"],
.crud-filter-bar > input[data-role="filter"],
.crud-search-filter-row > select,
.crud-search-filter-row > label:has(select),
.crud-search-filter-row > .crud-input-wrap:has(select),
.crud-search-filter-row > input[type="date"],
.crud-search-filter-row > input[type="month"],
.crud-search-filter-row > input[type="number"],
.crud-search-filter-row > input[data-role="filter"],
.admin-main form:has(input[type="search"]) > select,
.admin-main form:has(input[type="search"]) > label:has(select),
.admin-main form:has(input[type="search"]) > input[type="date"],
.admin-main form:has(input[type="search"]) > input[type="month"],
.admin-main form:has(input[type="search"]) > input[type="number"],
.admin-main form:has(input[type="search"]) > input[data-role="filter"],
.super-admin-layout form:has(input[type="search"]) > select,
.super-admin-layout form:has(input[type="search"]) > label:has(select),
.super-admin-layout form:has(input[type="search"]) > input[type="date"],
.super-admin-layout form:has(input[type="search"]) > input[type="month"],
.super-admin-layout form:has(input[type="search"]) > input[type="number"],
.super-admin-layout form:has(input[type="search"]) > input[data-role="filter"],
.crud-panel form:has(input[type="search"]) > select,
.crud-panel form:has(input[type="search"]) > label:has(select),
.crud-panel form:has(input[type="search"]) > .crud-input-wrap:has(select),
.crud-panel form:has(input[type="search"]) > input[type="date"],
.crud-panel form:has(input[type="search"]) > input[type="month"],
.crud-panel form:has(input[type="search"]) > input[type="number"],
.crud-panel form:has(input[type="search"]) > input[data-role="filter"],
.crud-shell form:has(input[type="search"]) > select,
.crud-shell form:has(input[type="search"]) > label:has(select),
.crud-shell form:has(input[type="search"]) > .crud-input-wrap:has(select),
.crud-shell form:has(input[type="search"]) > input[type="date"],
.crud-shell form:has(input[type="search"]) > input[type="month"],
.crud-shell form:has(input[type="search"]) > input[type="number"],
.crud-shell form:has(input[type="search"]) > input[data-role="filter"] {
    flex: 0 0 clamp(128px, 11vw, 184px) !important;
    width: clamp(128px, 11vw, 184px) !important;
    min-width: 128px !important;
    max-width: 184px !important;
}

.crud-query-bar > button,
.crud-query-bar__reset,
.crud-filters > button,
.crud-filter-bar > button,
.crud-search-filter-row > button,
.admin-main form:has(input[type="search"]) > button,
.super-admin-layout form:has(input[type="search"]) > button,
.crud-panel form:has(input[type="search"]) > button,
.crud-shell form:has(input[type="search"]) > button,
.crud-query-bar > a.crud-button,
.crud-filters > a.crud-button,
.crud-filter-bar > a.crud-button,
.crud-search-filter-row > a.crud-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: max-content !important;
}

@media (max-width: 980px) {
    .crud-query-bar,
    .crud-filters,
    .crud-filter-bar,
    .crud-search-filter-row,
    .admin-main form:has(input[type="search"]),
    .super-admin-layout form:has(input[type="search"]),
    .crud-panel form:has(input[type="search"]),
    .crud-shell form:has(input[type="search"]) {
        flex-wrap: wrap !important;
    }

    .crud-query-bar__search,
    .crud-search-vault,
    .crud-search-wrap,
    .crud-query-bar > label:has(input[type="search"]),
    .crud-query-bar > .crud-input-wrap:has(input[type="search"]),
    .crud-query-bar > input[type="search"],
    .crud-filters > label:has(input[type="search"]),
    .crud-filters > .crud-input-wrap:has(input[type="search"]),
    .crud-filters > input[type="search"],
    .crud-filter-bar > label:has(input[type="search"]),
    .crud-filter-bar > .crud-input-wrap:has(input[type="search"]),
    .crud-filter-bar > input[type="search"],
    .crud-search-filter-row > label:has(input[type="search"]),
    .crud-search-filter-row > .crud-input-wrap:has(input[type="search"]),
    .crud-search-filter-row > input[type="search"] {
        flex: 1 0 100% !important;
        min-width: 100% !important;
    }
}