/* ============================================================
   eCourse.my — Custom CSS
   Extends Tailwind with project-specific styles
   ============================================================ */

/* ── Navbar Links ─────────────────────────────────────────── */
/* Plain CSS (no @apply) so they always render correctly even with Tailwind CDN. */
.nav-link {
    color: #dbeafe;                /* tailwind blue-100 */
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s, background-color 0.15s;
}
.nav-link:hover {
    color: #ffffff;
    background-color: #1d4ed8;     /* tailwind blue-700 */
}
.mobile-nav-link {
    display: block;
    color: #dbeafe;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s, background-color 0.15s;
}
.mobile-nav-link:hover {
    color: #ffffff;
    background-color: #1d4ed8;
}
.footer-link {
    color: #bfdbfe;                /* tailwind blue-200 */
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s;
}
.footer-link:hover {
    color: #ffffff;
}

/* ── Dropdown ─────────────────────────────────────────────── */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    width: 13rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    border: 1px solid #f3f4f6;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 50;
}
.dark .dropdown-menu {
    background-color: #1f2937;     /* gray-800 */
    border-color: #374151;         /* gray-700 */
}
.group:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}
.dropdown-item {
    display: block;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: #374151;                /* gray-700 */
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}
.dark .dropdown-item {
    color: #e5e7eb;                /* gray-200 */
}
.dropdown-item:hover {
    background-color: #f9fafb;     /* gray-50 */
    color: #F97316;                /* brand-orange */
}
.dark .dropdown-item:hover {
    background-color: #374151;
    color: #F97316;
}
.dropdown-menu .dropdown-item:first-child { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; }
.dropdown-menu .dropdown-item:last-child  { border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem; }

/* ── Language Buttons ─────────────────────────────────────── */
.lang-btn {
    @apply text-xs font-semibold px-2.5 py-1 rounded-md text-blue-200 hover:text-white hover:bg-blue-600 transition-colors;
}
.lang-btn-active {
    @apply bg-brand-orange text-white;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
    @apply inline-flex items-center justify-center gap-2 bg-brand-orange hover:bg-orange-600 text-white font-semibold px-6 py-3 rounded-xl transition-all duration-150 shadow-sm hover:shadow-md;
}
.btn-secondary {
    @apply inline-flex items-center justify-center gap-2 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 font-semibold px-6 py-3 rounded-xl border border-gray-200 dark:border-gray-600 transition-all duration-150;
}
.btn-outline {
    @apply inline-flex items-center justify-center gap-2 border-2 border-brand-orange text-brand-orange hover:bg-brand-orange hover:text-white font-semibold px-6 py-3 rounded-xl transition-all duration-150;
}
.btn-danger {
    @apply inline-flex items-center justify-center gap-2 bg-red-600 hover:bg-red-700 text-white font-semibold px-4 py-2 rounded-lg transition-colors;
}
.btn-sm {
    @apply px-4 py-2 text-sm rounded-lg;
}
.btn-xs {
    @apply px-3 py-1 text-xs rounded-md;
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
    @apply bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700;
}
.card-hover {
    @apply card hover:shadow-lg hover:-translate-y-1 transition-all duration-200;
}
.stat-card {
    @apply card p-6 flex items-center gap-4;
}

/* ── Forms ────────────────────────────────────────────────── */
.form-input {
    @apply w-full px-4 py-3 border border-gray-200 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:border-transparent transition-all duration-150;
}
.form-label {
    @apply block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5;
}
.form-error {
    @apply text-red-500 text-sm mt-1;
}
.form-group {
    @apply mb-4;
}
.form-select {
    @apply form-input appearance-none cursor-pointer;
}
.form-textarea {
    @apply form-input resize-y min-h-[120px];
}

/* ── Section Heading ──────────────────────────────────────── */
.section-title {
    @apply text-2xl font-bold text-gray-900 dark:text-white;
}
.section-subtitle {
    @apply text-gray-500 dark:text-gray-400 mt-1;
}

/* ── Flash Messages ───────────────────────────────────────── */
.flash-success {
    @apply bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200;
}
.flash-error {
    @apply bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200;
}
.flash-warning {
    @apply bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-200;
}
.flash-info {
    @apply bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200;
}

/* ── Progress Bar ─────────────────────────────────────────── */
.progress-track {
    @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden;
}
.progress-fill {
    @apply h-2 bg-brand-orange rounded-full transition-all duration-500;
}

