/* FutureFlow Innovations brand layer on top of futureflow.css (generated by tools/build_theme.py).
   Logo colours: orange #FA7802, green #7FC141, ink #211D1E. */
:root {
    --ff-orange: #FA7802;
    --ff-orange-deep: #F07400;
    --ff-orange-text: #B35300;   /* readable orange for text on white (AA contrast) */
    --ff-green: #7FC141;
    --ff-green-deep: #5E9A2A;
    --ff-ink: #211D1E;
}

/* DashLite reuses .gap-1 … .gap-5 as fixed-height spacer elements (.gap-3 { height: 1rem }),
   which collapses any flex row that also uses Bootstrap's gap utilities. Let flex rows size to content. */
[class*="d-flex"][class*="gap-"], [class*="d-inline-flex"][class*="gap-"] { height: auto; }

/* Logos: the FutureFlow wordmark is three lines tall, so give it more height than DashLite's default */
.nk-sidebar-logo .logo-img, .nk-header-brand .logo-img { max-height: 44px; }
.nk-sidebar-logo .logo-img-small { max-height: 36px; }
.nk-sidebar-head { min-height: 74px; }

/* Brand stripe under the header: orange to green, like the logo's bars */
.nk-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
    background: linear-gradient(90deg, var(--ff-orange) 0 50%, var(--ff-green) 50% 100%);
}

