/*
 * dashboard-extras.css
 * Bổ sung các utility Tailwind THIẾU trong CSS biên dịch sẵn của Filament
 * (dashboard chạy no-build nên chỉ có các class Filament tự dùng).
 * Giá trị theo đúng thang Tailwind để class trong blade hoạt động như mong đợi.
 *
 * Quy ước khoảng cách dùng trong dashboard:
 *   - Giữa các box/section (dọc):   space-y-8 = 32px
 *   - Trong 1 card (nhóm nội dung):  space-y-5 = 20px
 *   - Padding dọc banner:            py-3.5    = 14px
 */

/* space-y còn thiếu (Filament chỉ có 1,2,3,4,6) */
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; } /* 20px */
.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }    /* 32px */

/* gap dọc lẻ */
.gap-y-2\.5 { row-gap: 0.625rem; } /* 10px */

/* padding dọc lẻ */
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; } /* 14px */

/* line-height */
.leading-relaxed { line-height: 1.625; }

/* margin-top còn thiếu */
.mt-4  { margin-top: 1rem; }    /* 16px */
.mt-8  { margin-top: 2rem; }    /* 32px */
.mt-10 { margin-top: 2.5rem; }  /* 40px */

/* arbitrary values dùng trong blade billing */
.min-h-\[2rem\]    { min-height: 2rem; }
.min-h-\[2\.5rem\] { min-height: 2.5rem; }
.text-\[10px\]     { font-size: 10px; line-height: 1; }

/* padding / gap lẻ còn thiếu (pill toggle Monthly/Yearly, badge, card...) */
.px-5    { padding-left: 1.25rem;  padding-right: 1.25rem; }   /* 20px */
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }  /* 10px */
.py-2\.5 { padding-top: 0.625rem;  padding-bottom: 0.625rem; } /* 10px */
.py-1\.5 { padding-top: 0.375rem;  padding-bottom: 0.375rem; } /* 6px */
.py-0\.5 { padding-top: 0.125rem;  padding-bottom: 0.125rem; } /* 2px */
.mb-3    { margin-bottom: 0.75rem; }                           /* 12px */
.gap-5   { gap: 1.25rem; }                                     /* 20px */
.gap-1\.5 { gap: 0.375rem; }                                   /* 6px */