/* ============================================================
   MMT Studio Academy — global design-system layer
   Loaded AFTER Bootstrap and the base.html inline styles, so the
   rules here win ties and lift every page of the LMS at once.
   ============================================================ */

:root {
    --mmt-brand:    #0f1d2e;
    --mmt-brand-2:  #1c3055;
    --mmt-accent:   #4ea1ff;
    --mmt-accent-2: #7c5cff;
    --mmt-grad:        linear-gradient(135deg, #4ea1ff 0%, #7c5cff 100%);
    --mmt-grad-deep:   linear-gradient(135deg, #2f7fe8 0%, #5b5bd6 100%);
    --mmt-grad-deep-h: linear-gradient(135deg, #2a74d6 0%, #5252c4 100%);
    --mmt-ink:   #16233a;
    --mmt-muted: #64748b;
    --mmt-line:  #e6eaf2;
    --mmt-card-shadow:    0 1px 2px rgba(15,29,46,.05), 0 8px 24px -12px rgba(15,29,46,.12);
    --mmt-card-shadow-lg: 0 2px 4px rgba(15,29,46,.06), 0 18px 44px -16px rgba(15,29,46,.22);
}

/* ---------- Typography & canvas ---------- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--mmt-ink);
    background-color: #f3f6fb;
    background-image:
        radial-gradient(1100px 380px at 85% -10%, rgba(78,161,255,.09), transparent 60%),
        radial-gradient(900px 320px at 5% -10%, rgba(124,92,255,.07), transparent 60%);
    background-attachment: fixed;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.015em; color: var(--mmt-ink); }
.text-muted, .text-secondary { color: var(--mmt-muted) !important; }

/* Gentle page entrance */
#main-content { animation: mmt-fade-up .35s ease both; }
@keyframes mmt-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Cards ---------- */
.card {
    border-radius: 16px !important;
    border: 1px solid var(--mmt-line);
    box-shadow: var(--mmt-card-shadow);
}
.card .card-header {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    border-bottom-color: var(--mmt-line);
}
.card .card-footer {
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

/* ---------- Buttons ---------- */
.btn { font-weight: 500; border-radius: 10px; transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease; }
.btn-primary {
    background: var(--mmt-grad-deep);
    border: 0;
    box-shadow: 0 4px 14px -6px rgba(47,127,232,.55);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--mmt-grad-deep-h);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(47,127,232,.7);
}
.btn-primary:active { transform: none; }
.btn-success { box-shadow: 0 4px 14px -6px rgba(46,161,77,.5); border: 0; }
.btn-success:hover { transform: translateY(-1px); }
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover { transform: translateY(-1px); }
.btn-sm { border-radius: 8px; }

/* ---------- Forms ---------- */
.form-control, .form-select { border-color: var(--mmt-line); }
.form-control:focus, .form-select:focus {
    border-color: var(--mmt-accent);
    box-shadow: 0 0 0 .22rem rgba(78,161,255,.15);
}
.input-group-text { border-color: var(--mmt-line); }

/* ---------- Dropdowns ---------- */
.dropdown-menu {
    border-radius: 14px;
    border: 1px solid var(--mmt-line);
    box-shadow: var(--mmt-card-shadow-lg);
    padding: .4rem;
}
.dropdown-item { border-radius: 9px; padding: .45rem .75rem; }
.dropdown-item:hover, .dropdown-item:focus { background: #eef4ff; }

/* ---------- Tables ---------- */
.table > thead th {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--mmt-muted); font-weight: 600; border-bottom-width: 1px;
}
.table-hover > tbody > tr:hover > * { background-color: #f4f8ff; }

/* ---------- Badges, pills, progress ---------- */
.badge { font-weight: 600; }
.progress { border-radius: 999px; background-color: #e9eef6; }
.progress-bar { border-radius: 999px; }
.progress-bar.bg-primary, .progress-bar:not([class*="bg-"]) { background: var(--mmt-grad-deep); }

/* ---------- Top navbar ---------- */
.mmt-topbar {
    box-shadow: 0 2px 18px rgba(8,15,30,.28);
    border-bottom: 1px solid rgba(78,161,255,.22);
}
.mmt-topbar .navbar-brand span { font-weight: 700; letter-spacing: .01em; }
.mmt-topbar .nav-link { border-radius: 9px; transition: background .15s ease; }
.mmt-topbar .nav-link:hover { background: rgba(255,255,255,.08); }

/* ---------- Sidebar ---------- */
.mmt-sidebar a.nav-item,
.offcanvas.mmt-sidebar-offcanvas a.nav-item {
    margin: 2px 10px;
    border-radius: 10px;
    padding: .55rem .8rem;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.mmt-sidebar a.nav-item:hover,
.offcanvas.mmt-sidebar-offcanvas a.nav-item:hover { transform: translateX(2px); }
.mmt-sidebar a.nav-item.active,
.offcanvas.mmt-sidebar-offcanvas a.nav-item.active {
    background: linear-gradient(90deg, rgba(78,161,255,.24), rgba(124,92,255,.16));
    border-left: 0;
    padding-left: .8rem;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(78,161,255,.35);
}
.mmt-sidebar .nav-section { letter-spacing: .1em; }

/* ---------- Hero headers (course detail, dashboards) ---------- */
.mmt-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}
.mmt-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(620px 230px at 88% -25%, rgba(78,161,255,.38), transparent 60%),
        radial-gradient(440px 210px at 8% 130%, rgba(124,92,255,.28), transparent 60%);
    pointer-events: none;
}

/* ---------- Admin/stat cards used across dashboards ---------- */
.stat-card {
    border-radius: 16px;
    border: 1px solid var(--mmt-line);
    box-shadow: var(--mmt-card-shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--mmt-card-shadow-lg); }

/* ---------- Accordions (course modules) ---------- */
.accordion-button:not(.collapsed) {
    background: #eef4ff;
    color: var(--mmt-brand-2);
    box-shadow: inset 0 -1px 0 var(--mmt-line);
}
.accordion-button:focus { box-shadow: 0 0 0 .22rem rgba(78,161,255,.15); }

/* ---------- Scrollbars (light surfaces) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background-color: #c6d0de;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #a9b8cc; }

/* ---------- Footer ---------- */
footer.bg-dark {
    background: linear-gradient(90deg, var(--mmt-brand) 0%, var(--mmt-brand-2) 100%) !important;
    border-top: 1px solid rgba(78,161,255,.18);
}