/*
 * 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 */

/* =========================================================================
 * Academy / Learn (/admin/learn, /admin/course) — utility còn thiếu no-build.
 * Blade đã thiết kế sẵn (card lưới, progress bar, note box); các class này
 * chưa được biên dịch nên layout vỡ (lưới 1 cột, card không padding, bar tàng
 * hình). Thêm đúng thang Tailwind để render như thiết kế.
 * ===================================================================== */

/* Lưới responsive (Filament chỉ ship grid-cols-1) */
@media (min-width: 640px)  { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:col-span-2  { grid-column: span 2 / span 2; }
}

/* flex / sizing */
.flex-none { flex: none; }
.h-2  { height: 0.5rem; }   /* progress bar */
.w-40 { width: 10rem; }

/* padding */
.p-5  { padding: 1.25rem; } /* 20px — thân card khoá học */
.p-10 { padding: 2.5rem; }  /* 40px — empty state */
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }

/* margin nhỏ */
.mb-1   { margin-bottom: 0.25rem; }  /* 4px */
.mt-0\.5 { margin-top: 0.125rem; }   /* 2px */
.mt-1\.5 { margin-top: 0.375rem; }   /* 6px */

/* text */
.tracking-wide { letter-spacing: 0.025em; }
.uppercase     { text-transform: uppercase; }
.text-gray-900 { color: rgba(var(--gray-900), 1); }
.line-clamp-3  {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* border */
.border-l-4     { border-left-width: 4px; }
.border-dashed  { border-style: dashed; }

/* primary shades còn thiếu (dùng biến palette của Filament) */
.bg-primary-50   { background-color: rgba(var(--primary-50), 1); }
.text-primary-700 { color: rgba(var(--primary-700), 1); }
.dark\:text-primary-300:is(.dark *)   { color: rgba(var(--primary-300), 1); }
.dark\:bg-primary-500\/10:is(.dark *) { background-color: rgba(var(--primary-500), 0.1); }
.dark\:border-white\/15:is(.dark *)   { border-color: hsla(0, 0%, 100%, 0.15); }

/* Resources: ảnh bìa + zoom hover + share link */
.aspect-video { aspect-ratio: 16 / 9; }
.scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
[x-cloak] { display: none !important; }

/* Code block + nút Copy (SafeMarkdown, dùng cho Article & Lesson content) */
.smd-code { position: relative; }
.smd-code .smd-copy {
    position: absolute; top: 0.5rem; right: 0.5rem; z-index: 1;
    font-size: 11px; line-height: 1; padding: 4px 8px; border-radius: 6px;
    border: 1px solid rgba(var(--gray-300), 1);
    background-color: rgba(var(--gray-50), 1);
    color: rgba(var(--gray-600), 1);
    cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.smd-code:hover .smd-copy,
.smd-code .smd-copy:focus { opacity: 1; }
.dark .smd-code .smd-copy {
    border-color: hsla(0, 0%, 100%, 0.15);
    background-color: hsla(0, 0%, 100%, 0.08);
    color: rgba(var(--gray-300), 1);
}

/* QuickShortenWidget (Dashboard) — class Tailwind no-build không build sẵn.
   Filament breakpoint sm = 640px. Kiểm bằng: grep class trong public/css/filament/filament/app.css */
.break-all { word-break: break-all; }
.placeholder-gray-400::placeholder { color: rgba(var(--gray-400), 1); }
.border-primary-200 { border-color: rgba(var(--primary-200), 1); }
.dark\:border-primary-500\/30:is(.dark *) { border-color: rgba(var(--primary-500), 0.3); }
@media (min-width: 640px) {
    .sm\:w-48      { width: 12rem; }
    .sm\:flex-row  { flex-direction: row; }
    .sm\:items-end { align-items: flex-end; }
}