/* Direct MCLE app theme: dark "glass". A deep navy canvas with a blue glow rising from below and a purple one at
   the lower left, frosted translucent panels, a pill navigation bar, bold Inter headlines and gradient buttons.
   Every colour comes from the tokens below, so the palette is tuned in one place. The palette is fixed on purpose
   (it is the look of the product, not derived from a brand colour). This stylesheet is for the app only; the
   marketing site (directmcle.com) has its own. Inter is self-hosted (SIL OFL licence in /assets/fonts/). */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
}

:root {
    color-scheme: dark;

    --accent: hsl(200 72% 62%);
    --accent-soft: hsl(200 80% 74%);
    --accent-glow: hsl(200 72% 55% / 0.5);
    --purple: hsl(266 62% 58%);
    --btn-top: hsl(200 72% 37%);
    --btn-bottom: hsl(206 72% 29%);

    --bg: #0a1226;
    --field: rgba(7, 12, 26, 0.55);
    --surface-2: rgba(148, 170, 220, 0.12);
    --ink: #f2f6fc;
    --muted: #9aa9c4;
    --border: rgba(148, 170, 220, 0.18);
    --border-strong: rgba(148, 170, 220, 0.34);
    --danger: #ff8f8f;
    --ok: #4ade80;
    --radius: 22px;
    --radius-sm: 12px;
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    /* The glass: a faint light-to-clear sheen over a dark base, a lit top edge, soft depth. The dark base keeps the
       glow behind a panel from washing out the text on it (contrast stays above 4.5:1 even over the brightest glow). */
    --glass-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)), rgba(10, 18, 38, 0.6);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 24px 60px -30px rgba(0, 0, 0, 0.85);
    --glass-blur: blur(16px);
    --glass-solid: rgba(20, 32, 62, 0.94); /* used where the browser cannot blur what is behind a panel */
}

* { box-sizing: border-box; }

/* An author `display` (flex on buttons, modals...) beats the browser's own [hidden] rule; keep `hidden` meaning hidden. */
[hidden] { display: none !important; }

body {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    background: var(--bg);
    color: var(--ink);
}

/* The glows and a few faint specks, fixed behind everything: blue from the bottom, purple at the lower left. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 255, 255, 0.55), transparent),
        radial-gradient(1.5px 1.5px at 84% 14%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 68% 38%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 27% 64%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1.5px 1.5px at 91% 71%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(38% 40% at 10% 92%, hsl(266 60% 46% / 0.42), transparent 70%),
        radial-gradient(60% 45% at 55% 115%, var(--accent-glow), transparent 72%),
        radial-gradient(45% 35% at 85% -5%, hsl(220 70% 50% / 0.16), transparent 70%),
        linear-gradient(180deg, #0a1226 0%, #0d1830 60%, #111d3a 100%);
}

a { color: var(--accent); }
a:hover { color: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1 { margin: 0 0 16px; font-size: clamp(1.7rem, 4.2vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
h2 { margin: 32px 0 12px; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
h3 { margin: 24px 0 8px; font-size: 1.05rem; }
p { margin: 0 0 14px; }

/* ---------- Top bar: logo left, pill navigation centred, actions right ---------- */
.site-bar {
    position: relative;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 14px 32px;
    border-bottom: 1px solid var(--border);
    background: rgba(10, 18, 38, 0.6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
/* The logo is dark text meant for a light page, so it sits on a white rounded backing (as on the course flyer). */
.site-branding {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
}
.site-logo { display: block; height: 34px; width: auto; }
.site-bar-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.site-nav {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.nav-item { position: relative; }
.nav-link {
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 999px;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s;
}
.nav-link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); }
.nav-link[aria-current="page"] { background: rgba(255, 255, 255, 0.11); }
.nav-caret { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); }
/* The dropdown: a dark glass panel, accent titles, a bar on the item you point at. Opens on hover or keyboard focus. */
.nav-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    min-width: 300px;
    padding: 8px;
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    background: rgba(14, 24, 48, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 70px -20px rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } /* keeps hover alive across the gap */
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-menu a {
    display: block;
    padding: 12px 16px;
    border-left: 3px solid transparent;
    border-radius: 12px;
    color: var(--muted);
    text-decoration: none;
}
.nav-menu a strong { display: block; color: var(--accent); font-size: 1.02rem; font-weight: 600; }
.nav-menu a span { font-size: 0.9rem; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: rgba(255, 255, 255, 0.06); border-left-color: var(--accent); color: var(--ink); outline: none; }
.site-nav--phone-only { display: none; }
@media (max-width: 760px) {
    .site-nav--phone-only { display: flex; }
    .nav-only-desktop { display: none; }
    .site-logo { height: 30px; }
    .site-bar { grid-template-columns: 1fr auto; row-gap: 12px; padding: 12px 20px; }
    .site-bar-actions { grid-column: 2; grid-row: 1; }
    .site-nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center; }
    .nav-menu { display: none; } /* on a phone the "Admin" pill goes straight to the admin home */
}

