/* ========================================================
   FMScmru.cloud — global website styling (Design 4d Blue)
   Applied to all server-rendered Frappe pages via hooks.py
   ======================================================== */

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

:root {
    --fm-coral: #2B7FCE;
    --fm-coral-dark: #1E3A8A;
    --fm-amber: #FBBF24;
    --fm-sky: #8EC5E8;
    --fm-cream: #F0F7FF;
    --fm-cream-2: #DBEAFE;
    --fm-ink-1: #0F172A;
    --fm-ink-2: #475569;
}

body, body.website {
    font-family: 'Sarabun', sans-serif !important;
    background: var(--fm-cream) !important;
    color: var(--fm-ink-1);
}

/* Hide Frappe default navbar + footer on all website pages
   (we provide our own custom navbar on pages that need one) */
.navbar.navbar-expand-lg.website-top-bar,
.navbar-light.navbar-expand-lg,
body > nav.navbar,
.web-footer, footer.web-footer, .footer-powered,
#navbar-breadcrumbs, .breadcrumb-container {
    display: none !important;
}

/* Primary buttons -> blue with neobrutalism accent */
.btn-primary {
    background: var(--fm-coral) !important;
    border: 2px solid var(--fm-ink-1) !important;
    box-shadow: 3px 3px 0 var(--fm-ink-1) !important;
    color: white !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    transition: all .15s;
}
.btn-primary:hover {
    background: var(--fm-coral-dark) !important;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--fm-ink-1) !important;
}

/* Links */
a { color: var(--fm-coral); }
a:hover { color: var(--fm-coral-dark); }

/* Form controls */
.form-control, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], select, textarea {
    background: var(--fm-cream) !important;
    border: 2px solid var(--fm-ink-1) !important;
    border-radius: 12px !important;
    font-family: 'Sarabun', sans-serif !important;
}
.form-control:focus {
    background: white !important;
    box-shadow: 3px 3px 0 var(--fm-coral) !important;
    outline: none !important;
}

/* Ensure our custom .fm-home / .fmscmru-signup pages ignore the hide rule above */
.fm-home .nav, .fmscmru-signup .nav {
    display: flex !important;
}

/* Checkbox — plain native style, no shadow, FMScmru blue */
input[type="checkbox"] {
    all: revert !important;
    cursor: pointer !important;
    accent-color: #2B7FCE !important;
    width: 14px !important;
    height: 14px !important;
    box-shadow: none !important;
}
input[type="checkbox"]:focus,
input[type="checkbox"]:hover {
    box-shadow: none !important;
    outline: none !important;
}

/* ====================================================
   Vue LMS SPA — ปรับ style ให้สอดคล้องกับ allcourse
   ==================================================== */

/* พื้นหลังหน้าหลัก (DesktopLayout main content) */
#app .flex-1.flex.flex-col.overflow-auto {
    background: var(--fm-cream) !important;
}

/* Header breadcrumb bar ในหน้ารายวิชา */
#app header.sticky {
    background: white !important;
    border-bottom: 3px solid var(--fm-ink-1) !important;
    box-shadow: 0 3px 0 rgba(15,23,42,0.06) !important;
}

/* Sidebar background */
#app .bg-surface-menu-bar {
    background: var(--fm-cream-2) !important;
}

/* CourseCardOverlay card — neobrutalism */
#app .border-2.rounded-md {
    border: 3px solid var(--fm-ink-1) !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 0 var(--fm-ink-1) !important;
    background: white !important;
}

/* Frappe UI solid button (Start Learning / Continue Learning) → amber neobrutalism */
#app button.bg-surface-gray-7 {
    background: var(--fm-amber) !important;
    color: var(--fm-ink-1) !important;
    border: 2px solid var(--fm-ink-1) !important;
    box-shadow: 3px 3px 0 var(--fm-ink-1) !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    transition: all .15s !important;
}
#app button.bg-surface-gray-7:hover {
    background: #F59E0B !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 4px 4px 0 var(--fm-ink-1) !important;
}

/* Course title */
#app .text-3xl.font-semibold {
    font-family: 'Sarabun', sans-serif !important;
    font-weight: 800 !important;
    color: var(--fm-ink-1) !important;
}

/* This course has: section info */
#app .font-medium.text-ink-gray-9 {
    font-family: 'Sarabun', sans-serif !important;
    font-weight: 700 !important;
}