/* Theme + small additions on top of Bootstrap 5 */ :root { --bs-primary: #c93a00; --bs-primary-rgb: 201, 58, 0; } .avatar-sm { width: 2.25rem; height: 2.25rem; font-size: 0.875rem; } /* Login marketing background */ .login-bg-grid { position: fixed; inset: 0; pointer-events: none; opacity: 0.4; background-image: linear-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.35) 0%, transparent 70%); } .login-logo { display: block; width: 3rem; height: 3rem; object-fit: contain; } .login-title { letter-spacing: -0.02em; line-height: 1.2; } /* App shell: keep sidebar + main on one row (Bootstrap .row wraps by default) */ .portal-shell-row { flex-wrap: nowrap; } .portal-shell-sidebar { flex-shrink: 0; } .portal-shell-main { flex: 1 1 0%; min-width: 0; max-width: 100%; } .portal-top-header-inner { flex-wrap: nowrap; } /* Dark side navigation (desktop + offcanvas) */ .portal-sidebar { background-color: #121826; color: rgba(255, 255, 255, 0.92); padding-bottom: env(safe-area-inset-bottom); } .portal-sidebar .btn-close { min-width: 44px; min-height: 44px; padding: 0.75rem; margin: -0.5rem -0.5rem -0.5rem auto; background-size: 1.1rem; } .portal-sidebar .nav-pills .nav-link { text-align: left; color: rgba(255, 255, 255, 0.62); } .portal-sidebar .nav-pills .nav-link:hover { color: #fff; background-color: rgba(255, 255, 255, 0.08); } .portal-sidebar .nav-pills .nav-link.active { color: #fff; background-color: var(--bs-primary); } .portal-sidebar .nav-pills .nav-link.active:hover { background-color: var(--bs-primary); color: #fff; } /* A titled group of nav links, separated from the links above it */ .portal-sidebar .portal-nav-section { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.09); } .portal-sidebar .portal-nav-section__label { display: block; padding: 0 0.75rem 0.35rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); } /* Month-over-month filters: allow course suggestion list to extend past the white panel */ .mom-report-filters-section { overflow: visible; } .mom-report-filters-panel { overflow: visible; } .mom-report-filters-panel .dashboard-panel__body { overflow: visible; } /* Portaled under + positioned in JS — escapes overflow:hidden ancestors */ .mom-course-suggestions { position: fixed; z-index: 2000; max-height: min(14rem, calc(100vh - 6rem)); overflow-y: auto; background: #fff; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 0.375rem; box-sizing: border-box; } /* Course usage report: expandable month-over-month chart */ .reports-course-row { cursor: pointer; } .reports-course-row:hover td { background-color: rgba(15, 23, 42, 0.04); } .reports-course-row--active td { background-color: rgba(201, 58, 0, 0.08); } .reports-course-chart-row td { vertical-align: top; } /* Mobile top bar: safe area + touch-friendly menu control */ .portal-top-header .container-fluid { padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.75rem, env(safe-area-inset-right)); } .portal-mobile-menu-btn { min-height: 44px; min-width: 44px; padding: 0.5rem 0.85rem; -webkit-tap-highlight-color: transparent; } /* Top header page title (e.g. Dashboard) */ .portal-header-title { letter-spacing: -0.02em; line-height: 1.2; max-width: min(100%, 28rem); } @media (min-width: 992px) { .portal-header-title { font-size: 1.25rem !important; max-width: none; } } /* —— Dashboard (home) —— */ .dashboard-main { padding-top: 1.25rem; padding-bottom: 2.5rem; background: #eef1f6; min-height: 0; } @media (min-width: 992px) { .dashboard-main { padding-top: 1.5rem; padding-bottom: 3rem; } } .dashboard-page { display: flex; flex-direction: column; min-height: calc(100vh - 5.5rem); padding-bottom: 0.5rem; } .dashboard-reports { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 0; } /* Section chrome */ .dashboard-section { margin-bottom: 2rem; } @media (min-width: 992px) { .dashboard-section { margin-bottom: 2.5rem; } } .dashboard-section__header { margin-bottom: 0.75rem; padding-left: 0.125rem; } .dashboard-section__title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; color: #141824; margin: 0; line-height: 1.25; } .dashboard-stack .dashboard-section:last-child { margin-bottom: 0; } .dashboard-section--two-col .dashboard-section__header { margin-bottom: 0.65rem; } /* Panels (white surfaces) */ .dashboard-panel { background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0.875rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); overflow: hidden; } .dashboard-panel__body--period { padding: 1rem 1.15rem; } .dashboard-panel__body--metrics { padding: 1.15rem 1.25rem 1.25rem; } @media (min-width: 768px) { .dashboard-panel__body--metrics { padding: 1.35rem 1.5rem 1.5rem; } } .dashboard-panel--table { padding: 0; } .dashboard-month-toolbar { width: 100%; } .dashboard-month-strip-row { width: 100%; gap: 0.5rem 0.65rem; } .dashboard-month-sep { display: block; width: 1px; align-self: stretch; min-height: 1.75rem; background-color: rgba(15, 23, 42, 0.14); flex-shrink: 0; } .dashboard-month-strip { gap: 0.45rem !important; flex-wrap: wrap; max-width: 100%; } .dashboard-month-strip .btn.dashboard-month-btn { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.12rem; padding: 0.38rem 0.55rem; min-width: 3.15rem; border-radius: 0.5rem; line-height: 1.05; white-space: normal; } .dashboard-month-btn-month { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; text-transform: capitalize; } .dashboard-month-btn-year { display: block; font-size: 0.62rem; font-weight: 500; opacity: 0.75; } .dashboard-month-strip .btn-primary .dashboard-month-btn-year { color: rgba(255, 255, 255, 0.92); opacity: 1; } .dashboard-month-strip .btn-primary .dashboard-month-btn-month { color: #fff; } .dashboard-status--loading { margin-bottom: 0.5rem; } .dashboard-status--error { margin-top: 0.25rem; margin-bottom: 1rem; } /* Metric tiles */ .dashboard-stat-tile { height: 100%; padding: 1rem 1rem 1.05rem; background: #f8f9fc; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 0.65rem; border-top: 3px solid #c93a00; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .dashboard-stat-tile:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); } .dashboard-stat-tile--a { border-top-color: #c93a00; } .dashboard-stat-tile--b { border-top-color: #2563eb; } .dashboard-stat-tile--c { border-top-color: #7c3aed; } .dashboard-stat-tile--d { border-top-color: #0d9488; } .dashboard-stat-tile--e { border-top-color: #ca8a04; } .dashboard-stat-tile__label { display: block; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #6b7280; margin-bottom: 0.4rem; } .dashboard-stat-tile__value { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: #141824; font-variant-numeric: tabular-nums; } @media (min-width: 1200px) { .dashboard-stat-tile__value { font-size: 1.35rem; } } /* Tables */ .dashboard-table { --dashboard-table-pad-x: 1.25rem; --dashboard-table-pad-y: 0.5rem; } .dashboard-skin-reseller .dashboard-table thead th { background-color: #f0e6e1 !important; border-bottom-color: rgba(201, 58, 0, 0.12) !important; } .dashboard-skin-courses .dashboard-table thead th { background-color: #dde6f3 !important; border-bottom-color: rgba(37, 99, 235, 0.12) !important; } .dashboard-skin-hosts .dashboard-table thead th { background-color: #e4f0ea !important; border-bottom-color: rgba(5, 122, 85, 0.2) !important; } .dashboard-skin-hosts .dashboard-table tbody td { background-color: #f9fbfa; } .dashboard-skin-hosts .dashboard-table tbody td:first-child { word-break: break-word; } .dashboard-table thead th { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #5c6370; background-color: #f1f3f5 !important; border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important; padding: var(--dashboard-table-pad-y) var(--dashboard-table-pad-x); vertical-align: middle; white-space: nowrap; } .dashboard-table tbody td { padding: var(--dashboard-table-pad-y) var(--dashboard-table-pad-x); vertical-align: middle; border-bottom-color: rgba(15, 23, 42, 0.07); font-size: 0.9375rem; line-height: 1.45; } .dashboard-table tbody tr:last-child td { border-bottom: 0; } .dashboard-table.table-hover tbody tr:hover td { background-color: rgba(var(--bs-primary-rgb), 0.045); } .dashboard-table-col-rank { width: 4rem; } .dashboard-bottom-row { flex: 1 1 auto; align-items: stretch; min-height: 14rem; } .dashboard-courses-col, .dashboard-hosts-col { display: flex; flex-direction: column; } .dashboard-courses-panel { display: flex; flex-direction: column; min-height: 100%; } .dashboard-courses-table-wrap { flex: 1 1 auto; min-height: 0; } .dashboard-hosts-panel { display: flex; flex-direction: column; min-height: 100%; } .dashboard-hosts-table-wrap { flex: 1 1 auto; min-height: 0; } .dashboard-hosts-table-wrap--loading { min-height: 8rem; } .dashboard-reseller-name-btn { text-decoration: none; font-weight: 500; } .dashboard-reseller-name-btn:hover, .dashboard-reseller-name-btn:focus { text-decoration: underline; } .dashboard-reseller-row--active { background-color: rgba(201, 58, 0, 0.08) !important; box-shadow: inset 3px 0 0 #c93a00; } .dashboard-reseller-row--active:hover td { --bs-table-hover-bg: rgba(201, 58, 0, 0.1); } .dashboard-reseller-name-cell--drilled .dashboard-reseller-back { flex-shrink: 0; } .dashboard-reseller-back-slot--loading { width: 2.125rem; height: 2.125rem; flex-shrink: 0; border: 1px solid rgba(15, 23, 42, 0.14); border-radius: 0.375rem; background: rgba(255, 255, 255, 0.6); pointer-events: none; } .dashboard-host-name-btn { text-decoration: none; font-weight: 500; } .dashboard-host-name-btn:hover, .dashboard-host-name-btn:focus { text-decoration: underline; } .dashboard-host-row--active { background-color: rgba(5, 122, 85, 0.08) !important; box-shadow: inset 3px 0 0 #057a55; } .dashboard-host-row--active:hover td { --bs-table-hover-bg: rgba(5, 122, 85, 0.1); } .dashboard-host-back-slot--loading { width: 2.125rem; height: 2.125rem; flex-shrink: 0; border: 1px solid rgba(15, 23, 42, 0.14); border-radius: 0.375rem; background: rgba(255, 255, 255, 0.6); pointer-events: none; } .dashboard-courses-host-loading { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(2px); } .dashboard-courses-table-wrap.dashboard-courses-table-wrap--loading { min-height: 10rem; } .portal-hamburger { display: inline-flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 5px; width: 1.35rem; flex-shrink: 0; } .portal-hamburger-line { display: block; height: 2px; border-radius: 1px; background-color: currentColor; } .portal-user-menu-btn { min-height: 44px; -webkit-tap-highlight-color: transparent; } /* Slightly larger tap targets for nav inside the offcanvas only */ .portal-offcanvas-nav .nav-link { min-height: 48px; display: flex; align-items: center; } /* Flatpickr (reports date pickers): stack above header/offcanvas */ .flatpickr-calendar { z-index: 1060; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--bs-primary); border-color: var(--bs-primary); } /* Organizations list */ .organizations-list .dashboard-table tbody td { padding-top: 0.7rem; padding-bottom: 0.7rem; } .organizations-list__name { font-size: 0.9375rem; font-weight: 600; color: #1a1f2e; text-decoration: none; } .organizations-list__name:hover, .organizations-list__name:focus-visible { color: var(--bs-primary); text-decoration: underline; } .organizations-list__revenue { font-weight: 700; font-variant-numeric: tabular-nums; color: #141824; white-space: nowrap; } .organizations-list__hosts { font-variant-numeric: tabular-nums; color: #5c6370; } .organizations-list__action-col { width: 3.5rem; text-align: right; } .organizations-list__details { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; color: #5c6370; background: rgba(15, 23, 42, 0.05); transition: background-color 0.15s ease, color 0.15s ease; } .organizations-list__details:hover, .organizations-list__details:focus-visible { color: #fff; background: var(--bs-primary); } .organizations-empty { padding: 2rem 1.25rem; text-align: center; color: #6b7280; font-size: 0.9375rem; } /* Organization details */ .organization-details__back { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; font-weight: 600; color: #5c6370; text-decoration: none; } .organization-details__back:hover { color: var(--bs-primary); } .portal-tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; background: #fff; border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 0.7rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } .portal-tabs .nav-link { border: 0; border-radius: 0.5rem; padding: 0.45rem 1.15rem; font-size: 0.875rem; font-weight: 600; color: #5c6370; } .portal-tabs .nav-link:hover { color: #1a1f2e; background: rgba(15, 23, 42, 0.05); } .portal-tabs .nav-link.active { color: #fff; background: #1f2637; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25); } .organization-details .dashboard-table tbody td { padding-top: 0.65rem; padding-bottom: 0.65rem; } .org-payment-desc { font-weight: 600; color: #1a1f2e; } .org-payment-amount { font-weight: 700; font-variant-numeric: tabular-nums; color: #141824; } .org-payment-date { color: #5c6370; font-variant-numeric: tabular-nums; white-space: nowrap; } .org-pill { display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .org-pill--type-1 { background: rgba(37, 99, 235, 0.1); color: #1d4ed8; } .org-pill--type-2 { background: rgba(124, 58, 237, 0.1); color: #6d28d9; } .org-pill--type-3 { background: rgba(13, 148, 136, 0.12); color: #0f766e; } .org-pill--type-unknown { background: rgba(15, 23, 42, 0.07); color: #5c6370; } .org-pill--active { background: rgba(13, 148, 136, 0.12); color: #0f766e; } .org-pill--inactive { background: rgba(15, 23, 42, 0.07); color: #5c6370; } .org-host-name { font-weight: 500; color: #1a1f2e; word-break: break-word; } .org-action-col { width: 3.5rem; text-align: right; } .org-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; padding: 0; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 0.45rem; color: #5c6370; background: #fff; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .org-icon-btn:hover, .org-icon-btn:focus-visible { color: #fff; background: var(--bs-primary); border-color: var(--bs-primary); } .org-host-edit__name { font-size: 0.9375rem; font-weight: 600; color: #1a1f2e; word-break: break-word; } /* Courses */ .courses-title { font-size: 0.9375rem; font-weight: 600; color: #1a1f2e; text-decoration: none; } .courses-title:hover, .courses-title:focus-visible { color: var(--bs-primary); text-decoration: underline; } .courses-identifier { font-size: 0.75rem; color: #5c6370; background: rgba(15, 23, 42, 0.05); border-radius: 0.35rem; padding: 0.15rem 0.45rem; white-space: nowrap; } .courses-category { color: #5c6370; } .courses-seat-time { font-variant-numeric: tabular-nums; color: #3d4557; white-space: nowrap; } .courses-description { min-width: 16rem; max-width: 26rem; font-size: 0.875rem; line-height: 1.5; color: #5c6370; } .courses-langs { display: flex; flex-wrap: wrap; gap: 0.25rem; max-width: 14rem; } .courses-lang { display: inline-flex; align-items: center; padding: 0.1rem 0.4rem; border-radius: 0.3rem; background: #eef2f9; color: #3d4557; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em; } .courses-lang--pending { background: rgba(201, 58, 0, 0.09); color: #a33000; } .courses-lang-empty { color: #9aa1ad; } .courses-action-col { width: 5.5rem; text-align: right; white-space: nowrap; } .courses-icon-col { width: 6.5rem; white-space: nowrap; } .courses-icon { display: inline-block; width: 5.625rem; /* 1080x720 is 3:2, so the box matches the file and the image is never distorted */ aspect-ratio: 3 / 2; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0.4rem; overflow: hidden; background: #eef1f7; } .courses-icon img { display: block; width: 100%; height: 100%; object-fit: cover; } .courses-icon--empty { display: inline-flex; align-items: center; justify-content: center; color: #9aa1ad; font-size: 0.8rem; } .content-row__delete:hover, .content-row__delete:focus-visible { border-color: rgba(220, 53, 69, 0.35); color: #b02a37; } /* Banner that carries a button, eg. straight to the course that was just created */ .courses-notice--action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; } .course-identifier-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.75rem 0.9rem; background: #f4f6fa; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0.6rem; } .course-identifier-preview__label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; } .course-identifier-preview__value { font-size: 0.8125rem; font-weight: 600; color: #1a1f2e; word-break: break-all; } .course-identifier-preview__hint { flex-basis: 100%; font-size: 0.75rem; color: #6b7280; } /* Course details */ /* the tools dropdown lives inside the card, so it must not be clipped */ .course-card { overflow: visible; } .course-card__inner { border-radius: inherit; } .course-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.35rem; background: #fbfcfe; border-bottom: 1px solid rgba(15, 23, 42, 0.07); border-radius: 0.8rem 0.8rem 0 0; } .course-card__heading { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; min-width: 0; } .course-card__title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #141824; margin: 0; line-height: 1.3; } .course-card__actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; } .course-card__actions .btn { display: inline-flex; align-items: center; gap: 0.35rem; } .course-card__body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem; padding: 1.35rem; } .course-card__text { flex: 1 1 24rem; min-width: 0; } .course-card__facts { display: flex; flex-wrap: wrap; margin: 0; padding: 0.9rem 1.35rem; background: #fbfcfe; border-top: 1px solid rgba(15, 23, 42, 0.07); border-radius: 0 0 0.8rem 0.8rem; gap: 0.75rem 2.25rem; } .course-icon { flex: 0 0 auto; width: 22rem; max-width: 100%; margin: 0; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0.8rem; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .course-icon__frame { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #eef1f7; } .course-icon__img { display: block; width: 100%; height: 100%; /* sizes are not all 16:9, so show the real shape instead of cropping in the browser */ object-fit: contain; background: #fff; } .course-icon__missing { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1rem; text-align: center; font-size: 0.8125rem; color: #8b93a7; } .course-icon__nav { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; padding: 0; border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #3d4557; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16); transition: background-color 0.15s ease, color 0.15s ease; } .course-icon__nav:hover { background: #fff; color: #141824; } .course-icon__nav--prev { left: 0.45rem; } .course-icon__nav--next { right: 0.45rem; } .course-icon__meta { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; border-top: 1px solid rgba(15, 23, 42, 0.07); font-size: 0.75rem; } .course-icon__size { font-weight: 700; color: #3d4557; font-variant-numeric: tabular-nums; } .course-icon__status { display: inline-flex; align-items: center; gap: 0.3rem; margin-right: auto; font-weight: 600; } .course-icon__status::before { content: ''; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; } .course-icon__status--ok { color: #2f7a4d; } .course-icon__status--missing { color: #9aa1ad; } .course-icon__upload { border: 0; background: none; padding: 0; font-size: 0.75rem; font-weight: 700; color: #2f5fd0; } .course-icon__upload:hover { text-decoration: underline; } .course-summary__description { margin: 0 0 1.1rem; font-size: 0.9375rem; line-height: 1.65; color: #2b3141; max-width: 80ch; } .course-summary__description--empty { color: #6b7280; font-style: italic; } .course-fact { min-width: 6rem; } .course-fact dt { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; margin-bottom: 0.15rem; } .course-fact dd { margin: 0; font-size: 0.875rem; font-weight: 600; color: #141824; } .course-panel-body { padding: 1.1rem 1.25rem; } .course-pill-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } .course-pill { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.08); background: #f4f6fb; color: #3d4557; font-size: 0.8125rem; font-weight: 600; } .course-objectives { margin: 0; padding: 0; list-style: none; counter-reset: objective; font-size: 0.9375rem; line-height: 1.6; color: #2b3141; } .course-objectives li { counter-increment: objective; display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.75rem; padding: 0.7rem 0; border-top: 1px solid rgba(15, 23, 42, 0.07); } .course-objectives li:first-child { border-top: 0; padding-top: 0; } .course-objectives li:last-child { padding-bottom: 0; } .course-objectives li::before { content: counter(objective); display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #eef2f9; color: #3d4557; font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; } .course-empty { color: #6b7280; font-size: 0.9375rem; } /* Section headers that carry an edit control */ .dashboard-section__header--row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .dashboard-section__header--row .dashboard-section__title { display: inline-flex; align-items: center; gap: 0.45rem; } .section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; padding: 0 0.35rem; height: 1.35rem; border-radius: 999px; background: #e6eaf3; color: #5a6478; font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* Low-emphasis edit control for section headers */ .btn-ghost { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid transparent; background: none; color: #5a6478; font-weight: 600; } .btn-ghost:hover, .btn-ghost:focus-visible { border-color: rgba(15, 23, 42, 0.12); background: #fff; color: #141824; } /* Keeps side-by-side sections the same height */ .dashboard-section--fill { display: flex; flex-direction: column; height: 100%; } .dashboard-section--fill .dashboard-panel { flex: 1 1 auto; } .course-meta { padding: 0.75rem 0.9rem; border-radius: 0.6rem; border: 1px solid rgba(15, 23, 42, 0.07); background: #fbfcfe; } .course-meta__label { display: block; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; margin-bottom: 0.2rem; } .course-meta__value { margin: 0; font-size: 0.875rem; line-height: 1.55; color: #2b3141; } .course-meta__value--empty { color: #6b7280; font-style: italic; } /* Modal helpers shared by the course edit forms */ .course-modal-hint { font-size: 0.8125rem; color: #6b7280; margin-bottom: 0.85rem; } .course-modal-list { font-size: 0.875rem; color: #2b3141; padding-left: 1.15rem; margin-bottom: 0; } .course-modal-list li + li { margin-top: 0.35rem; } .course-text-box { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; line-height: 1.5; } .objective-row { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.6rem; } .objective-row__num { flex: 0 0 auto; width: 1.5rem; padding-top: 0.45rem; font-size: 0.8125rem; font-weight: 700; color: #6b7280; text-align: right; } .objective-row__remove { flex: 0 0 auto; width: 2rem; height: 2rem; margin-top: 0.15rem; padding: 0; border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 0.5rem; background: #fff; color: #6b7280; font-size: 1.15rem; line-height: 1; } .objective-row__remove:hover { border-color: rgba(201, 58, 0, 0.35); color: #a33000; } /* Multi select lists (categories, keywords) */ .toggle-list { max-height: 20rem; overflow-y: auto; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0.6rem; padding: 0.35rem; } .toggle-row { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.35rem 0.5rem; border-radius: 0.45rem; font-size: 0.875rem; color: #2b3141; cursor: pointer; } .toggle-row:hover { background: #f4f6fa; } .toggle-row input { flex: 0 0 auto; margin: 0; } .toggle-row__label { min-width: 0; } .toggle-list__count { font-size: 0.8125rem; color: #6b7280; } .link-btn { border: 0; background: none; padding: 0; font-size: inherit; font-weight: 600; color: #2f5fd0; text-decoration: underline; } .course-export-result { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 0.6rem; background: #f4f6fa; } .course-export-result__title { margin: 0 0 0.35rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; } .course-export-result__link { display: block; font-size: 0.875rem; word-break: break-all; } .tab-badge { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: rgba(15, 23, 42, 0.08); color: inherit; font-size: 0.6875rem; font-weight: 700; vertical-align: 1px; } .portal-tabs .nav-link.active .tab-badge { background: rgba(255, 255, 255, 0.18); } .tab-badge--running { background: rgba(201, 58, 0, 0.12); color: #a33000; } .portal-tabs .nav-link.active .tab-badge--running { background: rgba(255, 255, 255, 0.2); color: #fff; } /* Course content */ .course-content__toolbar { display: flex; align-items: center; gap: 0.4rem; } .course-content__toolbar .form-select { width: auto; min-width: 9rem; } .content-dropzone { border: 1px dashed rgba(15, 23, 42, 0.22); border-radius: 0.7rem; background: #fbfcfe; padding: 1.15rem 1.25rem; text-align: center; transition: border-color 0.15s ease, background-color 0.15s ease; } .content-dropzone--over { border-color: var(--bs-primary); background: rgba(201, 58, 0, 0.05); } .content-dropzone__title { font-size: 0.9375rem; font-weight: 700; color: #141824; } .content-dropzone__hint { font-size: 0.8125rem; color: #6b7280; } .content-dropzone__limit { margin-top: 0.5rem; font-size: 0.75rem; color: #8b93a7; } .upload-list { list-style: none; margin: 1rem 0 0; padding: 0; } .upload-row { display: grid; grid-template-columns: minmax(0, 1fr) 8rem 7rem; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid rgba(15, 23, 42, 0.07); font-size: 0.8125rem; } .upload-row:first-child { border-top: 0; } .upload-row__name { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-weight: 600; color: #2b3141; } .upload-row__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upload-row__bar { display: block; height: 0.35rem; border-radius: 999px; background: #e6eaf3; overflow: hidden; } .upload-row__fill { display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--bs-primary); transform: scaleX(0); transform-origin: left center; transition: transform 0.15s ease; } .upload-row__state { text-align: right; font-weight: 600; color: #6b7280; } .upload-row--done .upload-row__state { color: #2f7a4d; } .upload-row--failed .upload-row__state { color: #a33000; } .upload-row--failed .upload-row__fill { background: #a33000; } .content-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; margin-bottom: 0.85rem; font-size: 0.8125rem; } .content-crumb { padding: 0.15rem 0.4rem; border: 0; border-radius: 0.35rem; background: none; font-weight: 600; color: #2f5fd0; } button.content-crumb:hover { background: #eef2fb; } .content-crumb--current { color: #141824; } .content-crumb__sep { color: #b3bacb; } .content-browser { margin-top: 1.25rem; } .content-row--folder, .content-row--up { cursor: pointer; } .content-row--folder:hover, .content-row--up:hover { background: #f7f9fd; } .content-name--folder { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: #2b3141; } .content-name--folder::before { content: ''; width: 1rem; height: 0.8rem; flex: none; border-radius: 0.15rem 0.2rem 0.2rem 0.2rem; background: #f0b354; box-shadow: inset 0 0.18rem 0 rgba(255, 255, 255, 0.45); } .content-table { font-size: 0.875rem; } .content-table__actions { width: 6rem; text-align: right; } .content-file { font-weight: 600; color: #2f5fd0; text-decoration: none; word-break: break-all; } .content-file:hover { text-decoration: underline; } .content-file__meta { color: #6b7280; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Languages */ .course-languages__toolbar { display: flex; align-items: center; gap: 0.4rem; } .course-languages__toolbar .form-select { width: auto; min-width: 11rem; } .lang-list { display: flex; flex-direction: column; gap: 0.35rem; } .lang-row { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.55rem 0.75rem; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0.6rem; background: #fff; text-align: left; transition: border-color 0.15s ease, background-color 0.15s ease; } .lang-row:hover:not(:disabled) { border-color: rgba(47, 95, 208, 0.35); background: #f8fafe; } .lang-row:disabled { opacity: 0.6; } .lang-row--static { background: #f8f9fc; } .lang-row__code { flex: 0 0 auto; width: 2.25rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; color: #6b7280; } .lang-row__name { flex: 1 1 auto; min-width: 0; font-size: 0.9375rem; font-weight: 600; color: #141824; } .lang-row__go { flex: 0 0 auto; color: #9aa1ad; } .lang-status { flex: 0 0 auto; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; } .lang-status--live { background: rgba(47, 122, 77, 0.12); color: #2f7a4d; } .lang-status--offline { background: rgba(201, 58, 0, 0.1); color: #a33000; } .lang-status--none { background: #eef2f9; color: #6b7280; } .lang-status--source { background: rgba(47, 95, 208, 0.1); color: #2f5fd0; } /* Translation progress */ .course-translation__warning { display: block; margin-top: 0.15rem; font-size: 0.8125rem; font-weight: 600; color: #a33000; } .translate-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .translate-step { display: flex; align-items: center; justify-content: space-between; /* the column is narrow, so a long step name keeps its state on the next line */ flex-wrap: wrap; gap: 0.25rem 0.75rem; padding: 0.55rem 0.75rem; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0.6rem; font-size: 0.875rem; color: #6b7280; } .translate-step__label { flex: 1 1 auto; min-width: 0; } .translate-step--active { border-color: rgba(47, 95, 208, 0.35); background: #f8fafe; color: #141824; font-weight: 600; } .translate-step--done { color: #2f7a4d; } .translate-step--failed { border-color: rgba(201, 58, 0, 0.35); background: rgba(201, 58, 0, 0.06); color: #a33000; font-weight: 600; } .translate-step__state { flex: 0 0 auto; font-size: 0.75rem; font-variant-numeric: tabular-nums; } .translate-step__state--done { color: #2f7a4d; } .translate-step__state--failed { color: #a33000; } /* Lines the translator would not return, listed so they can be fixed by hand */ .translate-left { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid rgba(15, 23, 42, 0.08); } .translate-left__title { font-size: 0.9375rem; font-weight: 700; color: #a33000; margin: 0 0 0.25rem; } .translate-left__hint { font-size: 0.8125rem; color: #6b7280; margin: 0 0 0.6rem; } .translate-left__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; max-height: 22rem; overflow-y: auto; } .translate-left__item { padding: 0.45rem 0.6rem; border: 1px solid rgba(201, 58, 0, 0.2); border-radius: 0.5rem; background: rgba(201, 58, 0, 0.04); } .translate-left__where { display: block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #a33000; } .translate-left__text { display: block; font-size: 0.8125rem; color: #141824; overflow-wrap: anywhere; } /* Subscriptions page */ .subscriptions-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; min-height: 1.5rem; } .subscriptions-count { font-size: 0.8125rem; font-weight: 600; color: #6b7280; } .subscriptions-org { font-weight: 600; color: #1a1f2e; } .subscriptions-term { color: #5c6370; white-space: nowrap; } .subscriptions-row--expired td { background: #fcfaf9; } .org-pill--expired { background: rgba(201, 58, 0, 0.1); color: #a33000; } /* Users page */ .users-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; } .users-search { flex: 1 1 18rem; max-width: 26rem; } .users-search .form-control { font-size: 0.9375rem; } .users-toolbar__aside { display: flex; align-items: center; gap: 1rem; margin-left: auto; } .users-count { font-size: 0.8125rem; font-weight: 600; color: #6b7280; white-space: nowrap; } .users-name { display: block; font-weight: 600; color: #1a1f2e; } .users-email { color: #3d4557; word-break: break-word; } .users-date { color: #5c6370; white-space: nowrap; } .users-actions-col { width: 8rem; text-align: right; } .users-actions { display: inline-flex; gap: 0.35rem; } .org-icon-btn--danger:hover, .org-icon-btn--danger:focus-visible { background: #b02a37; border-color: #b02a37; } .users-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; } .users-pager__status { font-size: 0.8125rem; font-weight: 600; color: #6b7280; font-variant-numeric: tabular-nums; } /* Feedback page */ .feedback-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; } .feedback-toolbar__aside { display: flex; align-items: center; gap: 1rem; margin-left: auto; } .feedback-count { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: #6b7280; white-space: nowrap; } .feedback-switch { display: flex; align-items: center; gap: 0.5rem; padding-left: 2.5em; } .feedback-switch .form-check-input { margin-left: -2.5em; margin-top: 0; width: 2.15em; height: 1.15em; cursor: pointer; } .feedback-switch .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } .feedback-switch .form-check-label { font-size: 0.8125rem; font-weight: 600; color: #3d4557; cursor: pointer; } .feedback-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; min-width: 0; } .feedback-filter { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 999px; background: #fff; color: #5c6370; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .feedback-filter:hover { color: #1a1f2e; border-color: rgba(15, 23, 42, 0.24); } .feedback-filter__count { font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #6b7280; background: rgba(15, 23, 42, 0.06); border-radius: 999px; padding: 0.05rem 0.4rem; } .feedback-filter--active { color: #fff; background: #1f2637; border-color: #1f2637; } .feedback-filter--active:hover { color: #fff; } .feedback-filter--active .feedback-filter__count { color: #fff; background: rgba(255, 255, 255, 0.18); } .feedback-list { display: flex; flex-direction: column; gap: 0.75rem; } .feedback-item__body { padding: 1rem 1.15rem 1.05rem; } .feedback-item--hidden { background: #f7f8fb; } .feedback-item--hidden .feedback-item__message { color: #6b7280; } .feedback-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; } .feedback-item__heading { min-width: 0; } .feedback-item__title { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.005em; color: #1a1f2e; margin: 0; line-height: 1.35; } .feedback-item__meta { margin: 0.2rem 0 0; font-size: 0.75rem; color: #6b7280; word-break: break-word; } .feedback-item__actions { flex: 0 0 auto; } .feedback-item__message { margin: 0; padding-left: 0.85rem; border-left: 3px solid rgba(201, 58, 0, 0.35); font-size: 0.9375rem; line-height: 1.6; color: #2b3141; white-space: pre-wrap; word-break: break-word; } .feedback-empty { padding: 2rem 1.25rem; text-align: center; color: #6b7280; font-size: 0.9375rem; } .org-table-empty { color: #6b7280; font-size: 0.9375rem; } /* Add payment modal */ .org-payment-form .form-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; margin-bottom: 0.3rem; } .org-payment-form .form-control, .org-payment-form .form-select { font-size: 0.9375rem; } .org-payment-form__divider { margin: 1.25rem 0 1rem; border-color: rgba(15, 23, 42, 0.12); opacity: 1; } .org-payment-form__legend { float: none; width: auto; margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.005em; color: #1a1f2e; } .org-payment-form__hint { font-size: 0.8125rem; line-height: 1.5; color: #6b7280; }