/* Links and primary text use a deeper orange so they stay readable on white */
a, .link-primary, .text-primary, .nk-menu-item.active > .nk-menu-link .nk-menu-text,
.nk-menu-link:hover .nk-menu-text { color: var(--ff-orange-text); }
.nk-menu-item.active > .nk-menu-link .nk-menu-icon, .nk-menu-link:hover .nk-menu-icon { color: var(--ff-orange); }
a:hover { color: #8C4100; }
.btn-primary { font-weight: 700; }
.text-success { color: var(--ff-green-deep) !important; }

/* Headings use the logo ink */
.page-title, .nk-block-title, .card-title .title, h1, h2, h3, h4, h5, h6 { color: var(--ff-ink); }

/* Tables: DashLite's default 0.5rem cell padding crowds two-line cells */
.table > :not(caption) > * > * { padding: .8rem .75rem; vertical-align: middle; }
.table > :not(caption) > * > *:first-child { padding-left: 1.25rem; }
.table > :not(caption) > * > *:last-child { padding-right: 1.25rem; }
.table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #526484; font-weight: 600; }

/* Dashboard charts */
:root { --ff-chart-accent: #F07400; --ff-chart-tint: rgba(240, 116, 0, .22); }
.ff-chart { position: relative; }
.ff-chart-sm { height: 96px; min-width: 200px; }
.ff-chart-area { height: 90px; }
.ff-donut { width: 180px; height: 180px; }
.ff-donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.ff-hero { font-size: 1.75rem; font-weight: 600; color: var(--ff-ink); line-height: 1.2; }
.dark-mode .ff-hero { color: #fff; }
.nk-sale-data .amount { font-size: 1.75rem; font-weight: 500; color: var(--ff-ink); }
.dark-mode .nk-sale-data .amount { color: #fff; }
.nk-sale-data .change { font-size: .8rem; font-weight: 500; margin-left: .25rem; }
.ff-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: 13px; color: #526484; }
.ff-legend li { display: flex; align-items: center; gap: .5rem; }
.ff-legend-col { flex-direction: column; gap: .6rem; min-width: 200px; }
.ff-legend-col li { width: 100%; }
.ff-key { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.ff-data { margin-top: .5rem; font-size: 12px; }
.ff-data summary { cursor: pointer; color: #8094ae; width: max-content; }
.ff-data summary:hover { color: var(--ff-orange-text); }
.ff-data table { margin-top: .5rem; }
.ff-data .table > :not(caption) > * > * { padding: .3rem .5rem; }

/* Unread count in the sidebar */
.nk-menu-badge.badge-ff { background: var(--ff-orange); color: #fff; border-radius: 10px; padding: 0 .45rem; font-weight: 700; margin-left: auto; }

/* Course level badges */
.badge-level { font-weight: 600; letter-spacing: .02em; }
.lvl-Beginner { background: #EAF5DF; color: #3F6B17; }
.lvl-Foundational { background: #FFF1E3; color: #8C4100; }
.lvl-Associate { background: #FFE2C4; color: #7A3800; }
.lvl-Professional { background: var(--ff-ink); color: #fff; }
.lvl-Specialty { background: #E1F0D2; color: #2F5410; }

/* Course cards */
.ff-course-card { border-top: 4px solid var(--ff-orange); height: 100%; }
.ff-course-card.is-programme { border-top-color: var(--ff-green); }
.ff-course-card .card-inner { display: flex; flex-direction: column; height: 100%; }
.ff-course-card .ff-course-foot { margin-top: auto; padding-top: 1rem; }

/* Assessment taking */
.ff-question { scroll-margin-top: 90px; }
.ff-question .custom-control { display: flex; padding: .65rem .9rem .65rem 2.6rem; border: 1px solid #e5e9f2; border-radius: 6px; margin-bottom: .5rem; }
.ff-question .custom-control:hover { border-color: var(--ff-orange); }
.ff-question .custom-control-label { width: 100%; cursor: pointer; }
.ff-question .custom-control-label::before, .ff-question .custom-control-label::after { left: -1.75rem; }
.ff-timer { position: sticky; top: 76px; z-index: 5; }
.ff-timer.is-low .ff-timer-value { color: #e85347; }
.ff-progress-nav a { width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid #dbdfea; margin: 0 .25rem .35rem 0; font-size: 12px; color: #526484; }
.ff-progress-nav a.answered { background: var(--ff-orange); border-color: var(--ff-orange); color: #fff; }

/* Result review */
.ff-opt { padding: .55rem .8rem; border-radius: 6px; border: 1px solid #e5e9f2; margin-bottom: .4rem; display: flex; gap: .6rem; align-items: flex-start; }
.ff-opt.is-correct { border-color: var(--ff-green); background: #F1F8EA; }
.ff-opt.is-wrong { border-color: #e85347; background: #FDF0EF; }
.ff-opt .icon { margin-top: 2px; }
.ff-score-ring { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--ring-color, var(--ff-orange)) calc(var(--pct) * 1%), #e5e9f2 0); }
.ff-score-ring > span { width: 92px; height: 92px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 1.6rem; font-weight: 700; color: var(--ff-ink); }

/* Sign out button styled like a dropdown link */
.link-signout { display: flex; align-items: center; gap: .75rem; color: #526484; font-size: 13px; font-weight: 500; text-decoration: none; padding: .575rem 0 !important; }
.link-signout .icon { font-size: 1.125rem; }
.link-signout:hover { color: var(--ff-orange-text); }

/* Auth pages */
.ff-auth-brand img { max-height: 96px; }
.ff-auth-side { background: var(--ff-ink); color: #fff; }
.ff-auth-side h3, .ff-auth-side h4 { color: #fff; }
.ff-auth-side .ff-bar { height: 6px; width: 72px; border-radius: 3px; background: var(--ff-orange); margin-bottom: .5rem; }
.ff-auth-side .ff-bar.green { background: var(--ff-green); }

/* Dark mode */
.dark-mode .page-title, .dark-mode .nk-block-title, .dark-mode .card-title .title, .dark-mode h1, .dark-mode h2, .dark-mode h3,
.dark-mode h4, .dark-mode h5, .dark-mode h6 { color: #fff; }
.dark-mode .ff-score-ring > span { background: #18212d; color: #fff; }
.dark-mode .ff-opt, .dark-mode .ff-question .custom-control { border-color: #384d69; }
.dark-mode .ff-opt.is-correct { background: rgba(127, 193, 65, .12); }
.dark-mode .ff-opt.is-wrong { background: rgba(232, 83, 71, .12); }
.dark-mode a, .dark-mode .text-primary { color: #FF9A3D; }

/* Setup checklists (icon + text rows) */
.ff-checklist li { margin-bottom: .75rem; }

/* ---------------------------------------------------------------- course content */
.ff-lesson { font-size: 15px; line-height: 1.7; }
.ff-lesson h4, .ff-lesson h5, .ff-lesson h6 { margin: 1.4rem 0 .6rem; }
.ff-lesson ul, .ff-lesson ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.ff-lesson ul { list-style: disc; }
.ff-lesson ol { list-style: decimal; }
.ff-lesson li { margin-bottom: .3rem; display: list-item; list-style: inherit; }
.ff-lesson code { background: #f5f6fa; color: #8C4100; padding: .1rem .35rem; border-radius: 4px; font-size: .9em; }
.ff-code { background: var(--ff-ink); color: #f5f6fa; padding: 1rem; border-radius: 6px; overflow-x: auto; font-size: 13px; }
.ff-code code { background: none; color: inherit; padding: 0; }
.ff-video { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; }
.ff-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ff-outline-card { position: sticky; top: 86px; }
.ff-outline { max-height: 65vh; overflow-y: auto; padding: .5rem 0; }
.ff-outline-module, .ff-module-head { font-weight: 700; font-size: 13px; color: var(--ff-ink); padding: .75rem 1.25rem .35rem; }
.ff-module-head { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; }
.ff-module + .ff-module { border-top: 1px solid #e5e9f2; }
.ff-module { padding-bottom: .5rem; }
.ff-outline-lesson { display: flex; align-items: center; gap: .6rem; padding: .45rem 1.25rem; color: #526484; font-size: 13.5px; text-decoration: none; border-left: 3px solid transparent; }
.ff-outline-lesson:hover { background: #f5f6fa; color: var(--ff-ink); }
.ff-outline-lesson .icon { font-size: 1.05rem; color: #8094ae; flex-shrink: 0; }
.ff-outline-lesson.is-done .icon { color: var(--ff-green-deep); }
.ff-outline-lesson.is-current { background: #FFF4EA; color: var(--ff-ink); border-left-color: var(--ff-orange); font-weight: 600; }
.ff-outline-lesson.is-locked { color: #8094ae; cursor: default; }
.ff-outline-lesson.is-locked:hover { background: none; }
.ff-continue { border-top: 4px solid var(--ff-orange); }
.dark-mode .ff-outline-lesson:hover { background: #1d2a39; }
.dark-mode .ff-outline-lesson.is-current { background: #2a2118; color: #fff; }
.dark-mode .ff-outline-module, .dark-mode .ff-module-head { color: #fff; }
.dark-mode .ff-module + .ff-module { border-color: #2b3748; }
.dark-mode .ff-lesson code { background: #1d2a39; color: #FFB36B; }

/* ---------------------------------------------------------------- exams */
.ff-progress-nav a.flagged { box-shadow: inset 0 0 0 2px #f4bd0e; }
.ff-progress-nav a.current { outline: 2px solid var(--ff-ink); outline-offset: 1px; }
.ff-key-flag { background: #fff; box-shadow: inset 0 0 0 2px #f4bd0e; }
.ff-review-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.ff-review-item { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .55rem .75rem; border: 1px solid #dbdfea; border-radius: 6px; background: #fff; font-size: 12px; color: #526484; text-align: left; }
.ff-review-item strong { font-size: 14px; color: var(--ff-ink); }
.ff-review-item.answered { border-color: var(--ff-orange); }
.ff-review-item.flagged { box-shadow: inset 0 0 0 2px #f4bd0e; }
.ff-review-item:not(.answered) span { color: #e85347; }
.ff-review-item:hover { background: #FFF4EA; }

/* ---------------------------------------------------------------- schedule */
.ff-session { display: flex; gap: 1rem; padding: .75rem 0; }
.ff-session + .ff-session { border-top: 1px solid #e5e9f2; }
.ff-session-date { width: 52px; flex-shrink: 0; text-align: center; border-radius: 6px; background: #FFF4EA; padding: .35rem 0; height: max-content; }
.ff-session-day { display: block; font-size: 1.25rem; font-weight: 700; color: var(--ff-ink); line-height: 1.1; }
.ff-session-mon { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8C4100; }
.ff-session.is-live .ff-session-date { background: var(--ff-green); }
.ff-session.is-live .ff-session-day, .ff-session.is-live .ff-session-mon { color: #fff; }
.ff-session.is-past { opacity: .6; }
.dark-mode .ff-session-date { background: #2a2118; }
.dark-mode .ff-session-day { color: #fff; }
.dark-mode .ff-session + .ff-session { border-color: #2b3748; }

/* ---------------------------------------------------------------- notifications */
.notification-dropdown .nk-quick-nav-icon { position: relative; }
.ff-bell-count { position: absolute; top: 0; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ff-orange); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.ff-notif { display: flex; gap: .75rem; align-items: center; padding: .8rem 1.25rem; color: #526484; text-decoration: none; border-bottom: 1px solid #e5e9f2; }
.ff-notif:last-child { border-bottom: 0; }
.ff-notif:hover { background: #f5f6fa; color: var(--ff-ink); }
.ff-notif.is-unread { background: #FFF8F1; }
.ff-notif.is-unread .fw-medium { color: var(--ff-ink); font-weight: 700 !important; }
.ff-notif-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: #f5f6fa; color: #526484; font-size: 1rem; }
.ff-notif-certificate { background: #EAF5DF; color: #3F6B17; }
.ff-notif-invoice { background: #FFF1E3; color: #8C4100; }
.ff-notif-class { background: #E9F0FB; color: #2c5aa0; }
.dark-mode .ff-notif { border-color: #2b3748; color: #b6c6e3; }
.dark-mode .ff-notif:hover { background: #1d2a39; }
.dark-mode .ff-notif.is-unread { background: #231d17; }
.dark-mode .ff-notif.is-unread .fw-medium { color: #fff; }

/* ---------------------------------------------------------------- certificates */
.ff-cert-card { border-top: 4px solid var(--ff-orange); }
.ff-cert-card.is-revoked { border-top-color: #e85347; opacity: .75; }