/* ---------- Page frame ---------- */
.site-main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 40px 24px 72px; }
.site-footer {
    padding: 22px 24px;
    border-top: 1px solid var(--border);
    background: rgba(10, 18, 38, 0.5);
    color: var(--muted);
    font-size: 0.875rem;
    text-align: center;
}
.site-footer p { margin: 0 0 6px; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

/* ---------- Glass panels ---------- */
.card, .auth-form form, .form-card, .course-card, .course-detail, .module-sidebar, .module-list li, .rating, .modal-content {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .card, .auth-form form, .form-card, .course-card, .course-detail, .module-sidebar, .module-list li, .rating, .modal-content { background: var(--glass-solid); }
}
.card { padding: 22px 24px; margin: 0 0 18px; }
.card > h2:first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card ul { margin: 0 0 12px; padding-left: 20px; }
.card li { margin-bottom: 6px; }

/* ---------- Buttons ---------- */
/* Quiet by default; submit buttons and .cta get the gradient and glow. */
button, .btn-quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--ink);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: filter 0.15s, border-color 0.15s;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.5; cursor: default; }
/* No general `button:active { transform }`: it would override the transform some buttons rely on to stay put. */
.cta, button[type="submit"]:not(.link-button):not(.btn-quiet) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom));
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 22px -8px var(--accent-glow);
    transition: filter 0.15s;
}
.cta:hover, button[type="submit"]:not(.link-button):not(.btn-quiet):hover:not(:disabled) { color: #fff; border-color: transparent; filter: brightness(1.06); }
/* A call to action ends with an arrow, drawn as a mask so it takes the text colour. */
.cta::after, .auth-form button[type="submit"]::after, .form-card > button[type="submit"]::after {
    content: "";
    width: 1.1em;
    height: 1.1em;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-bar .cta { padding: 8px 18px; }
.site-bar .cta::after { display: none; }
/* Small text-style actions inside tables and lists (Publish, Resend, Upload Video, Log out). */
.link-button, .site-bar-actions .btn-quiet {
    padding: 6px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 500;
}
.link-button:hover:not(:disabled), .site-bar-actions .btn-quiet:hover { color: var(--ink); border-color: var(--accent); background: rgba(255, 255, 255, 0.06); }
.inline-form { display: inline; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Forms ---------- */
form { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 0.9rem; font-weight: 500; }
label.check-label { flex-direction: row; align-items: center; gap: 10px; color: var(--ink); }
input, textarea, select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--field);
    color: var(--ink);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder, textarea::placeholder { color: #7183a3; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px hsl(200 72% 55% / 0.28); }
/* Radios and checkboxes are drawn here (not left to the browser) so an unchecked one stays visible on navy in every browser. */
input[type="checkbox"], input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 2px solid var(--muted);
    background: transparent;
    cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"] { border-radius: 5px; }
input[type="radio"]:checked { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 42%, transparent 48%); }
input[type="checkbox"]:checked {
    border-color: var(--accent);
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307101f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 100% no-repeat;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
input[type="file"] { padding: 8px 10px; font-size: 0.9rem; }
textarea { resize: vertical; }
select option { background: #101a33; color: var(--ink); }
fieldset { margin: 0; padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
legend { padding: 0 6px; color: var(--muted); font-size: 0.85rem; }
progress { width: 140px; height: 8px; accent-color: var(--accent); }
.form-card { max-width: 640px; padding: 24px; }
/* A form's action button is as wide as its label; on the sign-in/sign-up cards it spans the card instead. */
form > button[type="submit"], form > .cta { align-self: flex-start; }
.auth-form form > button[type="submit"] { align-self: stretch; }
.form-errors {
    margin: 0 0 16px;
    padding: 12px 18px 12px 36px;
    border: 1px solid rgba(255, 143, 143, 0.45);
    border-radius: var(--radius-sm);
    background: rgba(255, 143, 143, 0.1);
    color: var(--danger);
}

/* ---------- Sign-in / sign-up / evaluation ---------- */
.auth-form { max-width: 480px; margin: 8px auto 0; }
.auth-form h1 { text-align: center; }
.auth-form > p { color: var(--muted); }
.auth-form form { padding: 26px; }
.auth-form form button[type="submit"] { margin-top: 6px; }
.evaluation-form { max-width: 720px; }
.evaluation-form h1 { text-align: left; }
.rating { margin: 0 0 14px; padding: 14px 18px; }
.rating legend { padding: 0 6px; color: var(--ink); font-size: 0.95rem; font-weight: 600; }
.evaluation-form .rating-option { flex-direction: row; align-items: center; gap: 10px; color: var(--ink); font-weight: 400; font-size: 0.95rem; }

/* ---------- Home ---------- */
.hero { padding: 56px 0 24px; text-align: center; }
.hero h1 {
    margin-bottom: 18px;
    font-size: clamp(2.4rem, 7vw, 4rem);
    line-height: 1.05;
    background: linear-gradient(180deg, #fff, var(--accent-soft));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-soft);
}
.hero p { max-width: 560px; margin: 0 auto 18px; color: var(--muted); font-size: 1.15rem; }

/* ---------- Catalog and course pages ---------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 24px; }
.course-card { display: block; padding: 22px; color: var(--ink); text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.course-card:hover { color: var(--ink); border-color: hsl(200 72% 62% / 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 50px -22px var(--accent-glow); transform: translateY(-1px); }
.course-card h2 { margin: 0 0 8px; font-size: 1.15rem; }
.course-card p { color: var(--muted); font-size: 0.95rem; }
.course-detail { max-width: 820px; margin: 0 auto; padding: 30px; }
.course-detail > :last-child { margin-bottom: 0; }
.price { font-size: 1.25rem; font-weight: 800; color: var(--ink) !important; }
.badge, .badge-red, .pill {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 3px 12px;
    border: 1px solid hsl(200 72% 55% / 0.5);
    border-radius: 999px;
    background: hsl(200 72% 55% / 0.1);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 600;
}
.badge-red { border-color: rgba(255, 143, 143, 0.5); background: rgba(255, 143, 143, 0.1); color: var(--danger); }
.pill { border-color: var(--border-strong); background: transparent; color: var(--muted); }
.pill.ok { border-color: rgba(74, 222, 128, 0.45); background: rgba(74, 222, 128, 0.1); color: var(--ok); }
.pill.busy { border-color: hsl(200 72% 55% / 0.5); background: hsl(200 72% 55% / 0.1); color: var(--accent); }

/* ---------- Admin ---------- */
.admin-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.admin-header h1 { margin: 0; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.button-link {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.button-link:hover { color: var(--ink); border-color: var(--accent); background: rgba(255, 255, 255, 0.08); }
.table-wrap {
    margin: 12px 0 8px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow);
}
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.admin-table th { color: var(--muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
@media (max-width: 760px) {
    .admin-table th, .admin-table td { padding: 10px 12px; font-size: 0.9rem; }
    .admin-table td { min-width: 6.5rem; }
}
.module-list { margin: 8px 0 18px; padding: 0; list-style: none; display: grid; gap: 12px; }
.module-list li { padding: 16px 18px; }
.module-list li > span { margin-left: 8px; color: var(--ok); font-size: 0.85rem; }
.materials-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 12px 0 4px; }
.materials-form label { flex: 1 1 200px; }

/* ---------- Dashboard, catalog, admin: centred reading columns ---------- */
.dashboard, .catalog, .admin { max-width: 960px; margin: 0 auto; }
.dashboard h1, .catalog h1 { margin-bottom: 22px; }

.error-page { padding: 48px 0; text-align: center; }
.completion-banner {
    margin: 14px 0 0;
    padding: 12px 18px;
    border: 1px solid rgba(74, 222, 128, 0.45);
    border-radius: var(--radius-sm);
    background: rgba(74, 222, 128, 0.1);
    color: var(--ok);
}
.completion-banner a { color: var(--accent-soft); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}