/* ── Table ────────────────────────────────────────────────── */
.data-table {
    @apply min-w-full text-sm text-left;
}
.data-table thead tr {
    @apply bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-600;
}
.data-table th {
    @apply px-5 py-3.5 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider whitespace-nowrap;
}
.data-table td {
    @apply px-5 py-4 text-gray-700 dark:text-gray-200 border-b border-gray-100 dark:border-gray-700;
}
.data-table tbody tr {
    @apply hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors;
}
.data-table tbody tr:last-child td {
    @apply border-b-0;
}

/* ── Lesson Reading Area ──────────────────────────────────── */
/* Applied to the text content in lesson.php. The picker above the content
   swaps between sans/serif/mono families and toggles the large size class.
   Choice persists in localStorage per browser. */
.lesson-prose {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: #374151;
    -webkit-font-smoothing: antialiased;
}
.dark .lesson-prose { color: #d1d5db; }
.lesson-prose-sans  { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.lesson-prose-serif { font-family: 'Lora', Georgia, 'Times New Roman', serif; }
.lesson-prose-mono  { font-family: 'JetBrains Mono', ui-monospace, Menlo, Monaco, monospace; font-size: 14.5px; }
.lesson-prose-large { font-size: 18px; line-height: 1.85; }
.lesson-prose-large.lesson-prose-mono { font-size: 16.5px; }

.lesson-prose p          { margin: 0 0 1em; }
.lesson-prose p:last-child { margin-bottom: 0; }
.lesson-prose h1, .lesson-prose h2, .lesson-prose h3 { font-weight: 700; line-height: 1.3; margin: 1.3em 0 0.5em; color: #111827; }
.dark .lesson-prose h1, .dark .lesson-prose h2, .dark .lesson-prose h3 { color: #f9fafb; }
.lesson-prose h1 { font-size: 1.55em; }
.lesson-prose h2 { font-size: 1.3em; }
.lesson-prose h3 { font-size: 1.12em; }
/* Lists.
   Tailwind preflight strips list markers from ul/ol, so we restore them
   explicitly here. We also handle Quill 2's quirky markup where bullet
   lists are stored as <ol><li data-list="bullet"> — that targets pre-
   getSemanticHTML() saves so legacy content keeps its bullets without
   needing a re-save. */
.lesson-prose ul, .lesson-prose ol     { margin: 0 0 1em; padding-left: 1.5em; }
.lesson-prose ul                       { list-style: disc outside; }
.lesson-prose ol                       { list-style: decimal outside; }
.lesson-prose ul ul                    { list-style: circle outside; }
.lesson-prose ul ul ul                 { list-style: square outside; }
.lesson-prose li                       { margin-bottom: 0.4em; }
.lesson-prose ol li[data-list="bullet"]  { list-style: disc outside; }
.lesson-prose ol li[data-list="ordered"] { list-style: decimal outside; }
.lesson-prose a  { color: #F97316; text-decoration: underline; text-underline-offset: 2px; }
.lesson-prose a:hover { color: #ea6d0c; }
.lesson-prose strong { font-weight: 600; color: #111827; }
.dark .lesson-prose strong { color: #f3f4f6; }
.lesson-prose blockquote { border-left: 4px solid #FED7AA; padding: 0.4em 1em; margin: 1em 0; color: #6b7280; font-style: italic; background: #FFF7ED; border-radius: 0 8px 8px 0; }
.dark .lesson-prose blockquote { background: rgba(249,115,22,0.08); color: #d1d5db; }
.lesson-prose code { background: #f3f4f6; padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; color: #BE185D; }
.dark .lesson-prose code { background: #1f2937; color: #F9A8D4; }
.lesson-prose pre { background: #1f2937; color: #f3f4f6; padding: 1em; border-radius: 8px; overflow-x: auto; margin: 1em 0; }
.lesson-prose pre code { background: transparent; color: inherit; padding: 0; }
.lesson-prose img { max-width: 100%; border-radius: 8px; margin: 1em 0; }

/* Picker buttons — pill group at top of reading card */
.lesson-font-bar {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.lesson-font-group {
    display: inline-flex;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.dark .lesson-font-group { background: #1f2937; border-color: #374151; }
.lesson-font-btn,
.lesson-size-btn {
    padding: 5px 12px;
    border: 0;
    background: transparent;
    color: #6b7280;
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, color .15s;
    font-size: 12px;
}
.lesson-font-btn:hover,
.lesson-size-btn:hover { color: #111827; }
.dark .lesson-font-btn:hover,
.dark .lesson-size-btn:hover { color: #f3f4f6; }
.lesson-font-btn.active,
.lesson-size-btn.active {
    background: #F97316;
    color: #ffffff;
}
.lesson-font-btn.active:hover,
.lesson-size-btn.active:hover { color: #ffffff; }

/* ── Video Responsive Container ───────────────────────────── */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
}
.video-container iframe,
.video-container video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

/* ── Video poster (click-to-play thumbnail) ───────────────── */
.video-poster {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #0f172a;
    overflow: hidden;
}
.video-poster img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.video-poster:hover img { transform: scale(1.03); }
/* Subtle scrim only on hover — keeps the thumbnail clean by default */
.video-poster::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,0);
    pointer-events: none;
    transition: background .2s ease;
}
.video-poster:hover::after {
    background: rgba(0,0,0,0.25);
}
/* Play button hidden until hover so it doesn't obscure the artwork */
.video-poster-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 84px; height: 84px;
    background: rgba(255,255,255,0.96);
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.video-poster:hover .video-poster-play,
.video-poster:focus-visible .video-poster-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background: #ffffff;
}
.video-poster-play svg {
    width: 36px; height: 36px;
    color: #F97316;
    margin-left: 4px;
}
/* Touch devices have no hover — show the play button by default there */
@media (hover: none) {
    .video-poster-play {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
@media (max-width: 640px) {
    .video-poster-play { width: 64px; height: 64px; }
    .video-poster-play svg { width: 28px; height: 28px; }
}

/* ── Certificate ──────────────────────────────────────────── */
.certificate-page {
    width: 297mm;
    min-height: 210mm;
    margin: 0 auto;
    background: white;
    position: relative;
}
@media print {
    body * { visibility: hidden; }
    .certificate-page, .certificate-page * { visibility: visible; }
    .certificate-page { position: absolute; left: 0; top: 0; }
    .no-print { display: none !important; }
    nav { display: none !important; }
    footer { display: none !important; }
}

/* ── Accordion ────────────────────────────────────────────── */
.accordion-content {
    display: none;
}
.accordion-content.open {
    display: block;
}

/* ── Scrollbar ────────────────────────────────────────────── */
.thin-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #F97316 #1E3A5F;
}
.thin-scrollbar::-webkit-scrollbar { width: 6px; }
.thin-scrollbar::-webkit-scrollbar-track { background: #1E3A5F; }
.thin-scrollbar::-webkit-scrollbar-thumb { background: #F97316; border-radius: 3px; }

/* ── Course Card ──────────────────────────────────────────── */
.course-card {
    @apply card-hover overflow-hidden cursor-pointer;
}
.course-card .thumbnail {
    @apply w-full aspect-video object-cover bg-gray-200 dark:bg-gray-700;
}
.course-card .body {
    @apply p-5;
}

/* ── Page Layout ──────────────────────────────────────────── */
.page-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8;
}
.page-header {
    @apply flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.tab-btn {
    @apply px-4 py-2 text-sm font-medium rounded-lg transition-colors text-gray-600 dark:text-gray-400 hover:text-brand-orange;
}
.tab-btn.active {
    @apply bg-brand-orange text-white;
}

/* ── Table Action Buttons ─────────────────────────────────── */
/* Plain CSS (no @apply) so they always render correctly */
.action-btn {
    display: inline-flex; align-items: center; padding: 0.3rem 0.7rem;
    font-size: 0.72rem; font-weight: 600; border-radius: 0.5rem;
    background-color: #F3F4F6; color: #374151; white-space: nowrap;
    transition: background-color 0.15s; border: none; cursor: pointer; text-decoration: none; line-height: 1.4;
}
.dark .action-btn { background-color: #374151; color: #D1D5DB; }
.action-btn:hover { background-color: #E5E7EB; }
.dark .action-btn:hover { background-color: #4B5563; }
.action-btn-primary { background-color: #F97316; color: #fff; }
.action-btn-primary:hover { background-color: #EA580C; }
.action-btn-success { background-color: #DCFCE7; color: #166534; }
.dark .action-btn-success { background-color: rgba(34,197,94,0.15); color: #86EFAC; }
.action-btn-success:hover { background-color: #BBF7D0; }
.action-btn-warning { background-color: #FEF9C3; color: #92400E; }
.dark .action-btn-warning { background-color: rgba(234,179,8,0.15); color: #FDE047; }
.action-btn-warning:hover { background-color: #FEF08A; }
.action-btn-danger { background-color: #FEE2E2; color: #B91C1C; }
.dark .action-btn-danger { background-color: rgba(239,68,68,0.15); color: #FCA5A5; }
.action-btn-danger:hover { background-color: #FECACA; }

/* ── Utility ──────────────────────────────────────────────── */
.text-gradient {
    background: linear-gradient(135deg, #F97316, #1E3A5F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-gradient {
    background: linear-gradient(135deg, #1E3A5F 0%, #2B5080 50%, #1a2f4e 100%);
}