/*
 * MedFix layout standard for custom panel views.
 *
 * The panels only ship Filament's prebuilt stylesheet, so arbitrary Tailwind utilities
 * (space-y-5, p-5, md:grid-cols-6, bg-amber-50 ...) silently do nothing in our own Blade
 * views. Spacing and status surfaces come from these tokens and classes instead;
 * tests/Unit/PanelUtilityClassesTest.php fails when a view uses a utility that is not built.
 */
:root {
    --mf-space-1: 4px;
    --mf-space-2: 8px;
    --mf-space-3: 12px;
    --mf-space-4: 16px;
    --mf-space-5: 20px;
    --mf-space-6: 24px;

    /* Between cards inside one row, and between stacked page blocks. */
    --mf-gap-cards: var(--mf-space-3);
    --mf-gap-blocks: var(--mf-space-5);
}

/* Vertical rhythm: every direct child block is separated by the same gap. */
.mf-stack { display: flex; flex-direction: column; gap: var(--mf-gap-blocks); min-inline-size: 0; }
.mf-stack--tight { gap: var(--mf-gap-cards); }
.mf-stack > * { min-inline-size: 0; }

/* Main column + fixed side panel; stacks on narrow screens. */
.mf-split { display: grid; gap: var(--mf-gap-blocks); grid-template-columns: minmax(0, 1fr) 18rem; }
@media (max-width: 768px) { .mf-split { grid-template-columns: minmax(0, 1fr); } }

.mf-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mf-space-1); }

/* Status notices (same red/orange/green language as the KPI cards). */
.mf-notice { border: 1px solid; border-radius: 12px; padding: var(--mf-space-3) var(--mf-space-4); font-size: .875rem; line-height: 1.5; }
.mf-notice--warning { background: #FFFBEB; border-color: #FDE68A; color: #78350F; }
.mf-notice--success { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
.mf-notice--danger  { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.dark .mf-notice--warning { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .3); color: #FEF3C7; }
.dark .mf-notice--success { background: rgba(34, 197, 94, .1); border-color: rgba(34, 197, 94, .3); color: #DCFCE7; }
.dark .mf-notice--danger  { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .3); color: #FEE2E2; }

.mf-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 8px; font-size: .75rem; font-weight: 600; }
.mf-chip--warning { background: #FFFBEB; color: #B45309; }
.dark .mf-chip--warning { background: rgba(245, 158, 11, .12); color: #FDE68A; }

/* Appearance page colour swatches. */
.mf-swatch { display: flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border-radius: 999px; border: 4px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(15, 23, 42, .1); }
.dark .mf-swatch { border-color: rgb(17 24 39); }
.mf-swatch-option.is-selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mf-swatch-color); }
.dark .mf-swatch-option.is-selected { box-shadow: 0 0 0 2px rgb(17 24 39), 0 0 0 4px var(--mf-swatch-color); }
.mf-dot { display: inline-block; inline-size: 20px; block-size: 20px; border-radius: 4px; flex: 0 0 auto; }
.mf-dot--warning { background: #F59E0B; }
.mf-dot--danger { background: #DC2626; }

.mf-caption { font-size: 11px; font-weight: 500; margin: 0 0 var(--mf-space-1); padding-inline: var(--mf-space-1); }

/*
 * Approved utilities missing from Filament's build but used by existing panel views.
 * Add a class here only when it is genuinely needed; the utility-class test reads this file.
 */
.m-0 { margin: 0; }
.mb-3 { margin-block-end: .75rem; }
.mt-5 { margin-block-start: 1.25rem; }
.mt-8 { margin-block-start: 2rem; }
.dark .dark\:border-gray-800 { border-color: rgb(31 41 55); }
.px-5 { padding-inline: 1.25rem; }
.py-12 { padding-block: 3rem; }
.pb-3 { padding-block-end: .75rem; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.h-12 { block-size: 3rem; }
.w-12 { inline-size: 3rem; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: .025em; }
.text-gray-800 { color: rgb(31 41 55); }
.dark .dark\:text-gray-100 { color: rgb(243 244 246); }
.dark .dark\:text-gray-300 { color: rgb(209 213 219); }
.hover\:border-gray-300:hover { border-color: rgb(209 213 219); }
@media print { .print\:hidden { display: none !important; } }