/* =======================================================================
coursevo.css — component styles for Coursevo (standalone, no modern.css)
======================================================================= */
/* ===== Assessment card list (.ac-*) ===================================== */
#pMain .ac-wrap { margin: 8px 0; }
/* Section title */
#pMain .ac-section-title {
display: flex; align-items: center; gap: 8px;
padding: 10px 0 8px 0;
margin-bottom: 10px;
border-bottom: 2px solid var(--c-brand);
font-size: 15px; font-weight: 600;
color: #1e3a5f;
}
#pMain .ac-section-title i { color: var(--c-brand); font-size: 16px; }
/* Card container */
#pMain .ac-list {
border: 1px solid #cddaea;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
/* Column header row */
#pMain .ac-head {
display: flex; align-items: center;
padding: 8px 16px;
background: #eaf0f7;
border-bottom: 1px solid #cddaea;
font-size: 12px; font-weight: 600;
color: #4a6080;
}
#pMain .ac-head-icon { width: 44px; flex-shrink: 0; }
#pMain .ac-head-title { flex: 1; }
#pMain .ac-head-status { width: 120px; text-align: center; flex-shrink: 0; }
#pMain .ac-head-dates { width: 240px; text-align: right; flex-shrink: 0; }
/* Card rows */
#pMain a.ac-row,
#pMain div.ac-row {
display: flex; align-items: center;
padding: 16px;
border-bottom: 1px solid #f0f4f8;
background: #fff;
text-decoration: none !important;
color: #2d3748;
border-left: 4px solid #d1dce8;
transition: background var(--t), border-left-color var(--t);
}
#pMain a.ac-row:last-child,
#pMain div.ac-row:last-child { border-bottom: none; }
#pMain a.ac-row:hover { background: #f4f8fd; border-left-color: var(--c-brand); text-decoration: none !important; }
#pMain .ac-row.ac-active { border-left-color: #48bb78; }
#pMain .ac-row.ac-expired { border-left-color: #fc8181; }
#pMain .ac-row.ac-waiting { border-left-color: #f6ad55; }
/* Icon */
#pMain .ac-icon {
width: 44px; flex-shrink: 0;
font-size: 18px; color: #b0bec5;
}
#pMain .ac-row.ac-active .ac-icon { color: #38a169; }
#pMain .ac-row.ac-expired .ac-icon { color: #e53e3e; }
#pMain .ac-row.ac-waiting .ac-icon { color: #dd6b20; }
/* Title */
#pMain .ac-name {
flex: 1;
font-size: 14px !important; font-weight: 600;
color: #1a4f82;
}
#pMain div.ac-row .ac-name { color: #718096; font-weight: 400; }
/* Status */
#pMain .ac-status { width: 120px; text-align: center; flex-shrink: 0; }
#pMain .ac-badge {
display: inline-block; padding: 4px 14px;
border-radius: var(--radius-pill);
font-size: 12px !important; font-weight: 700;
}
#pMain .ac-badge-active { background: #d4edda; color: #1a6632; }
#pMain .ac-badge-expired { background: #f8d7da; color: #842029; }
#pMain .ac-badge-waiting { background: #fff3cd; color: #856404; }
/* Dates */
#pMain .ac-dates {
width: 240px; flex-shrink: 0;
text-align: right;
font-size: 13px !important; color: #64748b;
}
#pMain .ac-dates-sep { color: #aab8c8; margin: 0 4px; }
#pMain .ac-empty {
padding: 36px 20px; text-align: center;
color: #94a3b8; font-size: 13px; font-style: italic;
}
#pMain .ac-nav { margin-top: 8px; text-align: right; }
/* =======================================================================
Site Hero — split layout (logo-left / carousel-right)
Applies to organization + portal landing pages in start.jsp
======================================================================= */
/* ===== Hero row ========================================================= */
.ce-hero-row {
display: flex;
height: 360px;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-lg);
margin-bottom: 20px;
}
/* ===== Left panel: logo + title ======================================== */
.ce-hero-left {
flex: 0 0 30%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 28px;
background: linear-gradient(160deg, #f0f7ff 0%, #e4f0fb 100%);
border-right: 1px solid var(--c-border-soft);
animation: ce-hero-fadein 0.4s ease both;
}
.ce-hero-logo {
width: 200px;
height: 200px;
object-fit: contain;
display: block;
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
background: #fff;
padding: 8px;
box-sizing: border-box;
}
.ce-hero-site-title {
margin: 16px 0 0 0;
font-size: 17px;
font-weight: 700;
color: #1f2937;
text-align: center;
line-height: 1.35;
font-family: 'Lato', 'Roboto', sans-serif;
}
/* ===== Right panel: carousel =========================================== */
.ce-hero-right {
flex: 1;
position: relative;
min-width: 0;
background: #0f2744;
}
.ce-hero-right .carousel,
.ce-hero-right .carousel-inner,
.ce-hero-right .carousel-inner > .item {
height: 360px;
}
.ce-hero-slide-img {
width: 100%;
height: 360px;
object-fit: cover;
display: block;
}
/* ===== Fallback: blurred + darkened logo ================================ */
.ce-hero-fallback-wrap {
position: relative;
width: 100%;
height: 360px;
overflow: hidden;
background: #0f2744;
}
.ce-hero-fallback-bg {
position: absolute;
inset: -30px;
width: calc(100% + 60px);
height: calc(100% + 60px);
object-fit: cover;
filter: blur(18px) brightness(0.45) saturate(1.4);
transform: scale(1.05);
}
/* ===== Carousel controls =============================================== */
.ce-hero-right .carousel-control {
background-image: none !important;
background: rgba(0, 0, 0, 0.12);
width: 40px;
opacity: 0;
transition: opacity .2s, background .2s;
}
.ce-hero-right:hover .carousel-control { opacity: .75; }
.ce-hero-right .carousel-control:hover {
opacity: 1 !important;
background: rgba(0, 0, 0, 0.32) !important;
}
.ce-hero-right .carousel-control .glyphicon {
font-size: 16px;
margin-top: -8px;
}
/* ===== Carousel indicators ============================================= */
.ce-hero-right .carousel-indicators {
bottom: 10px;
left: 0; right: 0;
margin: 0;
z-index: 15;
}
.ce-hero-right .carousel-indicators li {
background: rgba(255, 255, 255, 0.45);
border: 2px solid rgba(255, 255, 255, 0.65);
width: 8px; height: 8px;
border-radius: 50%;
margin: 0 3px;
cursor: pointer;
transition: background .15s, transform .15s;
}
.ce-hero-right .carousel-indicators .active {
background: #fff;
border-color: #fff;
width: 10px; height: 10px;
transform: scale(1.15);
}
/* ===== Description card below hero ===================================== */
.ce-site-desc-section {
background: var(--c-brand-softer);
border-left: 4px solid var(--c-brand);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: 18px 24px;
margin: 0 0 20px 0;
box-shadow: var(--shadow-sm);
font-size: 15px;
line-height: 1.75;
color: #374151;
}
.ce-site-desc-section p:last-child { margin-bottom: 0; }
/* ===== Mobile: side-by-side 50/50 ====================================== */
@media (max-width: 767px) {
.ce-hero-row {
height: 240px;
}
.ce-hero-left {
flex: 0 0 50%;
padding: 16px 12px;
}
.ce-hero-right .carousel,
.ce-hero-right .carousel-inner,
.ce-hero-right .carousel-inner > .item,
.ce-hero-slide-img,
.ce-hero-fallback-wrap {
height: 240px;
}
}
/* ===== Entrance animation ============================================== */
@keyframes ce-hero-fadein {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
/* =======================================================================
UI Renovation — Left panel, Navbar, Login, Cards
======================================================================= */
:root {
/* Tokens previously supplied by modern.css */
--t: .15s ease;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 10px;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(15,23,42,.06);
--shadow-md: 0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.04);
--shadow-lg: 0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.04);
--c-brand: #3C84BD;
--c-brand-softer: #f3f9fd;
--c-border-soft: #f1f5f9;
--radius: 6px;
--c-surface: #ffffff;
--c-surface-2: #f8fafc;
--c-muted: #6b7280;
--c-success: #16a34a;
--c-success-soft: #f0fdf4;
--c-warning: #d97706;
--c-warning-soft: #fffbeb;
--c-danger: #dc2626;
--c-danger-soft: #fef2f2;
--c-info: #0284c7;
--c-info-soft: #eff6ff;
/* Coursevo palette */
--cv-dark: #1a3558;
--cv-mid: #2d5a8e;
--cv-panel-bg: #dce8f5;
--cv-panel-border: #c8daf0;
--cv-item-hover: #e8f2fb;
--cv-item-active: #ddeeff;
/* Shell layout tokens — single source for the fixed-header height (was hard-coded 77px in
index.jsp spacer + two sticky offsets). Breakpoints used by the shell: xs <768, md >=768, lg >=1200. */
--cv-header-h: 50px;
--cv-sticky-top: calc(var(--cv-header-h) + 3px);
--cv-sticky-max-h: calc(100vh - var(--cv-header-h) - 13px);
--cv-menu-w: 280px;
--cv-rail-w: 72px;
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
}
/* --- Navbar ------------------------------------------------------------ */
.cv-navbar {
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%) !important;
border: none !important;
box-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
/* --- Left-panel top spacing -------------------------------------------- */
#accmenu { margin-top: 8px; }
/* --- Left-panel accordion cards --------------------------------------- */
.cv-panel-card {
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: 7px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--cv-panel-border);
}
.cv-panel-header {
display: block;
background: var(--cv-panel-bg);
padding: 9px 14px;
text-decoration: none !important;
border-bottom: 1px solid var(--cv-panel-border);
cursor: pointer;
transition: background var(--t);
}
.cv-panel-header:hover { background: #cdd8ec; text-decoration: none !important; }
.cv-panel-title {
color: var(--cv-dark);
font-weight: 600;
font-size: 95%;
display: flex;
align-items: center;
}
.cv-panel-title .cv-icon { margin-right: 8px; color: var(--cv-mid); }
.cv-panel-title .cv-chevron { font-size: 80%; opacity: 0.5; color: var(--cv-mid); }
.cv-menu-item {
display: flex !important;
align-items: center;
padding: 7px 12px !important;
border-left: none !important;
border-right: none !important;
border-color: #dce8f5 !important;
transition: background var(--t);
}
.cv-menu-item:hover { background: var(--cv-item-hover); }
.cv-menu-item.titleBox,
.cv-menu-item.title5 { background: linear-gradient(90deg, #d0e8ff 0%, #eef5ff 100%) !important; border-left: 4px solid var(--cv-mid) !important; padding-left: 9px !important; font-weight: 700; color: var(--cv-dark); }
.cv-menu-img { margin-right: 9px; opacity: 0.75; flex-shrink: 0; }
.cv-menu-link { color: var(--cv-dark) !important; font-size: 91%; text-decoration: none !important; }
/* FA icon in a menu row. The other left panels use ; the workspace menu
(userWspLeftPanel.jspf) uses Font Awesome, which needs its own sizing to line up with them. */
.cv-menu-ico { width: 18px; margin-right: 9px; text-align: center; color: var(--cv-mid); opacity: .85; flex-shrink: 0; }
/* Unread counter on a menu row. Rendered as a SIBLING of .cv-menu-link, never a child: in the rail
that link becomes position:absolute/inset:0 and would swallow it. pointer-events:none so a click
on the badge still reaches the link underneath. */
.cv-menu-badge {
margin-left: auto; flex-shrink: 0; pointer-events: none;
min-width: 18px; padding: 1px 6px; border-radius: var(--radius-pill);
background: var(--c-warning); color: #fff;
font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}
/* --- Non-logged-in stats card ----------------------------------------- */
.cv-stat-card {
background: #ccdff0;
border-radius: var(--radius-md);
margin-bottom: 10px;
border: 1px solid #a8c4dc;
overflow: hidden;
}
.cv-stat-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 12px;
border-bottom: 1px solid #a8c4dc;
}
.cv-stat-row:last-child { border-bottom: none; }
.cv-stat-label { color: #555; font-size: 90%; }
.cv-stat-value { color: var(--cv-dark); font-size: 105%; font-weight: 700; }
/* --- Non-logged-in links card ----------------------------------------- */
.cv-links-card {
background: #ccdff0;
border-radius: var(--radius-md);
margin-bottom: 10px;
border: 1px solid #a8c4dc;
overflow: hidden;
}
.cv-links-header {
padding: 6px 12px;
border-bottom: 1px solid #a8c4dc;
font-size: 82%;
font-weight: 700;
color: var(--cv-mid);
letter-spacing: 0.06em;
}
.cv-link-item {
display: block;
padding: 7px 12px;
color: var(--cv-mid) !important;
font-size: 91%;
text-decoration: none !important;
transition: background var(--t);
}
.cv-link-item:hover { background: #e8f0fa; text-decoration: none !important; }
.cv-link-item + .cv-link-item { border-top: 1px solid #a8c4dc; }
/* --- Site info card (left panel, non-logged-in) ----------------------- */
.cv-site-info {
margin-bottom: 12px;
background: #ccdff0;
border-radius: var(--radius-md);
padding: 10px 12px;
border: 1px solid #a8c4dc;
}
.cv-site-info h4 {
color: var(--cv-dark);
font-weight: 700;
border-bottom: 2px solid var(--cv-mid);
padding-bottom: 6px;
margin-bottom: 6px;
margin-top: 0;
}
.cv-site-info .cv-site-desc { color: #2a4a6e; font-size: 91%; line-height: 1.5; }
/* --- Login card ------------------------------------------------------- */
.cv-login-card {
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
border-radius: 10px;
box-shadow: 0 4px 18px rgba(0,0,0,0.22);
overflow: hidden;
}
.cv-login-card-header {
padding: 16px 20px 10px;
border-bottom: 1px solid rgba(255,255,255,0.13);
color: #fff;
font-size: 17px;
font-weight: 700;
letter-spacing: 0.02em;
}
.cv-login-card-body { padding: 16px 20px; }
/* --- myCourses page panels -------------------------------------------- */
.cv-page-panel { border-color: var(--cv-panel-border) !important; }
.cv-page-panel > .panel-heading {
background: var(--cv-panel-bg) !important;
border-color: var(--cv-panel-border) !important;
color: var(--cv-dark);
font-weight: 600;
}
.cv-page-panel > .panel-heading i { color: var(--cv-mid); margin-right: 7px; }
/* --- Course cards (myCourses) ----------------------------------------- */
.cv-course-card {
background: #fff;
border: 1px solid #c4d8ee;
border-radius: var(--radius-md);
margin-bottom: 18px;
padding: 10px;
transition: box-shadow var(--t), border-color var(--t);
}
.cv-course-card:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; }
/* --- Course action buttons -------------------------------------------- */
.btn.cv-action-btn {
background: #f0f5fb !important;
border: 1px solid var(--cv-panel-border) !important;
color: var(--cv-mid) !important;
transition: background var(--t), border-color var(--t);
}
.btn.cv-action-btn:hover {
background: var(--cv-panel-bg) !important;
border-color: var(--cv-mid) !important;
color: var(--cv-dark) !important;
}
/* --- Right sidebar activity rows -------------------------------------- */
.cv-info-row {
display: flex;
align-items: center;
padding: 9px 14px;
border-bottom: 1px solid var(--cv-panel-border);
font-size: 93%;
color: #374151;
}
.cv-info-row:last-child { border-bottom: none; }
.cv-info-row i { font-size: 16px; margin-right: 9px; flex-shrink: 0; }
.cv-info-row .badge { margin-left: auto; flex-shrink: 0; }
.cv-info-row a { display: flex; align-items: center; width: 100%; color: inherit; text-decoration: none !important; }
.cv-info-row a .badge { margin-left: auto; }
/* --- My Programs badges ----------------------------------------------- */
.cv-page-panel .badge { background-color: var(--cv-mid); color: #fff; }
/* --- Logout button (dark statusbar) ----------------------------------- */
.cv-logout-btn {
background: transparent !important;
border: 1px solid rgba(255,120,120,0.45) !important;
color: #ff9090 !important;
padding: 1px 7px !important;
}
/* =======================================================================
Catalog (programs.jsp) — browse tree, toolbar, course cards
======================================================================= */
/* --- Left panel: search ------------------------------------------------ */
.cv-catalog-search {
display: flex;
margin: 0;
padding: 8px 10px;
background: #fff;
border-bottom: 1px solid var(--cv-panel-border);
}
.cv-catalog-search input {
flex: 1;
min-width: 0;
border: 1px solid var(--cv-panel-border);
border-right: none;
border-radius: var(--radius-pill) 0 0 var(--radius-pill);
padding: 5px 12px;
font-size: 91%;
outline: none;
transition: border-color var(--t);
}
.cv-catalog-search input:focus { border-color: var(--cv-mid); }
.cv-catalog-search button {
border: 1px solid var(--cv-mid);
background: var(--cv-mid);
color: #fff;
border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
padding: 5px 12px;
cursor: pointer;
transition: background var(--t);
}
.cv-catalog-search button:hover { background: var(--cv-dark); }
/* --- Left panel: program/category tree --------------------------------- */
.cv-catalog-tree { background: #fff; }
.cv-catalog-prog,
.cv-catalog-cat {
display: flex;
align-items: center;
padding: 7px 12px;
color: var(--cv-dark) !important;
font-size: 91%;
text-decoration: none !important;
border-bottom: 1px solid var(--c-border-soft);
transition: background var(--t);
}
.cv-catalog-prog:hover,
.cv-catalog-cat:hover { background: var(--cv-item-hover); }
.cv-catalog-prog.selected {
background: linear-gradient(90deg, #d0e8ff 0%, #eef5ff 100%);
border-left: 4px solid var(--cv-mid);
padding-left: 8px;
font-weight: 700;
}
.cv-catalog-caret {
font-size: 70%;
width: 14px;
margin-right: 6px;
color: var(--cv-mid);
opacity: 0.6;
flex-shrink: 0;
}
.cv-catalog-name { flex: 1; min-width: 0; overflow-wrap: break-word; }
.cv-catalog-name .fa-tag { font-size: 80%; opacity: 0.5; margin-right: 3px; }
.cv-catalog-count {
margin-left: 8px;
flex-shrink: 0;
background: var(--cv-panel-bg);
color: var(--cv-mid);
font-size: 82%;
font-weight: 700;
padding: 1px 8px;
border-radius: var(--radius-pill);
}
.cv-catalog-prog.selected .cv-catalog-count,
.cv-catalog-cat.selected .cv-catalog-count { background: var(--cv-mid); color: #fff; }
.cv-catalog-progs { background: #fbfdff; }
.cv-catalog-progs .cv-catalog-prog { padding-left: 28px; }
.cv-catalog-progs .cv-catalog-prog.selected { padding-left: 24px; }
.cv-catalog-cats { background: #f7fafd; }
.cv-catalog-cats .cv-catalog-cat { padding-left: 48px; }
.cv-catalog-cats .cv-catalog-cat.selected {
background: var(--cv-item-active);
font-weight: 700;
border-left: 4px solid var(--cv-mid);
padding-left: 44px;
}
/* --- Left panel: active filter chips ----------------------------------- */
.cv-catalog-chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 8px 10px;
background: #fff;
border-top: 1px solid var(--cv-panel-border);
}
.cv-catalog-chip {
display: inline-flex;
align-items: center;
max-width: 100%;
background: var(--cv-panel-bg);
border: 1px solid var(--cv-panel-border);
color: var(--cv-dark) !important;
font-size: 84%;
padding: 2px 9px;
border-radius: var(--radius-pill);
text-decoration: none !important;
transition: background var(--t), border-color var(--t);
}
.cv-catalog-chip:hover { background: #cdd8ec; border-color: var(--cv-mid); }
.cv-catalog-chip > .fa:first-child { font-size: 80%; margin-right: 5px; opacity: 0.6; }
.cv-catalog-chip .cv-chip-x { margin-left: 6px; font-size: 80%; opacity: 0.55; }
.cv-catalog-chip:hover .cv-chip-x { opacity: 1; color: #c0392b; }
/* --- Main: header ------------------------------------------------------ */
.cv-catalog-head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 12px;
margin-bottom: 12px;
}
.cv-catalog-title {
margin: 0;
font-size: 170%;
color: var(--cv-dark);
font-weight: 700;
}
.cv-catalog-title > .fa { color: var(--cv-mid); font-size: 80%; margin-right: 4px; }
.cv-catalog-crumb-sep { color: #9ab; margin: 0 2px; font-weight: 400; }
.cv-catalog-crumb { font-size: 75%; font-weight: 600; color: var(--cv-mid); }
.cv-catalog-crumb .fa { font-size: 85%; opacity: 0.6; }
.cv-catalog-results {
margin-left: auto;
color: #6b7c93;
font-size: 90%;
white-space: nowrap;
}
/* --- Main: toolbar (type tabs + sort) ----------------------------------- */
.cv-catalog-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 8px 10px;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
margin-bottom: 12px;
}
.cv-catalog-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 1;
}
.cv-catalog-tab {
display: inline-flex;
align-items: center;
padding: 4px 13px;
border-radius: var(--radius-pill);
border: 1px solid var(--cv-panel-border);
background: #fff;
color: var(--cv-mid) !important;
font-size: 91%;
font-weight: 600;
text-decoration: none !important;
transition: background var(--t), border-color var(--t);
}
.cv-catalog-tab:hover { background: var(--cv-item-hover); border-color: var(--cv-mid); }
.cv-catalog-tab.active {
background: var(--cv-mid);
border-color: var(--cv-mid);
color: #fff !important;
}
.cv-catalog-tab-count {
margin-left: 7px;
background: var(--cv-panel-bg);
color: var(--cv-mid);
font-size: 82%;
font-weight: 700;
padding: 0 7px;
border-radius: var(--radius-pill);
}
.cv-catalog-tab.active .cv-catalog-tab-count { background: rgba(255,255,255,0.25); color: #fff; }
.cv-catalog-sortbox {
display: flex;
align-items: center;
gap: 6px;
color: var(--cv-mid);
margin-left: auto;
}
.cv-catalog-sortbox select {
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-sm);
background: #fff;
color: var(--cv-dark);
font-size: 90%;
padding: 3px 6px;
outline: none;
}
/* --- Main: course cards ------------------------------------------------- */
.cv-catalog-card {
display: flex;
gap: 14px;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 12px;
margin-bottom: 10px;
transition: box-shadow var(--t), border-color var(--t);
}
.cv-catalog-card:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; }
.cv-catalog-thumb { flex-shrink: 0; }
.cv-catalog-thumb img {
width: 130px;
height: 90px;
object-fit: cover;
border-radius: var(--radius-sm);
border: 1px solid var(--c-border-soft);
}
.cv-catalog-body { flex: 1; min-width: 0; }
.cv-catalog-card-top {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 4px 10px;
}
.cv-catalog-card-title {
margin: 0;
font-size: 112%;
font-weight: 700;
flex: 1;
min-width: 200px;
}
.cv-catalog-card-title a { color: var(--cv-dark) !important; text-decoration: none !important; }
.cv-catalog-card-title a:hover { color: var(--cv-mid) !important; text-decoration: underline !important; }
.cv-catalog-status {
display: inline-flex;
align-items: center;
gap: 9px;
flex-shrink: 0;
}
.cv-catalog-code {
background: var(--cv-panel-bg);
color: var(--cv-mid);
font-size: 80%;
font-weight: 700;
padding: 1px 8px;
border-radius: var(--radius-sm);
white-space: nowrap;
}
.cv-catalog-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.cv-catalog-dot.on { background: #2d9e6b; box-shadow: 0 0 0 3px rgba(45,158,107,0.18); }
.cv-catalog-dot.off { background: #b6bec9; }
.cv-catalog-ico { font-size: 100%; color: #7a8aa0; }
.cv-catalog-ico.cv-ok { color: #2d9e6b; }
.cv-catalog-ico.cv-warn { color: #e67e22; }
.cv-catalog-ico.cv-off { color: #c0392b; }
.cv-catalog-chiprow {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 7px;
}
.cv-chip {
display: inline-flex;
align-items: center;
background: #f3f7fb;
border: 1px solid var(--c-border-soft);
color: #46586e;
font-size: 82%;
padding: 1px 9px;
border-radius: var(--radius-pill);
}
.cv-chip .fa { font-size: 80%; margin-right: 5px; opacity: 0.55; }
.cv-chip.cv-chip-type { background: var(--c-brand-softer); color: var(--cv-mid); font-weight: 600; }
.cv-catalog-instr {
margin-top: 7px;
font-size: 88%;
color: #46586e;
}
.cv-catalog-instr .fa { font-size: 85%; margin-right: 5px; opacity: 0.55; color: var(--cv-mid); }
.cv-catalog-desc {
margin-top: 6px;
font-size: 88%;
color: #5c6b7f;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* --- Main: empty state --------------------------------------------------- */
.cv-catalog-empty {
background: #fff;
border: 1px dashed var(--cv-panel-border);
border-radius: var(--radius-md);
text-align: center;
padding: 45px 20px;
margin-bottom: 10px;
}
.cv-catalog-empty > .fa {
font-size: 42px;
color: var(--cv-panel-border);
display: block;
margin-bottom: 12px;
}
.cv-catalog-empty h2 {
margin: 0 0 16px 0;
font-size: 130%;
color: #6b7c93;
font-weight: 600;
}
/* --- Main: pagination ----------------------------------------------------- */
.cv-catalog-pager { padding: 4px 0 12px 0; }
/* --- Program Description (cv-prog-*) ------------------------------------ */
/* intro card between the catalog head and the toolbar (programs.jsp) */
.cv-prog-intro {
display: flex; align-items: center; gap: 14px;
background: #fff; border: 1px solid var(--cv-panel-border);
border-left: 4px solid var(--cv-mid);
border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
padding: 14px 16px; margin-bottom: 12px;
}
.cv-prog-intro-icon {
flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--cv-panel-bg); color: var(--cv-mid); font-size: 22px;
}
.cv-prog-intro-body { flex: 1 1 auto; min-width: 0; }
.cv-prog-intro-title { font-weight: 700; color: var(--cv-dark); margin-bottom: 4px; }
.cv-prog-summary { color: #5c6b7f; font-size: 95%; line-height: 1.5; margin-bottom: 8px; }
.cv-prog-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cv-prog-chip {
display: inline-flex; align-items: center; max-width: 100%;
background: var(--cv-panel-bg); border: 1px solid var(--cv-panel-border);
color: var(--cv-dark) !important; font-size: 84%; padding: 2px 9px;
border-radius: var(--radius-pill); text-decoration: none !important;
transition: background var(--t), border-color var(--t);
}
.cv-prog-chip:hover { background: #cdd8ec; border-color: var(--cv-mid); }
.cv-prog-chip > .fa:first-child { font-size: 80%; margin-right: 5px; opacity: 0.6; }
/* description-only mode: the card is the whole description, no reader button */
.cv-prog-intro-only { align-items: flex-start; }
.cv-prog-intro-only .cv-prog-summary {
margin-bottom: 0; font-size: 100%; color: var(--cv-dark);
min-height: 0; /* .cefhtml in mainss.css forces min-height:500px */
max-height: 200px; overflow: auto; padding-right: 6px;
}
.cv-prog-intro-only .cv-prog-summary.is-open { max-height: none; overflow: visible; }
.cv-prog-expand { display: none; margin-top: 8px; font-size: 84%; font-weight: 600; color: var(--cv-mid); text-decoration: none !important; }
.cv-prog-expand.is-visible { display: inline-flex; align-items: center; gap: 5px; }
.cv-prog-expand:hover { color: var(--cv-dark); }
.cv-prog-intro-only .cv-prog-summary p:last-child { margin-bottom: 0; }
.cv-prog-more { flex: 0 0 auto; white-space: nowrap; }
/* "All programs" landing tiles */
.cv-prog-tiles-wrap { margin-bottom: 14px; }
.cv-prog-tiles-head { margin-bottom: 8px; }
.cv-prog-tiles-toggle {
display: inline-flex; align-items: center; gap: 7px;
color: var(--cv-dark); font-weight: 700; font-size: 95%; text-decoration: none !important;
}
.cv-prog-tiles-toggle:hover { color: var(--c-brand); }
.cv-prog-tiles-toggle > .fa { color: var(--cv-mid); font-size: 85%; }
.cv-prog-tiles {
display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px;
}
.cv-prog-tiles.is-collapsed { display: none; }
.cv-prog-tile {
display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
overflow: hidden; transition: box-shadow var(--t), border-color var(--t);
}
.cv-prog-tile:hover { box-shadow: var(--shadow-md); border-color: var(--cv-mid); }
.cv-prog-tile-main {
flex: 1 1 auto; padding: 12px 14px; color: var(--cv-dark); text-decoration: none !important;
}
.cv-prog-tile-main:hover { color: var(--cv-dark); }
.cv-prog-tile-top { display: flex; align-items: flex-start; gap: 8px; }
.cv-prog-tile-name { flex: 1 1 auto; font-weight: 700; line-height: 1.3; }
.cv-prog-tile-main:hover .cv-prog-tile-name { color: var(--c-brand); }
.cv-prog-tile-count {
flex: 0 0 auto; min-width: 24px; padding: 1px 7px; border-radius: var(--radius-pill);
background: var(--cv-panel-bg); color: var(--c-muted);
font-size: 80%; font-weight: 700; text-align: center;
}
.cv-prog-tile-desc {
margin-top: 6px; color: #5c6b7f; font-size: 86%; line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cv-prog-tile-info {
display: block; padding: 7px 14px; font-size: 84%; font-weight: 600;
color: var(--cv-mid) !important; background: var(--c-surface-2);
border-top: 1px solid var(--cv-panel-border); text-decoration: none !important;
}
.cv-prog-tile-info:hover { background: #cdd8ec; color: var(--cv-dark) !important; }
.cv-prog-tile-info .fa { margin-right: 4px; }
/* reader (program_info.jsp) */
.cv-prog-pagenav {
display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px;
background: #fff; border-bottom: 1px solid var(--cv-panel-border);
}
.cv-prog-chip-no {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px; margin-right: 4px;
border-radius: 9px; font-size: 80%; font-weight: 700;
background: rgba(0,0,0,.08);
}
.cv-prog-chip.is-active { background: var(--cv-mid); border-color: var(--cv-mid); color: #fff !important; }
.cv-prog-chip.is-active .cv-prog-chip-no { background: rgba(255,255,255,.25); }
.cv-pres-tool-btn.is-disabled { opacity: .45; pointer-events: none; }
.cv-prog-badge-draft {
display: inline-flex; align-items: center; gap: 5px;
background: #fff4d6; color: #8a5a00; border: 1px solid #f0d48a;
border-radius: var(--radius-pill); padding: 2px 10px; font-size: 82%; font-weight: 700;
}
.cv-prog-page {
max-width: 960px; margin: 0 auto; padding: 24px 28px; text-align: left;
background: #fff; border-radius: 6px; box-shadow: var(--shadow-md);
}
.cv-prog-page-title { margin: 0 0 14px 0; font-size: 150%; font-weight: 700; color: var(--cv-dark); }
.cv-prog-page img { max-width: 100%; height: auto; }
.cv-prog-pdf { width: 100%; height: 80vh; border: 0; background: #fff; border-radius: 6px; }
.cv-prog-pdf-fallback { padding: 30px; text-align: center; color: #6b7c93; }
.cv-prog-empty {
background: #fff; border: 1px dashed var(--cv-panel-border);
border-radius: var(--radius-md); text-align: center; padding: 45px 20px; margin-bottom: 10px;
}
.cv-prog-empty > .fa { font-size: 42px; color: var(--cv-panel-border); display: block; margin-bottom: 12px; }
.cv-prog-empty h2 { margin: 0 0 16px 0; font-size: 130%; color: #6b7c93; font-weight: 600; }
/* authoring (mng_program_info.jsp) */
.cv-prog-admin-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; }
.cv-prog-admin-head h1 { margin: 0; font-size: 150%; font-weight: 700; color: var(--cv-dark); }
.cv-prog-admin-head h1 .fa { color: var(--cv-mid); margin-right: 4px; }
.cv-prog-admin-name { font-size: 105%; font-weight: 600; color: #4a5a70; }
.cv-prog-admin-actions { margin-left: auto; display: flex; gap: 6px; }
.cv-prog-admin .radio-inline { margin-right: 14px; }
.cv-prog-admin-table td { vertical-align: middle !important; }
.cv-prog-admin-table .form-control { width: 60px; display: inline-block; }
.cv-prog-admin-file { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cv-prog-admin-file .fa-file-pdf { color: #c0392b; }
.cv-prog-admin .panel-heading .btn { margin-top: -3px; }
@media (max-width: 600px) {
.cv-prog-intro { flex-direction: column; align-items: stretch; }
.cv-prog-intro-icon { display: none; }
.cv-prog-pdf { height: 70vh; }
.cv-prog-page { padding: 16px; }
.cv-prog-admin-actions { margin-left: 0; }
}
@media (max-width: 600px) {
.cv-catalog-card { flex-direction: column; }
.cv-catalog-thumb img { width: 100%; height: 130px; }
}
/* =======================================================================
Course landing (lesson.jsp) — cv-lesson-*
======================================================================= */
/* --- Hero ---------------------------------------------------------------- */
.cv-lesson-hero {
display: flex;
align-items: stretch;
gap: 22px;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
color: #fff;
padding: 24px;
margin-bottom: 18px;
}
.cv-lesson-hero-media {
flex: 0 0 220px;
align-self: flex-start;
position: relative;
background: var(--c-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: 8px;
}
.cv-lesson-hero-media img {
display: block;
width: 100%;
height: 160px;
object-fit: cover;
border-radius: var(--radius-sm);
}
.cv-lesson-hero-media-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 160px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--cv-panel-bg), var(--c-brand-softer));
color: var(--cv-mid);
}
.cv-lesson-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 52px;
height: 52px;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 18px;
cursor: pointer;
transition: transform var(--t), background-color var(--t);
}
.cv-lesson-play:hover {
background: rgba(0, 0, 0, 0.75);
transform: translate(-50%, -50%) scale(1.12);
}
.cv-lesson-hero-body { flex: 1; min-width: 0; }
.cv-lesson-hero-title {
margin: 0 0 8px 0;
font-size: 150%;
font-weight: 700;
color: #fff;
line-height: 1.25;
}
.cv-lesson-code {
display: inline-block;
vertical-align: middle;
background: rgba(255, 255, 255, 0.18);
border-radius: var(--radius-pill);
color: #fff;
font-size: 65%;
font-weight: 600;
padding: 2px 12px;
margin-left: 8px;
white-space: nowrap;
}
.cv-lesson-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 12px 0;
}
.cv-lesson-meta-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.12);
border-radius: var(--radius-pill);
color: #fff;
font-size: 85%;
padding: 3px 12px;
}
.cv-lesson-meta-chip .fa { opacity: 0.7; }
.cv-lesson-meta-chip .badge {
background: rgba(255, 255, 255, 0.25);
color: #fff;
}
.cv-lesson-meta-chip.is-open { background: rgba(22, 163, 74, 0.45); }
.cv-lesson-meta-chip.is-soon { background: rgba(2, 132, 199, 0.45); }
.cv-lesson-meta-chip.is-today { background: rgba(217, 119, 6, 0.55); }
.cv-lesson-meta-chip.is-expired { background: rgba(220, 38, 38, 0.55); }
.cv-lesson-share {
display: flex;
align-items: center;
gap: 6px;
margin-top: 10px;
}
.cv-lesson-share .btn-social-icon { box-shadow: var(--shadow-sm); }
/* X (formerly Twitter) share button */
.btn-social-icon.cv-btn-x {
background: #000;
border-color: #000;
color: #fff;
}
.btn-social-icon.cv-btn-x:hover,
.btn-social-icon.cv-btn-x:focus {
background: #2b2b2b;
border-color: #2b2b2b;
color: #fff;
}
/* --- Hero: rating stars -------------------------------------------------- */
.cv-lesson-rating {
display: inline-flex;
align-items: center;
gap: 3px;
}
.cv-lesson-star {
font-size: 22px;
color: rgba(255, 255, 255, 0.45);
}
.cv-lesson-star.is-active { color: #fbbf24; }
.cv-lesson-rating--editable .cv-lesson-star {
cursor: pointer;
transition: transform var(--t), color var(--t);
}
.cv-lesson-rating--editable .cv-lesson-star:hover { transform: scale(1.15); }
.cv-lesson-rating--editable .cv-lesson-star.is-hover { color: #fde68a; }
.cv-lesson-rating-count {
margin-left: 6px;
background: rgba(255, 255, 255, 0.25);
color: #fff;
}
.cv-lesson-rate-clear {
margin-left: 4px;
color: rgba(255, 255, 255, 0.55);
font-size: 16px;
cursor: pointer;
transition: color var(--t);
}
.cv-lesson-rate-clear:hover { color: #fff; }
/* --- Hero: registration CTA card ----------------------------------------- */
.cv-lesson-hero-cta {
flex: 0 0 230px;
align-self: flex-start;
background: var(--c-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
color: #333;
padding: 10px;
font-size: 92%;
text-align: center;
}
.cv-lesson-hero-cta .alert {
border: 0;
border-left: 3px solid transparent;
border-radius: var(--radius);
text-align: left;
padding: 10px 12px;
margin-bottom: 8px;
}
.cv-lesson-hero-cta .alert-success { background: var(--c-success-soft); color: #14532d; border-left-color: var(--c-success); }
.cv-lesson-hero-cta .alert-warning { background: var(--c-warning-soft); color: #78350f; border-left-color: var(--c-warning); }
.cv-lesson-hero-cta .alert-danger { background: var(--c-danger-soft); color: #7f1d1d; border-left-color: var(--c-danger); }
.cv-lesson-hero-cta .btn { border-radius: var(--radius); }
.cv-lesson-hero-cta .form-control { border-radius: var(--radius); }
.cv-lesson-reg-state {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
font-size: 98%;
font-weight: 600;
color: var(--c-muted);
padding: 2px 0 6px 0;
}
.cv-lesson-reg-state .fa { font-size: 110%; }
.cv-lesson-reg-state.is-registered { color: var(--c-success); }
.cv-lesson-reg-state.is-admin { color: var(--cv-mid); }
/* --- External course page (course_page.jsp) -------------------------------- */
body.cv-extpage { background: #f4f7fa; }
/* --- Masonry card grid ------------------------------------------------------
CSS multi-column layout: cards pack top-to-bottom with no vertical voids,
and a missing card (e.g. no instructors) leaves no hole. Card order is the
markup order, flowing down the left column first, then the right.
Single column below 992px. */
.cv-lesson-grid { column-gap: 16px; }
@media (min-width: 992px) {
.cv-lesson-grid { column-count: 2; }
}
.cv-lesson-grid > .cv-lesson-card,
.cv-lesson-grid > .cv-lesson-license {
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
}
/* --- Content cards -------------------------------------------------------- */
.cv-lesson-card {
background: var(--c-surface);
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
margin-bottom: 16px;
transition: box-shadow var(--t);
}
.cv-lesson-card:hover { box-shadow: var(--shadow-md); }
.cv-lesson-card-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-bottom: 1px solid var(--c-border-soft);
}
.cv-lesson-card-header .fa,
.cv-lesson-card-header .fas { color: var(--cv-mid); }
.cv-lesson-card-title {
margin: 0;
font-size: 105%;
font-weight: 700;
color: var(--cv-dark);
}
.cv-lesson-card-body { padding: 12px 14px; }
.cv-lesson-card-body h5 {
font-weight: 700;
color: var(--cv-dark);
margin: 14px 0 6px 0;
}
/* --- Instructors / staff --------------------------------------------------- */
.cv-lesson-instructor {
display: flex;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--c-border-soft);
}
.cv-lesson-instructor:first-child { padding-top: 0; }
.cv-lesson-instructor:last-child { border-bottom: 0; padding-bottom: 0; }
.cv-lesson-instructor img.img-circle {
width: 70px;
height: 70px;
flex-shrink: 0;
object-fit: cover;
}
.cv-lesson-instructor-info { flex: 1; min-width: 0; font-size: 92%; }
.cv-lesson-cv {
max-height: 120px;
overflow: auto;
margin-top: 6px;
font-size: 85%;
color: #5c6b7f;
line-height: 1.5;
}
.cv-lesson-staff-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}
.cv-lesson-staff {
display: flex;
gap: 10px;
background: var(--c-surface-2);
border: 1px solid var(--c-border-soft);
border-radius: var(--radius);
padding: 8px;
font-size: 90%;
}
.cv-lesson-staff img { width: 50px; height: 50px; flex-shrink: 0; object-fit: cover; }
.cv-lesson-staff-info { min-width: 0; }
.cv-lesson-staff-info .cv-lesson-headline { font-size: 88%; color: var(--c-muted); margin: 3px 0; }
/* --- Course structure (units) ---------------------------------------------- */
.cv-lesson-units {
list-style: none;
margin: 0;
padding: 0;
max-height: 320px;
overflow: auto;
}
.cv-lesson-unit { border-bottom: 1px solid var(--c-border-soft); }
.cv-lesson-unit:last-child { border-bottom: 0; }
.cv-lesson-unit > a,
.cv-lesson-unit > span {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 6px;
color: var(--cv-dark);
text-decoration: none !important;
transition: background-color var(--t);
}
.cv-lesson-unit > a:hover { background: var(--cv-item-hover); color: var(--cv-mid); }
.cv-lesson-unit img {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: var(--radius-sm);
border: 1px solid var(--c-border-soft);
object-fit: cover;
}
.cv-lesson-unit.is-locked > span { color: var(--c-muted); }
.cv-lesson-unit .fa-lock { margin-left: auto; font-size: 85%; opacity: 0.5; }
/* --- Stats chart / teaching info / license --------------------------------- */
.cv-lesson-chart-wrap {
position: relative;
height: 280px;
padding: 10px;
}
.cv-lesson-info-block { padding: 6px 0; }
.cv-lesson-info-block + .cv-lesson-info-block { border-top: 1px solid var(--c-border-soft); }
.cv-lesson-info-title {
font-weight: 700;
color: var(--cv-dark);
margin: 6px 0;
}
.cv-lesson-info-body { line-height: 1.6; }
.cv-lesson-license {
background: var(--c-surface-2);
border: 1px solid var(--c-border-soft);
border-radius: var(--radius-md);
color: var(--c-muted);
font-size: 88%;
padding: 12px 14px;
margin-bottom: 16px;
}
.cv-lesson-license .fab { margin-right: 8px; font-size: 120%; }
/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1199px) {
.cv-lesson-hero-cta { flex-basis: 210px; }
}
@media (max-width: 991px) {
.cv-lesson-hero { flex-direction: column; }
.cv-lesson-hero-media {
flex-basis: auto;
width: 100%;
max-width: 260px;
margin: 0 auto;
}
.cv-lesson-hero-cta { flex-basis: auto; width: 100%; }
.cv-lesson-share { justify-content: center; }
}
@media (max-width: 600px) {
.cv-lesson-hero { padding: 14px; }
.cv-lesson-hero-title { font-size: 120%; }
.cv-lesson-star { font-size: 18px; }
}
/* =======================================================================
Course structure browse (course_unit.jsp / course_unit_view.jsp) — cv-unit-*
======================================================================= */
/* --- Layout: full-width content, structure rail on top --------------------- */
.cv-unit-main { min-width: 0; }
/* Circular unit-number badge (unit header card, overview cards) */
.cv-unit-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
border-radius: 50%;
background: var(--cv-mid);
color: #fff;
font-size: 80%;
font-weight: 700;
}
/* --- Horizontal unit rail -------------------------------------------------- */
.cv-unit-rail { margin-bottom: 14px; }
.cv-unit-rail-label {
display: flex;
align-items: center;
gap: 7px;
font-size: 88%;
font-weight: 700;
color: var(--cv-dark);
margin-bottom: 7px;
}
.cv-unit-rail-label .fa { color: var(--cv-mid); }
.cv-unit-rail-track {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 3px 2px 10px;
scroll-snap-type: x proximity;
}
.cv-unit-tile {
flex: 0 0 150px;
background: var(--c-surface);
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
display: block;
scroll-snap-align: start;
text-decoration: none !important;
transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.cv-unit-tile:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; transform: translateY(-2px); }
.cv-unit-tile.is-current {
border-color: var(--cv-mid);
box-shadow: 0 0 0 2px var(--cv-mid), var(--shadow-md);
}
.cv-unit-tile-media {
position: relative;
height: 64px;
background: var(--c-brand-softer);
overflow: hidden;
}
.cv-unit-tile-media img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 6px 6px 6px 46px;
}
.cv-unit-tile-num {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
line-height: 1;
font-weight: 800;
color: #fff;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
}
.cv-unit-tile-badge {
position: absolute;
top: 6px;
right: 6px;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--c-success);
color: #fff;
font-size: 70%;
box-shadow: 0 0 0 2px #fff;
}
.cv-unit-tile-body { padding: 7px 9px 9px; }
.cv-unit-tile-title {
font-size: 84%;
font-weight: 600;
color: var(--cv-dark);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.6em;
}
.cv-unit-tile .cv-unit-progress { margin: 7px 0 5px; }
.cv-unit-tile-count { text-align: right; }
/* --- Progress bar (sidebar, cards, header) ---------------------------------- */
.cv-unit-progress {
height: 6px;
background: #e8eef5;
border-radius: var(--radius-pill);
margin: 0 12px 8px 12px;
overflow: hidden;
}
.cv-unit-acc .cv-unit-progress { height: 4px; margin: 0 12px 6px 42px; }
.cv-unit-progress-fill {
height: 100%;
background: var(--c-success);
border-radius: var(--radius-pill);
transition: width var(--t);
}
.cv-unit-progress-label { font-size: 82%; color: var(--c-muted); }
/* --- Unit header card -------------------------------------------------------- */
.cv-unit-head {
display: flex;
gap: 14px;
background: var(--c-surface);
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 14px;
margin-bottom: 14px;
}
.cv-unit-head-media { flex: 0 0 120px; text-align: center; }
.cv-unit-head-media img {
width: 110px;
height: 110px;
object-fit: cover;
border-radius: var(--radius-sm);
border: 1px solid var(--c-border-soft);
}
.cv-unit-head-share { margin-top: 8px; }
.cv-unit-head-body { flex: 1; min-width: 0; }
.cv-unit-head-top {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 8px 12px;
margin-bottom: 8px;
}
.cv-unit-head-top h3 {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
flex: 1;
min-width: 200px;
font-size: 125%;
font-weight: 700;
color: var(--cv-dark);
}
.cv-unit-head-desc { font-size: 92%; color: #46586e; line-height: 1.55; }
/* --- Continue button + unit head card ------------------------------------------
LEGACY as of the cv-sub migration: course_unit_view.jsp now uses the shared
cv-subcrumb / cv-sub header and course_unit.jsp uses cv-hero, so .cv-unit-head*,
.cv-unit-continue and .cv-unit-done-chip are no longer emitted. Kept until both
pages are deployed everywhere -- deleting them would strip a half-deployed site's
header, which is exactly what happened to lab.jsp. Safe to remove afterwards. */
.cv-unit-continue {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff !important;
border: none;
border-radius: var(--radius-pill);
box-shadow: var(--shadow-md);
font-weight: 700;
font-size: 93%;
padding: 7px 18px;
transition: box-shadow var(--t), transform var(--t);
}
.cv-unit-continue:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); color: #fff; }
.cv-unit-done-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--c-success-soft);
color: var(--c-success);
border: 1px solid #bbe7c9;
border-radius: var(--radius-pill);
font-weight: 700;
font-size: 90%;
padding: 5px 14px;
}
/* --- Learning-path list -------------------------------------------------------- */
.cv-unit-list {
background: var(--c-surface);
border: 1px solid #cddaea;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
margin-bottom: 14px;
}
.cv-unit-section {
display: flex;
align-items: center;
gap: 9px;
background: #eaf0f7;
color: #1e3a5f;
font-weight: 600;
padding: 9px 16px;
cursor: pointer;
border-bottom: 1px solid var(--cv-panel-border);
user-select: none;
}
.cv-unit-section:hover { background: #dfe9f4; }
.cv-unit-section .fa { color: var(--cv-mid); transition: transform var(--t); }
.cv-unit-section.is-closed .fa { transform: rotate(-90deg); }
.cv-unit-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px 10px 12px;
border-left: 4px solid #d1dce8;
border-bottom: 1px solid var(--c-border-soft);
transition: background var(--t);
}
.cv-unit-row:last-child { border-bottom: 0; }
.cv-unit-row:hover { background: #f4f8fd; }
.cv-unit-row.is-done { border-left-color: var(--c-success); }
.cv-unit-row.is-locked { opacity: 0.55; }
.cv-unit-row.is-flash { background: var(--cv-item-active); }
.cv-unit-row-num {
flex-shrink: 0;
width: 24px;
text-align: center;
font-size: 85%;
font-weight: 700;
color: var(--c-muted);
}
.cv-unit-row-state { flex-shrink: 0; width: 18px; text-align: center; }
.cv-unit-row-state .fa-check-circle { color: var(--c-success); }
.cv-unit-row-state .fa-lock { color: var(--c-muted); opacity: 0.7; }
.cv-unit-row-icon { width: 24px; height: 24px; flex-shrink: 0; }
.cv-unit-row-title {
flex: 1;
min-width: 0;
font-size: 93%;
color: var(--cv-dark);
overflow-wrap: anywhere;
}
.cv-unit-badge {
display: inline-block;
background: var(--cv-panel-bg);
color: var(--cv-mid);
font-size: 78%;
font-weight: 600;
padding: 1px 8px;
border-radius: var(--radius-pill);
margin-left: 6px;
white-space: nowrap;
}
.cv-unit-actions {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
flex-shrink: 0;
}
.cv-unit-play {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border: none;
border-radius: 50%;
background: var(--c-success);
color: #fff;
transition: background var(--t);
}
.cv-unit-play:hover { background: #128a3e; }
.cv-unit-play[disabled] { background: #b6bec9; cursor: not-allowed; }
/* --- Unit overview (course_unit.jsp): the head is the shared cv-hero band --- */
.cv-unit-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 16px;
}
.cv-unit-card {
display: flex;
flex-direction: column;
background: var(--c-surface);
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow var(--t), border-color var(--t);
}
.cv-unit-card:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; }
.cv-unit-card-thumb {
display: block;
background: var(--c-brand-softer);
border-bottom: 1px solid var(--c-border-soft);
}
.cv-unit-card-thumb img {
width: 100%;
height: 140px;
object-fit: contain;
padding: 12px;
display: block;
}
.cv-unit-card-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 12px 14px;
}
.cv-unit-card-top {
display: flex;
align-items: center;
gap: 10px;
}
.cv-unit-card-title { margin: 0; font-size: 105%; font-weight: 700; flex: 1; min-width: 0; }
.cv-unit-card-title a { color: var(--cv-dark) !important; text-decoration: none !important; }
.cv-unit-card-title a:hover { color: var(--cv-mid) !important; text-decoration: underline !important; }
.cv-unit-card-desc {
margin-top: 6px;
font-size: 88%;
color: #5c6b7f;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cv-unit-card-desc * { font-size: inherit !important; line-height: inherit !important; }
.cv-unit-card-desc img { display: none; }
.cv-unit-card .cv-unit-progress { margin: 10px 0 4px 0; }
.cv-unit-card-foot {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 12px;
}
.cv-unit-card-foot .btn:last-child { margin-left: auto; }
/* --- Responsive ----------------------------------------------------------------- */
@media (max-width: 991px) {
.cv-unit-head { flex-direction: column; }
.cv-unit-head-media { flex-basis: auto; }
.cv-unit-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.cv-unit-row { flex-wrap: wrap; }
.cv-unit-actions { width: 100%; justify-content: flex-end; margin-left: 0; }
}
/* =======================================================================
Course player (course_run.jsp) — cv-run-*
The left menu is an accordion in its own sticky, scrollable pane; only
the current unit is expanded and the active item is auto-scrolled in.
======================================================================= */
/* --- Scroll pane ---------------------------------------------------------------- */
.cv-run-nav {
position: sticky;
top: var(--cv-sticky-top); /* clear the fixed top navbar, matching the other left menus */
max-height: var(--cv-sticky-max-h);
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
background: var(--c-surface);
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
/* Fixed top: header + progress + control buttons stay put while the unit list scrolls. */
.cv-run-top { flex: 0 0 auto; }
/* --- Sticky header (current unit + progress) ------------------------------------ */
.cv-run-nav-head {
position: sticky;
top: 0;
z-index: 2;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
padding: 10px 12px;
}
.cv-run-nav-head .cv-run-head-eyebrow {
font-size: 76%;
opacity: .8;
}
.cv-run-nav-head .cv-run-head-eyebrow .fa { margin-right: 6px; }
.cv-run-nav-head .cv-run-head-title {
font-size: 104%;
font-weight: 700;
line-height: 1.3;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* --- Progress bar (serial % or path "feet") ------------------------------------- */
.cv-run-progress {
padding: 9px 12px;
border-bottom: 1px solid var(--c-border-soft);
}
.cv-run-progress-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 80%;
font-weight: 600;
color: var(--c-muted);
margin-bottom: 5px;
}
.cv-run-progress-label .cv-run-pct { color: var(--c-success); }
.cv-run-progress-track {
position: relative;
height: 8px;
border-radius: var(--radius-pill);
background: #e5ebf3;
overflow: hidden;
}
.cv-run-progress-fill {
height: 100%;
border-radius: var(--radius-pill);
background: var(--c-success);
transition: width var(--t);
}
.cv-run-progress.is-path .cv-run-progress-fill { background: #2bbf9a; }
/* --- Top cloned nav (relocNavButtons / cloneItem target) ------------------------ */
#topNavDiv { padding: 8px 8px 0; }
/* --- Accordion (the only scrolling region) -------------------------------------- */
.cv-run-acc { flex: 1 1 auto; overflow-y: auto; padding: 4px; scrollbar-width: thin; scrollbar-color: #c3d3e6 transparent; }
.cv-run-acc::-webkit-scrollbar { width: 5px; }
.cv-run-acc::-webkit-scrollbar-thumb { background: #c3d3e6; border-radius: var(--radius-pill); }
.cv-run-unit {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
text-align: left;
padding: 9px 10px;
margin: 5px 0;
border: 1px solid var(--cv-panel-border);
border-left: 4px solid #c3d3e6;
border-radius: var(--radius-md);
background: var(--c-surface-2);
color: var(--cv-dark) !important;
text-decoration: none !important;
cursor: pointer;
font-weight: 600;
transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.cv-run-unit:hover { background: var(--cv-item-hover); border-left-color: var(--cv-mid); box-shadow: var(--shadow-sm); }
.cv-run-unit.is-current {
background: linear-gradient(90deg, #d0e8ff 0%, #eef5ff 100%);
border-color: #b7d4f0;
border-left-color: var(--cv-mid);
box-shadow: var(--shadow-sm);
font-weight: 700;
}
.cv-run-unit.is-locked { opacity: .55; cursor: not-allowed; }
.cv-run-unit-num {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--cv-mid);
color: #fff;
font-size: 82%;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cv-run-unit.is-current .cv-run-unit-num { background: var(--cv-dark); }
.cv-run-unit-title {
flex: 1;
min-width: 0;
font-size: 92%;
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.cv-run-unit-badge { flex-shrink: 0; font-size: 80%; color: var(--c-muted); }
.cv-run-unit-badge .fa-check-circle { color: var(--c-success); }
.cv-run-unit-badge .fa-lock { color: var(--c-muted); opacity: .7; }
.cv-run-caret { flex-shrink: 0; font-size: 80%; color: var(--cv-mid); }
/* --- Items of the expanded unit ------------------------------------------------- */
.cv-run-items {
list-style: none;
margin: 3px 0 10px 17px;
padding: 2px 2px 2px 9px;
border-left: 2px solid var(--cv-panel-border);
}
.cv-run-item {
display: flex;
align-items: center;
gap: 7px;
padding: 7px 8px;
margin: 2px 0;
border-left: 3px solid transparent;
border-radius: var(--radius-sm);
font-size: 89%;
color: var(--cv-dark) !important;
text-decoration: none !important;
cursor: pointer;
transition: background var(--t);
}
a.cv-run-item:hover { background: var(--cv-item-hover); }
.cv-run-item-state { flex-shrink: 0; width: 16px; text-align: center; }
.cv-run-item-state .fa-check-circle { color: var(--c-success); }
.cv-run-item-state .fa-play-circle { color: var(--cv-mid); }
.cv-run-item-state .fa-lock { color: var(--c-muted); opacity: .7; }
.cv-run-item-state .fa-circle-o { color: #b9c4d4; }
.cv-run-item-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cv-run-item.is-current {
background: var(--c-success-soft);
border-left-color: var(--c-success);
font-weight: 700;
color: #0f7a37 !important;
align-items: flex-start;
}
/* The active step shows its full title (others stay single-line + hover tooltip). */
.cv-run-item.is-current .cv-run-item-title {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.cv-run-item.is-current .cv-run-item-state { padding-top: 1px; }
.cv-run-item.is-done { color: #4b6076 !important; }
.cv-run-item.is-locked { opacity: .5; cursor: not-allowed; }
.cv-run-sec {
display: flex;
align-items: center;
gap: 7px;
padding: 6px 8px;
margin: 6px 0 2px;
background: #eaf0f7;
border-radius: var(--radius-sm);
font-size: 84%;
font-weight: 700;
color: var(--cv-dark);
}
.cv-run-sec .fa { color: var(--cv-mid); }
.cv-run-sec.is-locked { opacity: .5; }
.cv-run-sec.is-active {
background: linear-gradient(90deg, #cfe6ff 0%, #e9f3ff 100%);
color: var(--cv-dark);
box-shadow: inset 3px 0 0 var(--cv-mid);
}
.cv-run-sec.is-active .fa { color: var(--cv-dark); }
/* --- Bottom / cloned-top nav buttons -------------------------------------------- */
#buttomNavDiv { flex: 0 0 auto; }
.cv-run-btnbar {
display: flex;
gap: 8px;
padding: 10px 12px 12px;
}
/* #buttomNavDiv is now purely the clone/mirror source (desktop uses the #topNavDiv top
clone; mobile uses the fixed #cvRunNavBar), so it's never shown itself. */
#buttomNavDiv { display: none; }
/* On phones the buttons live in the fixed bottom bar, so hide the in-menu top clone too —
otherwise the open hamburger menu shows a redundant button row. */
@media (max-width: 767px) { #topNavDiv { display: none; } }
.cv-run-btn {
flex: 1;
border: none;
border-radius: var(--radius-md);
padding: 9px 0;
font-size: 110%;
color: #fff;
cursor: pointer;
transition: filter var(--t), transform var(--t);
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
}
.cv-run-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cv-run-btn.cv-run-btn-stop { background: var(--c-danger); }
/* --- MainPage hero -------------------------------------------------------------- */
.cv-run-hero {
display: flex;
gap: 22px;
align-items: flex-start;
background: var(--c-surface);
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 26px 28px;
}
.cv-run-hero-media { flex: 0 0 160px; text-align: center; }
.cv-run-hero-media img {
width: 160px;
height: 160px;
object-fit: contain;
background: var(--c-brand-softer);
border-radius: var(--radius-md);
padding: 8px;
}
.cv-run-hero-body { flex: 1; min-width: 0; }
.cv-run-hero-body h1 {
margin: 0 0 12px;
font-size: 30px;
font-weight: 700;
color: var(--cv-dark);
}
.cv-run-hero-desc { font-size: 95%; color: #46586e; line-height: 1.6; }
.cv-run-hero-keys { margin-top: 14px; }
/* --- Responsive ----------------------------------------------------------------- */
@media (max-width: 991px) {
.cv-run-nav { position: static; max-height: none; overflow: visible; }
.cv-run-acc { overflow: visible; }
.cv-run-hero { flex-direction: column; }
.cv-run-hero-media { flex-basis: auto; }
}
/* --- Mobile breadcrumb (xs only) -----------------------------------------------------
Mirrors "Unit › Section › Item" out of the collapsed left menu so the trainee can see
their position on phones, where the player menu is hidden behind the hamburger.
Hidden by default; enableRunPlayerMirror() adds .is-active while in the player. */
.cv-crumb-bar {
display: none;
align-items: center;
gap: 6px;
margin: 0 0 12px;
padding: 10px 14px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
font-size: 14px;
line-height: 1.3;
box-shadow: var(--shadow-sm);
white-space: nowrap;
overflow: hidden;
cursor: pointer;
}
@media (max-width: 767px) {
.cv-crumb-bar.is-active { display: flex; }
}
.cv-crumb-bar .fa-sitemap { flex: 0 0 auto; opacity: .85; }
.cv-crumb-bar .cv-crumb-sep { flex: 0 0 auto; opacity: .55; font-size: 90%; }
/* The current item is the priority — units/sections truncate first, item keeps its room. */
.cv-crumb-bar .cv-crumb-unit { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: .8; }
.cv-crumb-bar .cv-crumb-sec { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.cv-crumb-bar .cv-crumb-item { flex: 1 1 auto; min-width: 42px; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
/* Chevron hint that the bar expands; rotates when open. */
.cv-crumb-bar .cv-crumb-toggle { flex: 0 0 auto; margin-left: auto; padding-left: 6px; opacity: .8; font-size: 90%; transition: transform var(--t); }
/* Tap to reveal the full path: wrap onto multiple lines, no truncation. */
.cv-crumb-bar.is-expanded { white-space: normal; flex-wrap: wrap; align-items: flex-start; }
.cv-crumb-bar.is-expanded .cv-crumb-unit,
.cv-crumb-bar.is-expanded .cv-crumb-sec,
.cv-crumb-bar.is-expanded .cv-crumb-item { flex: 0 1 auto; overflow: visible; white-space: normal; text-overflow: clip; }
.cv-crumb-bar.is-expanded .cv-crumb-toggle { transform: rotate(180deg); }
/* --- Mobile player control bar (xs only) --------------------------------------------
The prev/stop/next buttons (#buttomNav) are mirrored out of the collapsed left menu
into this fixed bottom bar by enableRunPlayerMirror(). Hidden by default; .is-active is
added while in the player. Robust across navigation + refresh (no DOM relocation). */
.cv-run-mobilebar {
display: none;
position: fixed;
/* Pin to the viewport width, NOT left:0;right:0 — a resource that overflows horizontally
widens the document, and a left/right-anchored fixed bar then stretches with it (buttons
grow, the right one falls off-screen). 100vw + border-box keeps it exactly one screen. */
left: 0;
width: 100vw;
max-width: 100vw;
box-sizing: border-box;
/* sit just above the floating chatbot / online-users launchers (bottom:8px, ~44px tall) */
bottom: calc(60px + env(safe-area-inset-bottom));
z-index: 1030;
gap: 8px;
padding: 8px 12px;
background: var(--c-surface);
border-top: 1px solid var(--cv-panel-border);
box-shadow: 0 -2px 12px rgba(0,0,0,.10);
}
@media (max-width: 767px) {
.cv-run-mobilebar.is-active { display: flex; }
/* keep page content clear of the raised fixed bar */
body.cv-runbar-on { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
/* Contain horizontally-overflowing resource content (wide tables/iframes/embeds) inside
the main area so the whole page can't be scrolled sideways. Applied here (not on
html/body) on purpose: overflow on body breaks position:fixed on iOS Safari, which
would drop the control bar + chatbot/online launchers. No vertical side-effect because
#MainPage has no fixed height (so overflow-y stays effectively visible). */
#MainPage { overflow-x: hidden; }
}
.cv-run-mobilebar .cv-run-btn { flex: 1; }
/* --- Instructor edit/view toggles on phones -----------------------------------------
.view_mode ([Edit]) and .view_mode_n (web view) are full-text chips defined in
mainss.css. On xs they eat a lot of width, so collapse them to a compact gear icon
(label hidden via font-size:0; PNG icon swapped for a FontAwesome gear). */
@media (max-width: 767px) {
.view_mode, .view_mode_n {
width: 36px;
min-width: 36px;
height: 30px;
padding: 0 !important;
background-image: none !important;
font-size: 0 !important;
line-height: 30px;
text-align: center;
}
.view_mode::before, .view_mode_n::before {
content: "\f013"; /* fa-cog */
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 15px;
}
}
/* =======================================================================
Sticky left menu — keep page navigation in view while the main column
scrolls on long pages. The app-shell row (.cv-app-row, in index.jsp) is
made flex so the menu column stretches to the main column's height; a
floated column is only as tall as the menu itself, which leaves
position:sticky no room to travel (the root cause of nav scrolling away).
The course player (.cv-run-nav) runs its own sticky + internal scroll, so
it's excluded from the #LeftMenu rule.
======================================================================= */
@media (min-width: 768px) {
.cv-app-row { display: flex; }
.cv-app-row > div { min-width: 0; } /* let columns shrink instead of overflowing on wide content */
#LeftMenu {
position: sticky;
top: var(--cv-sticky-top); /* clear the fixed top navbar */
max-height: var(--cv-sticky-max-h);
/* !important: Bootstrap sets `.navbar-collapse.collapse { overflow:visible !important }`
at >=768px, which otherwise blocks internal scrolling of a long menu on a short viewport. */
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-width: none; /* Firefox: scrollable but no visible scrollbar */
-ms-overflow-style: none; /* old Edge/IE */
}
#LeftMenu::-webkit-scrollbar { width: 0; height: 0; } /* WebKit/Blink */
/* Soft bottom fade as a "more below" hint — toggled by enableLeftMenuFade() only while
the menu is actually scrollable and not at the bottom, so short menus stay crisp. */
#LeftMenu.cv-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
}
/* The course player nav (course_run.jsp) normally runs its own sticky + internal
scroll, which needs the parent to be taller than itself — fragile in this grid. On
desktop just let the sticky #LeftMenu be the single scroll container so the player
menu stays visible exactly like every other left menu. */
#LeftMenu .cv-run-nav { position: static; max-height: none; overflow: visible; }
#LeftMenu .cv-run-acc { max-height: none; overflow: visible; }
}
/* ===================================================================================
About Coursevo (coursevo.jsp)
=================================================================================== */
.cv-about {
max-width: 1100px;
margin: 0 auto;
padding: 0 16px 40px;
}
/* Hero banner */
.cv-about-hero {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
box-shadow: var(--shadow-lg);
margin: 20px 0 32px;
padding: 48px 40px;
color: #fff;
}
.cv-about-hero::after {
content: "";
position: absolute;
right: -80px;
top: -80px;
width: 280px;
height: 280px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
}
.cv-about-hero-inner { position: relative; z-index: 1; max-width: 720px; }
.cv-about-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 5px 12px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.15);
margin-bottom: 16px;
}
.cv-about-eyebrow i { margin-right: 6px; }
.cv-about-hero h1 {
margin: 0 0 12px;
font-size: 44px;
font-weight: 800;
letter-spacing: -0.01em;
}
.cv-about-tagline {
margin: 0;
font-size: 17px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.92);
}
/* Feature cards */
.cv-about-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.cv-about-card {
display: flex;
flex-direction: column;
background: var(--c-surface);
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: transform var(--t), box-shadow var(--t);
}
.cv-about-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.cv-about-card-media {
background: var(--c-surface-2);
padding: 24px;
text-align: center;
border-bottom: 1px solid var(--c-border-soft);
}
.cv-about-card-media img {
max-width: 100%;
max-height: 150px;
height: auto;
}
.cv-about-card-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 22px 24px 24px;
}
.cv-about-card-body h2 {
margin: 0 0 12px;
font-size: 20px;
font-weight: 700;
color: var(--cv-dark);
}
.cv-about-card-body h2 i { color: var(--cv-mid); margin-right: 8px; }
.cv-about-card-body p {
margin: 0 0 20px;
font-size: 14px;
line-height: 1.65;
color: #46586e;
text-align: justify;
flex: 1;
}
.cv-about-btn {
align-self: flex-start;
display: inline-block;
padding: 9px 18px;
border-radius: var(--radius-pill);
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff !important;
font-size: 13px;
font-weight: 600;
text-decoration: none !important;
transition: filter var(--t), box-shadow var(--t);
box-shadow: var(--shadow-sm);
}
.cv-about-btn:hover { filter: brightness(1.08); box-shadow: var(--shadow-md); }
.cv-about-btn i { margin-left: 6px; font-size: 11px; }
/* Responsive */
@media (max-width: 991px) {
.cv-about-grid { grid-template-columns: 1fr; }
.cv-about-hero { padding: 36px 24px; }
.cv-about-hero h1 { font-size: 34px; }
}
/* ===================================================================================
Public Portal (portal.jspf / start.jsp)
=================================================================================== */
.cv-portal { margin-top: 12px; }
/* Toolbar: tabs + search */
.cv-portal-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 16px;
background: var(--cv-panel-bg);
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-lg);
margin-bottom: 18px;
}
.cv-portal-tabs { display: flex; gap: 6px; }
.cv-portal-tab {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 18px;
border-radius: var(--radius-pill);
font-size: 14px;
font-weight: 600;
color: var(--cv-dark) !important;
text-decoration: none !important;
border: 1px solid transparent;
transition: background var(--t), border-color var(--t);
}
.cv-portal-tab:hover { background: var(--cv-item-hover); }
.cv-portal-tab.active {
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff !important;
box-shadow: var(--shadow-sm);
}
.cv-portal-search {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
flex: 1;
min-width: 280px;
max-width: 560px;
position: relative;
}
.cv-portal-search > .fa-search {
position: absolute;
left: 14px;
color: var(--c-muted);
pointer-events: none;
}
.cv-portal-search input {
flex: 1;
height: 40px;
padding: 0 14px 0 36px;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-pill);
background: #fff;
font-size: 14px;
outline: none;
transition: border-color var(--t), box-shadow var(--t);
}
.cv-portal-search input:focus {
border-color: var(--cv-mid);
box-shadow: 0 0 0 3px rgba(45, 90, 142, 0.12);
}
.cv-portal-btn {
height: 40px;
padding: 0 18px;
border: none;
border-radius: var(--radius-pill);
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: filter var(--t);
}
.cv-portal-btn:hover { filter: brightness(1.08); }
.cv-portal-btn.ghost {
background: #fff;
color: var(--cv-mid);
border: 1px solid var(--cv-panel-border);
}
.cv-portal-btn.ghost:hover { background: var(--cv-item-hover); filter: none; }
/* Browse tree */
.cv-portal-tree { display: flex; flex-direction: column; gap: 12px; }
.cv-portal-org {
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-lg);
background: var(--c-surface);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.cv-portal-org.open { box-shadow: var(--shadow-md); }
.cv-portal-org-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
}
.cv-portal-org-link {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
color: var(--cv-dark) !important;
text-decoration: none !important;
}
.cv-portal-caret { color: var(--cv-mid); font-size: 12px; width: 12px; flex-shrink: 0; }
.cv-portal-org-logo {
max-height: 26px;
max-width: 100px;
width: auto;
background: #aebfd1;
padding: 4px 8px;
border-radius: var(--radius-sm);
border: 1px solid var(--cv-panel-border);
}
.cv-portal-org-name { font-weight: 700; font-size: 15px; }
.cv-portal-visit {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: var(--radius-pill);
background: var(--cv-panel-bg);
border: 1px solid var(--cv-panel-border);
color: var(--cv-dark) !important;
font-size: 12px;
font-weight: 600;
text-decoration: none !important;
white-space: nowrap;
transition: background var(--t);
}
.cv-portal-visit:hover { background: var(--cv-item-hover); }
.cv-portal-progs {
border-top: 1px solid var(--c-border-soft);
background: #fbfdff;
padding: 6px 0;
}
.cv-portal-prog {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 16px 9px 30px;
color: var(--cv-dark) !important;
text-decoration: none !important;
font-size: 14px;
font-weight: 600;
transition: background var(--t);
}
.cv-portal-prog:hover { background: var(--cv-item-hover); }
.cv-portal-prog .fa-folder, .cv-portal-prog .fa-folder-open { color: var(--cv-mid); }
.cv-portal-prog-name { min-width: 0; }
.cv-portal-lessons { background: #f7fafd; padding: 4px 0; }
.cv-portal-lesson {
display: block;
padding: 8px 16px 8px 54px;
color: #34465c !important;
text-decoration: none !important;
font-size: 13px;
transition: background var(--t);
}
.cv-portal-lesson:hover { background: var(--cv-item-hover); }
.cv-portal-lesson.active {
background: var(--cv-item-active);
font-weight: 700;
color: var(--cv-dark) !important;
border-left: 4px solid var(--cv-mid);
padding-left: 50px;
}
.cv-portal-lesson .fa-graduation-cap { color: var(--cv-mid); margin-right: 4px; }
.cv-portal-lesson-code { font-weight: 700; color: var(--cv-mid); }
.cv-portal-empty {
padding: 10px 16px 10px 54px;
color: var(--c-muted);
font-size: 13px;
font-style: italic;
}
.cv-portal-empty i { margin-right: 6px; }
/* Course detail card (shared by browse + search) */
.cv-course-detail {
margin: 8px 16px 14px 54px;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
background: var(--c-surface);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.cv-portal-results .cv-course-detail { margin: 0 0 16px; }
.cv-course-detail-head {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
}
.cv-course-code {
flex-shrink: 0;
padding: 4px 10px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.18);
font-weight: 700;
font-size: 13px;
}
.cv-course-title { font-weight: 700; font-size: 16px; }
.cv-course-detail-body {
display: grid;
grid-template-columns: 110px 1fr 230px;
gap: 20px;
padding: 20px;
}
.cv-course-media { position: relative; text-align: center; }
.cv-course-media img {
width: 96px;
height: 96px;
object-fit: cover;
border-radius: var(--radius-md);
border: 1px solid var(--cv-panel-border);
}
.cv-course-media-ext {
position: absolute;
top: 4px;
right: 4px;
background: rgba(0, 0, 0, 0.55);
color: #fff;
padding: 4px;
border-radius: var(--radius-sm);
font-size: 12px;
}
.cv-course-main { min-width: 0; }
.cv-course-desc {
font-size: 14px;
line-height: 1.6;
color: #46586e;
max-height: 160px;
overflow: auto;
margin-bottom: 14px;
}
.cv-course-section { margin-bottom: 12px; font-size: 13px; color: #46586e; }
.cv-course-section h4 {
margin: 0 0 5px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--cv-mid);
}
.cv-course-section .fa-user { color: var(--cv-mid); }
.cv-course-side {
border-left: 1px solid var(--c-border-soft);
padding-left: 18px;
font-size: 13px;
}
.cv-course-meta {
display: flex;
align-items: baseline;
gap: 8px;
padding: 5px 0;
color: var(--cv-dark);
border-bottom: 1px solid var(--c-border-soft);
}
.cv-course-meta i { color: var(--cv-mid); width: 14px; flex-shrink: 0; }
.cv-course-badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 6px 12px;
border-radius: var(--radius-pill);
background: var(--cv-panel-bg);
color: var(--cv-dark);
font-size: 12px;
font-weight: 600;
}
.cv-course-badge i { color: var(--cv-mid); }
.cv-course-stat {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
color: #46586e;
}
.cv-course-stat i { color: var(--cv-mid); width: 14px; }
.cv-course-stat strong { color: var(--cv-dark); }
.cv-course-rating { margin-top: 10px; display: flex; align-items: center; gap: 2px; }
.cv-course-rating-count { margin-left: 6px; color: var(--c-muted); font-size: 12px; }
/* Search results list */
.cv-portal-results-head {
font-size: 18px;
font-weight: 700;
color: var(--cv-dark);
margin: 0 0 16px;
}
.cv-portal-results-range { font-size: 13px; font-weight: 400; color: var(--c-muted); }
.cv-portal-result {
display: flex;
align-items: center;
gap: 16px;
padding: 14px;
margin-bottom: 12px;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-lg);
background: var(--c-surface);
box-shadow: var(--shadow-sm);
transition: transform var(--t), box-shadow var(--t);
}
.cv-portal-result:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cv-portal-result-thumb { flex-shrink: 0; }
.cv-portal-result-thumb img {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: var(--radius-md);
border: 1px solid var(--cv-panel-border);
}
.cv-portal-result-body { flex: 1; min-width: 0; }
.cv-portal-result-org {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--cv-mid);
margin-bottom: 3px;
}
.cv-portal-result-title { margin: 0 0 5px; font-size: 15px; font-weight: 700; }
.cv-portal-result-title a { color: var(--cv-dark) !important; text-decoration: none !important; }
.cv-portal-result-title a:hover { color: var(--cv-mid) !important; }
.cv-portal-result-desc { font-size: 13px; line-height: 1.55; color: #46586e; }
.cv-portal-result-info {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--cv-panel-bg);
color: var(--cv-mid) !important;
font-size: 18px;
text-decoration: none !important;
transition: background var(--t), color var(--t);
}
.cv-portal-result-info:hover {
background: var(--cv-mid);
color: #fff !important;
}
.cv-portal-pager { margin-top: 18px; text-align: center; }
/* Responsive */
@media (max-width: 991px) {
.cv-portal-toolbar { flex-direction: column; align-items: stretch; }
.cv-portal-search { max-width: none; }
.cv-course-detail-body { grid-template-columns: 1fr; }
.cv-course-side { border-left: none; padding-left: 0; border-top: 1px solid var(--c-border-soft); padding-top: 14px; }
.cv-course-media { text-align: left; }
}
/* =======================================================================
Digital Content (course_content*.jsp) — cv-dc-*
Modern resource presentation: list-rows, tabs, info panel, tile grid.
======================================================================= */
.cv-dc { max-width: 1040px; margin: 0 auto; padding: 4px 6px 14px; }
/* Full-width service page, like forums (#pMain .cv-forum) and site news
(.cv-news--wide): the resource rows are a list of wide rows and the 1040px cap
wasted most of the screen. Scoped to #pMain so an embedded .cv-dc (the
course_content_embed file browser inside a dialog) keeps the narrow reading width. */
#pMain .cv-dc { width: 100%; max-width: none; margin: 0; }
/* --- Header ------------------------------------------------------------- */
.cv-dc-header {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 12px;
margin: 6px 2px 14px;
}
.cv-dc-header h2 {
margin: 0;
font-size: 150%;
font-weight: 700;
color: var(--cv-dark);
}
.cv-dc-header .cv-dc-crumb {
font-size: 92%;
color: var(--c-muted);
}
/* --- Tabs (categories / subcategories) ---------------------------------- */
.cv-dc-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
list-style: none;
margin: 0 0 12px;
padding: 0;
}
.cv-dc-tab {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-pill);
background: #fff;
color: var(--cv-mid) !important;
font-size: 90%;
font-weight: 600;
text-decoration: none !important;
cursor: pointer;
transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
}
.cv-dc-tab:hover { background: var(--cv-item-hover); border-color: #8fb8de; }
.cv-dc-tab.is-active {
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
border-color: var(--cv-mid);
color: #fff !important;
box-shadow: var(--shadow-sm);
}
.cv-dc-tab .fa { font-size: 92%; opacity: .85; }
.cv-dc-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 18px;
padding: 0 6px;
border-radius: var(--radius-pill);
background: var(--cv-panel-bg);
color: var(--cv-mid);
font-size: 80%;
font-weight: 700;
}
.cv-dc-tab.is-active .cv-dc-tab-count { background: rgba(255,255,255,.22); color: #fff; }
/* nav (home / up) icon buttons */
.cv-dc-nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-pill);
background: #fff;
color: var(--cv-mid) !important;
text-decoration: none !important;
transition: background var(--t), border-color var(--t);
}
.cv-dc-nav:hover { background: var(--cv-item-hover); border-color: #8fb8de; }
.cv-dc-subtabs { margin-bottom: 14px; }
/* --- Summary bar -------------------------------------------------------- */
.cv-dc-summary {
display: flex;
align-items: center;
gap: 8px;
font-size: 87%;
color: var(--c-muted);
padding: 2px 4px 10px;
}
.cv-dc-summary .fa { color: var(--cv-mid); opacity: .7; }
/* --- Resource list ------------------------------------------------------ */
.cv-dc-list { display: flex; flex-direction: column; gap: 8px; }
.cv-dc-row {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-left: 4px solid var(--c-brand);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 12px 14px;
transition: box-shadow var(--t), border-color var(--t);
}
.cv-dc-row:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; border-left-color: var(--cv-mid); }
.cv-dc-icon {
flex-shrink: 0;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
background: var(--c-brand-softer);
border-radius: var(--radius-sm);
}
.cv-dc-icon img { max-width: 32px; max-height: 32px; }
.cv-dc-icon .fa { font-size: 24px; color: var(--cv-mid); }
.cv-dc-body { flex: 1; min-width: 0; }
.cv-dc-title {
margin: 0;
font-size: 104%;
font-weight: 700;
color: var(--cv-dark);
line-height: 1.3;
}
.cv-dc-desc {
margin-top: 3px;
font-size: 86%;
color: #5c6b7f;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cv-dc-meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; }
/* --- Action buttons ----------------------------------------------------- */
.cv-dc-actions {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 6px;
}
.cv-dc-act {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid var(--c-border-soft);
border-radius: var(--radius-sm);
background: var(--c-surface-2);
color: var(--cv-mid) !important;
text-decoration: none !important;
transition: background var(--t), border-color var(--t), color var(--t);
}
.cv-dc-act:hover { background: var(--cv-item-hover); border-color: #8fb8de; }
.cv-dc-act .fa { font-size: 17px; }
.cv-dc-act.is-alert { color: var(--c-danger) !important; }
.cv-dc-act.is-disabled {
color: #b6bec9 !important;
background: #fff;
border-style: dashed;
cursor: default;
}
.cv-dc-act.is-disabled:hover { background: #fff; border-color: #d1dce8; }
.cv-dc-act.is-pending { color: var(--c-warning) !important; }
/* --- Empty state -------------------------------------------------------- */
.cv-dc-empty, .cv-svc-empty {
background: #fff;
border: 1px dashed var(--cv-panel-border);
border-radius: var(--radius-md);
text-align: center;
padding: 45px 20px;
}
.cv-dc-empty > .fa, .cv-svc-empty > .fa { font-size: 42px; color: var(--cv-panel-border); display: block; margin-bottom: 12px; }
.cv-dc-empty p, .cv-svc-empty p { margin: 0; font-size: 110%; color: #6b7c93; font-weight: 600; }
/* --- Pagination footer -------------------------------------------------- */
.cv-dc-pager, .cv-svc-pager { padding: 14px 2px 2px; text-align: right; }
/* --- Info panel (course_content_info.jsp) ------------------------------- */
.cv-dc-info { padding: 2px; }
.cv-dc-info h4 {
margin: 6px 2px 10px;
font-size: 100%;
font-weight: 700;
color: var(--cv-dark);
}
.cv-dc-ver { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cv-dc-ver-item {
display: flex;
align-items: center;
gap: 12px;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 8px 12px;
}
.cv-dc-ver-avatar {
width: 42px;
height: 42px;
flex-shrink: 0;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--c-border-soft);
}
.cv-dc-ver-body { flex: 1; min-width: 0; }
.cv-dc-ver-title { font-weight: 700; color: var(--cv-dark); }
.cv-dc-ver-sub { font-size: 84%; color: var(--c-muted); }
.cv-dc-ver-sub a { color: var(--cv-mid) !important; }
.cv-dc-ver-actions { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.cv-dc-metalist {
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
overflow: hidden;
margin: 16px 0;
}
.cv-dc-meta-row { display: flex; border-top: 1px solid var(--c-border-soft); }
.cv-dc-meta-row:first-child { border-top: none; }
.cv-dc-meta-label {
flex: 0 0 140px;
padding: 9px 12px;
background: var(--c-surface-2);
font-weight: 700;
color: var(--cv-mid);
font-size: 88%;
}
.cv-dc-meta-value { flex: 1; padding: 9px 12px; color: var(--cv-dark); min-width: 0; }
/* --- Tile grid (embed: collections / galleries) ------------------------- */
.cv-dc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
padding: 4px 0;
}
.cv-dc-tile {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 16px 12px;
color: var(--cv-dark) !important;
text-decoration: none !important;
transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.cv-dc-tile:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; transform: translateY(-2px); }
.cv-dc-tile img { max-width: 48px; max-height: 48px; }
.cv-dc-tile .fa { font-size: 48px; }
.cv-dc-tile .fa-folder { color: #ffce3a; }
.cv-dc-tile-name { font-size: 86%; font-weight: 600; word-break: break-word; line-height: 1.35; }
/* gallery thumbnail variant */
.cv-dc-thumb { padding: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.cv-dc-thumb img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
/* --- Download panel (embed: single file) -------------------------------- */
.cv-dc-download {
max-width: 560px;
margin: 30px auto;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 30px 28px;
text-align: center;
}
.cv-dc-download h2 { margin: 0 0 6px; font-size: 130%; font-weight: 700; color: var(--cv-dark); }
.cv-dc-download p { margin: 0 0 20px; color: var(--c-muted); }
.cv-dc-download-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff !important;
font-weight: 600;
text-decoration: none !important;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--t), transform var(--t);
}
.cv-dc-download-btn:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cv-dc-download-btn .fa { font-size: 22px; }
/* --- Media player card (embed: audio / single media) -------------------- */
.cv-dc-media {
max-width: 560px;
margin: 30px auto;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 30px 28px;
text-align: center;
}
.cv-dc-media-icon {
width: 64px;
height: 64px;
margin: 0 auto 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
box-shadow: var(--shadow-sm);
}
.cv-dc-media-icon .fa { font-size: 28px; }
.cv-dc-media h2 { margin: 0 0 18px; font-size: 130%; font-weight: 700; color: var(--cv-dark); }
.cv-dc-media audio { width: 100%; display: block; }
/* standalone media heading (e.g. audiovisual player title) */
.cv-dc-media-title { margin: 0 0 18px; font-size: 130%; font-weight: 700; color: var(--cv-dark); }
/* --- HTML-fragment reading panel (embed: fhtml) ------------------------- */
.cv-dc-doc {
width: 100%;
margin: 0;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 32px 40px;
border-top: 3px solid var(--c-brand);
}
.cv-dc-doc .cefhtml { min-height: 0; }
/* --- Text-file viewer (embed: yaml/json/txt/md/xml) --------------------- */
.cv-dc-textview {
width: 100%;
margin: 0;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.cv-dc-textview-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 16px;
background: var(--c-surface-2);
border-bottom: 1px solid var(--cv-panel-border);
border-top: 3px solid var(--c-brand);
}
.cv-dc-textview-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
color: var(--cv-dark);
font-size: 92%;
}
.cv-dc-textview-pre {
margin: 0;
padding: 16px;
max-height: 760px;
overflow: auto;
}
/* --- Responsive --------------------------------------------------------- */
@media (max-width: 600px) {
.cv-dc-row { flex-wrap: wrap; }
.cv-dc-actions { width: 100%; justify-content: flex-end; }
.cv-dc-meta-row { flex-direction: column; }
.cv-dc-meta-label { flex-basis: auto; }
.cv-dc-doc { padding: 20px 18px; margin: 0; }
}
/* =======================================================================
Presentation viewer (presentation.jsp) — cv-pres-*
PDF/slide viewer: left page-navigator sidebar + main stage with toolbar.
Markup/CSS only — preserves the #presentationDiv/#pres_view/#pdoc/
#pdoc_page render pipeline, annotation pins, .overlay and browsePage() nav.
======================================================================= */
/* ---- sidebar nav buttons (return / lesson) ---- */
.cv-pres-navbtn {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px; margin-bottom: 8px;
background: #fff; border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
color: var(--cv-dark); font-weight: 600; text-decoration: none;
transition: box-shadow var(--t), color var(--t);
}
.cv-pres-navbtn:hover { color: var(--c-brand); box-shadow: var(--shadow-md); text-decoration: none; }
.cv-pres-navbtn .fa { color: var(--c-brand); }
/* ---- page navigator ---- */
.cv-pres-pages {
background: #fff; border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
overflow: hidden; margin-bottom: 12px;
}
.cv-pres-pages-head {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; font-weight: 700; font-size: 92%; color: var(--cv-dark);
background: var(--c-surface-2); border-bottom: 1px solid var(--cv-panel-border);
}
.cv-pres-pages-head .fa { color: var(--c-brand); }
.cv-pres-page {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; border-bottom: 1px solid var(--cv-panel-border);
color: var(--cv-dark); text-decoration: none; transition: background var(--t), color var(--t);
}
.cv-pres-page:last-of-type { border-bottom: 0; }
.cv-pres-page:hover { background: var(--c-surface-2); color: var(--c-brand); text-decoration: none; }
.cv-pres-page.is-active { background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%); color: #fff; }
.cv-pres-page.is-active:hover { color: #fff; }
.cv-pres-page.is-active .cv-pres-page-no { background: rgba(255,255,255,.25); color: #fff; }
.cv-pres-page-no {
flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 6px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--c-surface-2); border-radius: 6px;
font-weight: 700; font-size: 84%; color: var(--c-muted);
}
.cv-pres-page-title { font-size: 88%; line-height: 1.3; overflow: hidden; word-break: break-word; }
/* compact slide-window pager */
.cv-pres-setpager {
display: flex; align-items: center; gap: 6px;
padding: 8px; background: var(--c-surface-2); border-top: 1px solid var(--cv-panel-border);
}
.cv-pres-setpager a {
flex: 0 0 auto; width: 28px; height: 28px; border-radius: 6px;
display: inline-flex; align-items: center; justify-content: center;
background: #fff; border: 1px solid var(--cv-panel-border);
color: var(--cv-dark); text-decoration: none; transition: background var(--t), color var(--t);
}
.cv-pres-setpager a:hover { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.cv-pres-setpager .cv-pres-setrange { flex: 1; text-align: center; font-size: 84%; color: var(--c-muted); font-weight: 600; }
/* ---- annotations ---- */
.cv-pres-ann { margin-top: 12px; }
.cv-pres-ann-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cv-pres-ann-actions .btn { width: 100%; }
.cv-pres-ann-list {
background: #fff; border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.cv-pres-ann-item { padding: 10px 12px; border-bottom: 1px solid var(--cv-panel-border); }
.cv-pres-ann-item:last-child { border-bottom: 0; }
.cv-pres-ann-user { font-size: 80%; color: var(--c-muted); font-weight: 600; }
.cv-pres-ann-link { display: block; color: var(--cv-dark); font-weight: 600; font-size: 90%; text-decoration: none; }
.cv-pres-ann-link:hover { color: var(--c-brand); text-decoration: none; }
.cv-pres-ann-reply { margin: 8px 0 0 12px; padding-left: 10px; border-left: 2px solid var(--cv-panel-border); }
.cv-pres-ann-del { float: right; color: var(--c-danger); margin-left: 8px; }
.cv-pres-ann-del:hover { color: var(--c-danger); opacity: .8; }
.cv-pres-ann-empty { padding: 14px 12px; text-align: center; font-size: 88%; color: var(--c-muted); }
/* ---- main stage ---- */
.cv-pres-stage {
background: #fff; border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.cv-pres-toolbar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 14px; background: var(--c-surface-2);
border-bottom: 1px solid var(--cv-panel-border);
}
.cv-pres-toolbar .cv-pres-nav { display: inline-flex; align-items: center; }
.cv-pres-toolbar .pagination { margin: 0; }
.cv-pres-spacer { flex: 1 1 auto; }
.cv-pres-tool-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; border-radius: var(--radius-md);
background: #fff; border: 1px solid var(--cv-panel-border);
color: var(--cv-dark); font-weight: 600; font-size: 88%; text-decoration: none;
transition: box-shadow var(--t), color var(--t);
}
.cv-pres-tool-btn:hover { color: var(--c-brand); box-shadow: var(--shadow-sm); text-decoration: none; }
.cv-pres-tool-btn .fa { color: var(--c-brand); }
.cv-pres-count { font-size: 85%; color: var(--c-muted); font-weight: 600; }
.cv-pres-viewer { padding: 18px; background: var(--c-surface-2); text-align: center; }
/* white page surface — NO padding/border on #presentationDiv (pin offsets depend on it) */
.cv-pres-viewer #presentationDiv {
background: #fff; border-radius: 6px; box-shadow: var(--shadow-md); margin: 0 auto;
}
.cv-pres-footer {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--cv-panel-border);
}
@media (max-width: 600px) {
.cv-pres-toolbar { gap: 6px; }
.cv-pres-tool-btn { padding: 6px 9px; font-size: 84%; }
.cv-pres-viewer { padding: 8px; }
}
/* =======================================================================
Annotation thread view (annotation.jsp) — cv-annv-*
Loaded into #directory inside presentation.jsp's #usrAnnModal via
request(); selectors are GLOBAL (NOT under #pMain). Preserves the
prequest('user') links + setAnnotationParent()/showReply() reply hooks.
======================================================================= */
.cv-annv { display: flex; flex-direction: column; gap: 12px; }
.cv-annv-card {
background: #fff; border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
padding: 14px 16px;
}
.cv-annv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cv-annv-avatar {
width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
border: 1px solid var(--cv-panel-border); background: var(--c-surface-2); flex: 0 0 auto;
}
.cv-annv-meta { min-width: 0; }
.cv-annv-author { font-weight: 700; color: var(--cv-dark); text-decoration: none; }
.cv-annv-author:hover { color: var(--c-brand); text-decoration: none; }
.cv-annv-date { font-size: 82%; color: var(--c-muted); margin-top: 2px; }
.cv-annv-date .fa { margin-right: 4px; }
.cv-annv-title { font-weight: 600; color: var(--cv-dark); margin-bottom: 6px; }
.cv-annv-body { color: var(--cv-dark); line-height: 1.5; word-break: break-word; }
.cv-annv-body img { max-width: 100%; height: auto; }
.cv-annv-actions { margin-top: 12px; text-align: right; }
.cv-annv-foot { margin-top: 0; }
/* replies: indented, accent rail, lighter surface */
.cv-annv-replies {
display: flex; flex-direction: column; gap: 10px;
margin-left: 22px; padding-left: 14px; border-left: 3px solid var(--cv-panel-border);
}
.cv-annv-reply { background: var(--c-surface-2); box-shadow: none; }
.cv-annv-reply .cv-annv-avatar { width: 36px; height: 36px; }
/* =======================================================================
AI Coach Rooms (course_airooms*.jsp) — cv-air-*
Modern room list + guided-chat interface. Markup-only redesign; the
chat JS (maestroai_coach_chat.js) DOM ids are preserved.
======================================================================= */
.cv-air { max-width: 1100px; margin: 0 auto; padding: 4px 6px 16px; }
/* The room LIST takes the full width of the page shell, exactly like #pMain .cv-dc (digital
content): its rooms are wide rows, so the cap wasted most of the screen. The cap above still
applies to the room itself (#airRoom in course_airooms_view.jsp, which has its own
fit-to-window layout) and to any embedded .cv-air. */
#pMain .cv-air:not(#airRoom) { width: 100%; max-width: none; margin: 0; }
/* --- Header ------------------------------------------------------------- */
.cv-air-header {
display: flex;
align-items: center;
gap: 16px;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 16px 20px;
margin-bottom: 14px;
}
.cv-air-header-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: rgba(255,255,255,.15);
font-size: 24px;
}
.cv-air-header h1 { margin: 0; font-size: 138%; font-weight: 700; color: #fff !important; }
.cv-air-header h1 span, .cv-air-header h1 a { color: #fff !important; }
.cv-air-header .cv-air-sub { margin-top: 3px; font-size: 90%; opacity: .85; }
/* --- Room list ---------------------------------------------------------- */
.cv-air-list { display: flex; flex-direction: column; gap: 10px; }
.cv-air-room {
display: flex;
align-items: center;
gap: 16px;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-left: 4px solid var(--c-brand);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 14px 16px;
transition: box-shadow var(--t), border-color var(--t);
}
.cv-air-room:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; border-left-color: var(--cv-mid); }
.cv-air-room-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--c-brand-softer);
color: var(--cv-mid);
font-size: 22px;
}
.cv-air-room-body { flex: 1; min-width: 0; }
.cv-air-room-title { margin: 0; font-size: 108%; font-weight: 700; color: var(--cv-dark); }
.cv-air-room-meta { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px; }
.cv-air-room-desc {
margin-top: 6px;
font-size: 87%;
color: #5c6b7f;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cv-air-enter {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff !important;
font-weight: 600;
text-decoration: none !important;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--t), transform var(--t);
}
.cv-air-enter:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); color: #fff !important; }
/* --- Empty state -------------------------------------------------------- */
.cv-air-empty {
background: #fff;
border: 1px dashed var(--cv-panel-border);
border-radius: var(--radius-md);
text-align: center;
padding: 50px 20px;
}
.cv-air-empty .cv-air-empty-ico { font-size: 52px; display: block; margin-bottom: 12px; opacity: .8; }
.cv-air-empty p { margin: 0; font-size: 115%; color: #6b7c93; font-weight: 600; }
/* --- Chat shell --------------------------------------------------------- */
.cv-air-chat {
display: grid;
grid-template-columns: 1fr 290px;
gap: 14px;
align-items: start;
}
.cv-air-chat-main {
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 14px;
}
/* Chat scroll area + bubble skin (scoped so global .paleBlock/.whiteBlock
are untouched outside the chat). Bubbles are .paleBlock (user) /
.whiteBlock (coach) divs emitted by AIServiceHelper + the chat JS. */
.cv-air-messages { border-radius: var(--radius-sm); overflow: hidden; }
/* Neutralize the legacy fixed-height/clipping wrapper (cechat.css gives it
height:342px + overflow, which clips the taller #chatMessages scroller and
hides the last lines). Let #chatMessages be the sole scroll container. */
.cv-air-messages .chat_box_wrapper.chat_box_small.chat_box_active {
height: auto !important;
width: 100% !important;
overflow: visible !important;
}
.cv-air-messages .chat_box {
background: var(--c-surface-2) !important;
border-radius: var(--radius-sm);
}
.cv-air-messages > .chat_box_wrapper,
.cv-air-messages .chat_box { padding: 14px !important; }
.cv-air-messages #chatMessages { height: 440px !important; padding-bottom: 28px !important; }
/* message text is regular weight (the old label selector below used to match #chatMessages itself,
so the whole conversation inherited bold 13px) */
.cv-air-messages #chatMessages { font-weight: 400; }
/* message-author label ("You" / "AI Coach"): first child of each message wrapper */
.cv-air-messages #chatMessages > div > div:first-child {
font-size: 13px;
font-weight: 700 !important;
color: var(--cv-mid);
margin-bottom: 5px;
}
.cv-air-messages .paleBlock,
.cv-air-messages .whiteBlock {
padding: 13px 18px !important;
border-radius: 14px !important;
border: 1px solid var(--cv-panel-border);
box-shadow: var(--shadow-sm);
line-height: 1.6;
font-size: 15px;
font-weight: 400;
color: var(--cv-dark);
}
.cv-air-messages .paleBlock strong,
.cv-air-messages .whiteBlock strong { font-weight: 600; }
/* markdown tables in coach answers (util.MarkdownTables emits table.md-table) */
.cv-air-messages .whiteBlock table.md-table {
display: block;
max-width: 100%;
overflow-x: auto;
border-collapse: collapse;
margin: 8px 0 12px;
font-size: 14px;
line-height: 1.45;
}
.cv-air-messages .whiteBlock table.md-table th,
.cv-air-messages .whiteBlock table.md-table td {
border: 1px solid var(--cv-panel-border);
padding: 6px 10px;
vertical-align: top;
text-align: left;
}
.cv-air-messages .whiteBlock table.md-table th {
background: var(--c-brand-softer);
font-weight: 600;
color: var(--cv-dark);
}
.cv-air-messages .whiteBlock table.md-table tbody tr:nth-child(even) td { background: var(--c-surface-2); }
/* coach answers span the full width; user messages hug their content */
.cv-air-messages .whiteBlock {
background: #fff !important;
display: block !important;
max-width: 100%;
margin-bottom: 6px;
}
.cv-air-messages .paleBlock {
background: var(--c-brand-softer) !important;
border-color: #cfe3f5;
max-width: 100%;
}
.cv-air-messages .whiteBlock p { margin: 0 0 10px; }
.cv-air-messages .whiteBlock p:last-child,
.cv-air-messages .whiteBlock ul:last-child,
.cv-air-messages .whiteBlock ol:last-child { margin-bottom: 0; }
.cv-air-messages .whiteBlock ul,
.cv-air-messages .whiteBlock ol { margin: 6px 0 10px; padding-left: 22px; }
.cv-air-messages .whiteBlock li { margin-bottom: 4px; }
/* --- Composer ----------------------------------------------------------- */
.cv-air-inputbar {
display: flex;
align-items: stretch;
gap: 8px;
margin-top: 14px;
}
/* the input field: textarea + counter + the send button inside it (bottom-right) */
.cv-air-field {
flex: 1;
min-width: 0;
display: flex;
align-items: flex-end;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
padding: 0 6px 0 0;
transition: border-color var(--t), box-shadow var(--t);
}
.cv-air-field:focus-within { border-color: #8fb8de; box-shadow: 0 0 0 3px rgba(60,132,189,.12); }
.cv-air-send.cv-air-send-in {
align-self: flex-end;
width: 38px;
height: 38px;
margin: 0 0 5px 4px;
padding: 0;
justify-content: center;
border-radius: 50%;
font-size: 14px;
}
.cv-air-send.cv-air-send-in .fa { margin-left: -2px; } /* the plane glyph looks off-centre */
.cv-air-inputbar textarea {
flex: 1;
border: none;
background: transparent;
outline: none;
box-shadow: none;
resize: none;
min-height: 48px;
max-height: 160px;
padding: 13px 12px;
line-height: 1.45;
font-size: 15px;
overflow-y: auto;
}
.cv-air-send {
flex-shrink: 0;
align-self: stretch;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 22px;
border: none;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
font-weight: 600;
font-size: 15px;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--t), transform var(--t);
}
.cv-air-send:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); color: #fff; }
.cv-air-send:disabled { opacity: .6; cursor: default; transform: none; }
/* "Continue" (slide-backed rooms): secondary twin of the send button */
.cv-air-continue {
flex-shrink: 0;
align-self: stretch;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 14px;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-sm);
background: #fff;
color: var(--cv-dark);
font-weight: 600;
font-size: 14px;
}
.cv-air-continue:hover { background: var(--c-brand-softer); }
.cv-air-continue:disabled { opacity: .6; cursor: default; }
/* coach "next slide" button: icon only (tooltip says next slide / activity) */
.cv-air-continue.cv-air-continue-icon { padding: 0; width: 42px; justify-content: center; font-size: 15px; color: var(--cv-mid); }
/* --- Slide pane (slide-backed rooms, scripts/airoom_material.js) ------- */
.cv-air-has-deck .cv-air-messages #chatMessages { height: 320px !important; }
.cv-air-material {
margin-bottom: 12px;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-sm);
background: var(--c-surface-2);
overflow: hidden;
}
.cv-air-mat-bar {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
background: #fff;
border-bottom: 1px solid var(--cv-panel-border);
flex-wrap: wrap;
}
.cv-air-mat-bar button {
border: 1px solid var(--cv-panel-border);
background: #fff;
color: var(--cv-dark);
border-radius: var(--radius-sm);
min-width: 32px;
height: 30px;
padding: 0 8px;
line-height: 28px;
}
.cv-air-mat-bar button:hover:not(:disabled) { background: var(--c-brand-softer); }
.cv-air-mat-bar button:disabled { opacity: .4; cursor: default; }
.cv-air-mat-label { font-weight: 600; color: var(--cv-dark); font-size: 13px; padding: 0 4px; white-space: nowrap; }
.cv-air-mat-back { font-size: 12px; }
.cv-air-mat-spacer { flex: 1; }
.cv-air-mat-view {
display: flex;
justify-content: center;
align-items: center;
padding: 8px;
min-height: 120px;
}
.cv-air-mat-view canvas {
display: block;
max-width: 100%;
background: #fff;
box-shadow: var(--shadow-sm);
}
.cv-air-mat-msg { color: #6b7c93; font-size: 13px; }
.cv-air-material.cv-air-mat-collapsed .cv-air-mat-view { display: none; }
@media (max-width: 767px) {
.cv-air-has-deck .cv-air-messages #chatMessages { height: 300px !important; }
.cv-air-mat-back .cv-air-mat-txt { display: none; }
}
/* --- Code area (course_ai_rooms.code_area, scripts/airoom_code.js) ----- */
.cv-air-code {
margin-top: 10px;
padding: 10px;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-sm);
background: var(--c-surface-2);
}
.cv-air-code-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--cv-dark); }
/* the code area as a modal (#airCodeModal): the panel fills the dialog, more room for the code */
.cv-air-code-modal .cv-air-code { margin: 0; padding: 16px 18px; border: 0; border-radius: var(--radius-md); background: #fff; }
.cv-air-code-modal .cv-air-code-head { font-size: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--cv-panel-border); margin-bottom: 12px; }
.cv-air-code-modal .cv-air-code-close { font-size: 20px; }
.cv-air-code-modal .cv-air-code-text { height: 45vh; min-height: 200px; }
.cv-air-code-modal .cv-air-code-files { max-height: 30vh; }
@media (min-width: 1200px) { .cv-air-code-modal .modal-lg { width: 1100px; } }
.cv-air-code-close { border: 0; background: transparent; color: #6b7c93; font-size: 16px; padding: 0 4px; }
.cv-air-code-drop {
padding: 10px;
margin-bottom: 8px;
border: 2px dashed #c9d6e3;
border-radius: var(--radius-sm);
background: #fff;
text-align: center;
color: #6b7c93;
font-size: 13px;
}
.cv-air-code-drop.cv-air-code-over { border-color: #3c84bd; background: var(--c-brand-softer); }
.cv-air-code-exts { margin-top: 4px; font-size: 12px; }
.cv-air-code-files {
list-style: none;
margin: 0 0 8px;
padding: 6px 8px;
max-height: 140px;
overflow: auto;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-sm);
font-size: 12px;
}
.cv-air-code-files label { font-weight: normal; margin: 0; font-family: Menlo, Consolas, "Courier New", monospace; cursor: pointer; }
.cv-air-code-files ul { list-style: none; margin: 0; padding-left: 16px; }
.cv-air-code-files li { white-space: nowrap; }
.cv-air-code-all { padding-bottom: 3px; margin-bottom: 3px; border-bottom: 1px solid var(--cv-panel-border); }
.cv-air-code-all label { font-family: inherit; font-weight: 600; }
.cv-air-code-caret { width: 14px; padding: 0; border: 0; background: transparent; color: #6b7c93; }
.cv-air-code-leaf { padding-left: 14px; } /* lines files up with folder names (caret width) */
.cv-air-code-dir .fa-folder-o, .cv-air-code-dir .fa-folder-open-o { color: #c99a2e; }
.cv-air-code-question { margin-bottom: 6px; }
.cv-air-code-text {
height: 140px; /* same as the file tree */
font-family: Menlo, Consolas, "Courier New", monospace;
font-size: 12.5px;
line-height: 1.45;
white-space: pre;
tab-size: 4;
resize: vertical;
}
.cv-air-code-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: #6b7c93; }
.cv-air-code-spacer { flex: 1; }
.cv-air-code-error { color: #c0392b; font-weight: 600; }
.cv-air-code-n { color: #8a97a8; font-weight: normal; }
/* Learner bubble of a code message (ai.CodeMessage.toHtml / _codeHtml): collapsed card */
.cv-air-code-bubble { max-width: 100%; }
.cv-air-code-q { margin-bottom: 6px; }
.cv-air-code-name { font-size: 12px; color: #4a5a6e; margin-bottom: 2px; }
.cv-air-code-card > summary { cursor: pointer; font-weight: 600; color: var(--cv-dark); }
.cv-air-code-file { margin: 4px 0 0 14px; }
.cv-air-code-file > summary { cursor: pointer; font-size: 12.5px; font-family: Menlo, Consolas, "Courier New", monospace; }
.cv-air-code-pre {
margin: 4px 0 0;
padding: 8px 10px;
max-height: 240px;
max-width: 100%;
overflow: auto;
white-space: pre;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-sm);
font-size: 12px;
line-height: 1.45;
tab-size: 4;
}
/* --- Coach side panel --------------------------------------------------- */
.cv-air-side {
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 16px;
}
.cv-air-side h3 {
margin: 0 0 4px;
font-size: 104%;
font-weight: 700;
color: var(--cv-dark);
display: flex;
align-items: center;
gap: 8px;
}
.cv-air-side .cv-air-model { font-size: 80%; color: var(--c-muted); margin-bottom: 8px; }
.cv-air-side hr { margin: 12px 0; border-color: var(--c-border-soft); }
.cv-air-stat { display: flex; justify-content: space-between; align-items: baseline; font-size: 86%; margin-bottom: 4px; }
.cv-air-stat .cv-air-stat-label { color: var(--c-muted); }
.cv-air-stat .cv-air-stat-val { font-weight: 700; color: var(--cv-dark); }
.cv-air-step-title { font-weight: 700; color: var(--cv-dark); margin-top: 2px; }
/* Lesson outline (plan parts) with the current position — course_airooms_view.jsp */
.cv-air-outline-head { font-size: 86%; color: var(--c-muted); margin-bottom: 6px; }
/* the plan header = the lesson's title above its parts (not a step) */
.cv-air-outline-lesson {
font-weight: 700; color: var(--cv-dark); font-size: 92%; line-height: 1.35;
margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-air-outline {
list-style: none;
margin: 0;
padding: 0;
max-height: 320px;
overflow-y: auto;
}
.cv-air-outline li {
display: flex;
align-items: baseline;
gap: 8px;
padding: 5px 8px;
border-radius: var(--radius);
font-size: 86%;
color: var(--c-muted);
border-left: 3px solid transparent;
}
.cv-air-outline-idx {
flex: 0 0 auto;
min-width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: var(--radius-pill);
background: var(--c-surface-2);
font-size: 85%;
font-weight: 700;
}
.cv-air-outline-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cv-air-outline li.cv-air-outline-done { color: var(--cv-dark); }
.cv-air-outline li.cv-air-outline-done .cv-air-outline-idx { background: var(--c-success-soft); color: var(--c-success); }
.cv-air-outline li.cv-air-outline-current {
color: var(--cv-dark);
font-weight: 700;
background: var(--cv-item-active);
border-left-color: var(--c-brand);
}
.cv-air-outline li.cv-air-outline-current .cv-air-outline-idx { background: var(--c-brand); color: #fff; }
.cv-air-outline li.cv-air-outline-locked { opacity: .7; }
.cv-air-outline li.cv-air-outline-go { cursor: pointer; }
.cv-air-outline li.cv-air-outline-go:hover { background: var(--cv-item-hover); }
.cv-air-side .btn { width: 100%; margin-bottom: 8px; }
.cv-air-side .btn:last-child { margin-bottom: 0; }
.cv-air-note { font-size: 80%; color: var(--c-muted); line-height: 1.5; }
.cv-air-badge-on {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 80%;
font-weight: 600;
color: var(--c-success);
background: var(--c-success-soft);
border-radius: var(--radius-pill);
padding: 2px 10px;
}
.cv-air-badge-on::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--c-success);
}
/* --- Management pages (mng_course_airooms.jsp, mng_course_airooms_view.jsp) ---
The cv-ui-* kit carries these pages; the rules below are only what the AI-room
specifics need: the room row, the authoring textareas and the plan palette. --- */
.cv-air-mng-title { font-weight: 700; color: var(--cv-dark); }
.cv-air-mng-title .fa { color: var(--cv-mid); margin-right: 4px; }
.cv-air-mng-acts { display: inline-flex; gap: 6px; }
#air_table .sortHandle { cursor: grab; color: var(--c-muted); }
#air_table .sortHandle .sequence { display: block; font-size: 12px; font-weight: 700; }
/* Authoring textareas: monospace prompt bodies, like the legacy .cfgTA they replace. */
.cv-air-ta { height: 170px; font-family: Menlo, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.45; resize: vertical; }
.cv-air-ta--sm { height: 100px; }
.cv-air-filebox { padding: 12px; border: 1px dashed var(--cv-panel-border); border-radius: var(--radius-md); background: var(--c-surface-2); }
.cv-air-planstart { margin-bottom: 10px; padding: 16px; text-align: center; background: var(--c-surface-2); border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); }
.cv-air-planstart .cv-ui-btn { margin: 0 4px; }
.cv-air-planbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
/* Plan editor: the textarea and its structure palette side by side.
maestro_plan_highlight.js wraps the textarea in a .mph-wrap that copies its
computed flex, so the flex/min-width must live on the textarea itself. */
.cv-air-planwrap { display: flex; gap: 8px; align-items: stretch; }
/* Tall enough that the structure palette beside it is never the taller column, and it
grows with the window; drag the corner for more. */
.cv-air-plantext {
flex: 1 1 auto; min-width: 0; height: 58vh; min-height: 440px;
font-family: Menlo, Consolas, "Courier New", monospace; font-size: 13px;
white-space: pre; overflow: auto; tab-size: 4; resize: vertical;
}
.cv-air-palette { flex: 0 0 140px; display: flex; flex-direction: column; gap: 3px; align-items: stretch; }
.cv-air-palette .pal-btn { justify-content: flex-start; padding: 4px 8px; font-size: 12px; }
.cv-air-palette .pal-btn.is-top { font-weight: 800; }
.cv-air-palette .pal-btn.is-l1 { margin-left: 10px; }
.cv-air-palette .pal-btn.is-l2 { margin-left: 20px; }
.cv-air-palette .pal-btn.is-l3 { margin-left: 30px; }
.cv-air-palette #planFmtBadge { justify-content: center; margin-bottom: 8px; }
.cv-air-palette-gap { flex: 1 1 auto; min-height: 16px; }
@media (max-width: 767px) {
.cv-air-planwrap { flex-direction: column; }
.cv-air-palette { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; }
.cv-air-palette .pal-btn { margin-left: 0; }
.cv-air-palette-gap { display: none; }
}
/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
.cv-air-chat { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.cv-air-room { flex-wrap: wrap; }
.cv-air-enter { width: 100%; justify-content: center; }
}
/* --- Part divider: "the lesson moved to the next part" (system line, not a coach bubble) ------- */
.cv-air-partdiv { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; animation: cvAirDivIn .35s ease; }
.cv-air-partdiv::before, .cv-air-partdiv::after { content: ""; flex: 1 1 24px; height: 1px; background: var(--cv-panel-border); }
.cv-air-partdiv-pill {
display: inline-flex; align-items: center; gap: 8px; max-width: 82%; min-width: 0;
padding: 3px 14px 3px 3px; border-radius: var(--radius-pill);
background: var(--c-brand-softer); border: 1px solid rgba(60,132,189,.25);
color: var(--cv-dark); font-size: 13px; font-weight: 600; line-height: 1.3;
}
.cv-air-partdiv-n {
flex: none; width: 24px; height: 24px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--c-brand); color: #fff; font-size: 12px; font-weight: 700;
}
.cv-air-partdiv-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@keyframes cvAirDivIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cv-air-partdiv { animation: none; } }
/* --- Room layout (scripts/airoom_layout.js sets the classes on #airRoom) ---------------------
cv-air-fit: fills the window height (messages scroll, input bar always visible);
cv-air-narrow (<900px): side panel as a drawer; cv-air-xs (<600px): compact;
cv-air-split: slides beside the chat; cv-air-full: covers the browser window. */
.cv-air.cv-air-deck { max-width: 1500px; } /* slide rooms use the extra width */
.cv-air-header-txt { flex: 1; min-width: 0; }
.cv-air-header-txt h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-air-header-tools { display: flex; gap: 6px; flex-shrink: 0; }
.cv-air-hbtn {
width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm);
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.15); color: #fff; font-size: 15px;
transition: background var(--t);
}
.cv-air-hbtn:hover, .cv-air-hbtn:focus { background: rgba(255,255,255,.28); outline: none; }
.cv-air-hbtn[aria-pressed="true"], .cv-air-hbtn.is-on { background: #fff; color: var(--cv-dark); }
.cv-air-panelbtn { display: none; }
.cv-air-partchip {
display: block; max-width: 100%; margin-top: 4px; padding: 2px 10px;
border: 0; border-radius: var(--radius-pill); background: rgba(255,255,255,.16); color: #fff;
font-size: 12.5px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv-air-partchip:hover { background: rgba(255,255,255,.26); }
.cv-air-partchip-n { font-weight: 700; margin-right: 6px; }
.cv-air:not(.cv-air-narrow) #airPartChip { display: none !important; }
.cv-air-details { margin: 4px 0 2px; }
.cv-air-details > summary { cursor: pointer; font-size: 86%; color: var(--c-muted); outline: none; }
.cv-air-details[open] > summary { margin-bottom: 6px; }
/* fitted to the window */
.cv-air.cv-air-fit { display: flex; flex-direction: column; padding-bottom: 4px; }
.cv-air-fit .cv-air-header { flex: none; }
.cv-air-fit .cv-air-chat { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.cv-air-fit .cv-air-chat-main { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.cv-air-fit .cv-air-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cv-air-fit #airDeck { flex: none; }
.cv-air-fit .cv-air-convo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cv-air-fit .cv-air-messages { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cv-air-fit .cv-air-messages .chat_box_wrapper.chat_box_small.chat_box_active {
flex: 1 1 auto; min-height: 0; display: flex !important; flex-direction: column;
}
.cv-air.cv-air-fit .cv-air-messages #chatMessages { flex: 1 1 auto; height: auto !important; min-height: 140px; }
.cv-air-fit .cv-air-side { min-height: 0; overflow-y: auto; }
.cv-air-fit:not(.cv-air-narrow) .cv-air-chat { grid-template-columns: minmax(0, 1fr) 260px; }
/* slides beside the chat */
.cv-air-split .cv-air-stage { flex-direction: row; gap: 12px; }
.cv-air-split #airDeck { flex: 0 0 56%; margin: 0; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.cv-air-split .cv-air-mat-view { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.cv-air-split .cv-air-convo { min-width: 0; }
/* narrow: the side panel is a drawer from the right */
.cv-air-narrow .cv-air-chat { grid-template-columns: minmax(0, 1fr); }
.cv-air-narrow .cv-air-panelbtn { display: inline-flex; }
.cv-air-narrow .cv-air-side {
position: fixed; top: 0; right: 0; bottom: 0; width: min(330px, 88vw); max-height: none;
z-index: 1037; border-radius: 0; overflow-y: auto;
transform: translateX(105%); transition: transform .2s ease;
}
.cv-air-narrow.cv-air-drawer-open .cv-air-side { transform: none; box-shadow: var(--shadow-lg); }
.cv-air-backdrop { display: none; }
.cv-air-narrow.cv-air-drawer-open .cv-air-backdrop {
display: block; position: fixed; inset: 0; z-index: 1036; background: rgba(15,30,50,.35);
}
/* extra small */
.cv-air-xs .cv-air-header { padding: 10px 12px; gap: 10px; margin-bottom: 10px; }
.cv-air-xs .cv-air-header-icon { display: none; }
.cv-air-xs .cv-air-header h1 { font-size: 112%; }
.cv-air-xs .cv-air-chat-main { padding: 8px; }
.cv-air-xs .cv-air-messages > .chat_box_wrapper,
.cv-air-xs .cv-air-messages .chat_box { padding: 8px !important; }
.cv-air-xs #codeBtn .cv-air-code-lbl { display: none; }
.cv-air-xs #codeBtn { padding: 0; width: 42px; justify-content: center; }
.cv-air-xs .cv-air-mat-bar button { min-width: 36px; height: 34px; }
.cv-air-inputbar textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* full window: the room covers the browser window (above the navbar and the left menu; the
room's own modals stay above it because they live inside it) */
html.cv-air-full-open, html.cv-air-full-open body { overflow: hidden !important; }
.cv-air.cv-air-full {
position: fixed; inset: 0; z-index: 1045; max-width: none; margin: 0;
height: auto !important; padding: 10px 12px 8px; background: #eef2f7; overflow: hidden;
}
.cv-air:fullscreen { max-width: none; margin: 0; padding: 10px 12px 8px; background: #eef2f7; }
.cv-air-full .cv-air-header { padding: 8px 14px; margin-bottom: 10px; }
.cv-air-full .cv-air-header-icon { width: 34px; height: 34px; font-size: 17px; }
.cv-air-full .cv-air-header h1 { font-size: 118%; }
/* the Bootstrap backdrop is attached to , under the room: dim with the modal itself */
.cv-air-full .modal.in, .cv-air:fullscreen .modal.in { background: rgba(15,30,50,.45); }
/* =======================================================================
Grades (grades.jsp) — cv-grade-*
At-a-glance grade dashboard: student header + category cards with a
color-tiered mark badge.
======================================================================= */
.cv-grade { max-width: 1000px; margin: 0 auto; padding: 4px 6px 16px; }
/* --- Student header ----------------------------------------------------- */
.cv-grade-header {
display: flex;
align-items: center;
gap: 16px;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 16px 20px;
margin-bottom: 16px;
}
.cv-grade-avatar {
flex-shrink: 0;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,.15);
font-size: 24px;
}
.cv-grade-id { flex: 1; min-width: 0; }
.cv-grade-name { font-size: 124%; font-weight: 700; }
.cv-grade-am { font-size: 88%; opacity: .85; margin-top: 2px; }
.cv-grade-am .fa { margin-right: 5px; opacity: .8; }
.cv-grade-htitle {
flex-shrink: 0;
font-size: 92%;
opacity: .9;
display: inline-flex;
align-items: center;
gap: 8px;
}
/* --- Grade cards -------------------------------------------------------- */
.cv-grade-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 12px;
}
.cv-grade-card {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-left: 4px solid var(--c-brand);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 16px;
transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.cv-grade-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #8fb8de; }
.cv-grade-card-info { flex: 1; min-width: 0; }
.cv-grade-cat {
font-weight: 700;
color: var(--cv-dark);
font-size: 102%;
line-height: 1.35;
display: flex;
align-items: flex-start;
gap: 8px;
}
.cv-grade-cat .fa { color: var(--cv-mid); opacity: .65; margin-top: 3px; }
.cv-grade-label {
margin-top: 5px;
font-size: 76%;
color: var(--c-muted);
letter-spacing: .05em;
}
/* --- Mark badge --------------------------------------------------------- */
.cv-grade-badge {
flex-shrink: 0;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 134%;
font-weight: 800;
color: #fff;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
box-shadow: var(--shadow-sm);
}
.cv-grade-badge--high { background: linear-gradient(135deg, #15803d 0%, #22c55e 100%); }
.cv-grade-badge--mid { background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%); }
.cv-grade-badge--low { background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%); }
.cv-grade-badge--none { background: #eef2f7; color: #9aa7b6; box-shadow: none; font-size: 150%; }
/* --- Empty state -------------------------------------------------------- */
.cv-grade-empty {
background: #fff;
border: 1px dashed var(--cv-panel-border);
border-radius: var(--radius-md);
text-align: center;
padding: 50px 20px;
}
.cv-grade-empty .fa { font-size: 46px; color: var(--cv-panel-border); display: block; margin-bottom: 12px; }
.cv-grade-empty p { margin: 0; font-size: 112%; color: #6b7c93; font-weight: 600; }
/* --- Responsive --------------------------------------------------------- */
@media (max-width: 600px) {
.cv-grade-header { flex-wrap: wrap; }
.cv-grade-htitle { width: 100%; }
}
/* =======================================================================
Announcements (course_news.jsp) — cv-news-*
Timeline feed: pinned markers on a vertical rail + announcement cards,
newest item highlighted.
======================================================================= */
.cv-news { max-width: 920px; margin: 0 auto; padding: 4px 6px 16px; }
/* --- Header ------------------------------------------------------------- */
.cv-news-header {
display: flex;
align-items: center;
gap: 16px;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 16px 20px;
margin-bottom: 16px;
}
.cv-news-header-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: rgba(255,255,255,.15);
font-size: 22px;
}
.cv-news-header h1 { margin: 0; font-size: 138%; font-weight: 700; color: #fff !important; }
.cv-news-sub { margin-top: 3px; font-size: 90%; opacity: .85; }
/* --- Timeline feed ------------------------------------------------------ */
.cv-news-feed { position: relative; padding: 2px 0; }
.cv-news-feed::before {
content: "";
position: absolute;
left: 19px;
top: 16px;
bottom: 16px;
width: 2px;
background: var(--cv-panel-border);
}
.cv-news-item { display: flex; gap: 16px; margin-bottom: 14px; }
.cv-news-item:last-child { margin-bottom: 0; }
.cv-news-rail { flex-shrink: 0; width: 40px; display: flex; justify-content: center; }
.cv-news-pin {
position: relative;
z-index: 1;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
font-size: 16px;
box-shadow: var(--shadow-sm);
border: 3px solid #fff;
}
.cv-news-pin--latest {
background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
}
.cv-news-card {
flex: 1;
min-width: 0;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 16px 18px;
transition: box-shadow var(--t), border-color var(--t);
}
.cv-news-card:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; }
.cv-news-card--latest { border-left: 4px solid var(--c-warning); }
.cv-news-card--detail { border-left: 4px solid var(--c-brand); }
.cv-news-title { margin: 0; font-size: 118%; font-weight: 700; color: var(--cv-dark); line-height: 1.35; }
.cv-news-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cv-news-content {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--c-border-soft);
color: #3a4a5a;
line-height: 1.6;
font-size: 95%;
overflow-wrap: break-word;
}
.cv-news-content > :first-child { margin-top: 0; }
.cv-news-content > :last-child { margin-bottom: 0; }
.cv-news-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.cv-news-content a { color: var(--cv-mid); }
/* --- Empty state -------------------------------------------------------- */
.cv-news-empty {
background: #fff;
border: 1px dashed var(--cv-panel-border);
border-radius: var(--radius-md);
text-align: center;
padding: 50px 20px;
}
.cv-news-empty .fa { font-size: 46px; color: var(--cv-panel-border); display: block; margin-bottom: 12px; }
.cv-news-empty p { margin: 0; font-size: 112%; color: #6b7c93; font-weight: 600; }
/* --- Pagination --------------------------------------------------------- */
.cv-news-pager { padding: 14px 2px 2px; text-align: right; }
/* --- Responsive --------------------------------------------------------- */
@media (max-width: 600px) {
.cv-news-feed::before { display: none; }
.cv-news-rail { width: 34px; }
.cv-news-pin { width: 34px; height: 34px; font-size: 14px; }
}
/* =======================================================================
Search (search.jsp) — cv-search-*
Hero search bar + faceted category pills + unified result cards.
======================================================================= */
.cv-search { max-width: 860px; margin: 0 auto; padding: 8px 6px 16px; }
/* --- Search bar --------------------------------------------------------- */
.cv-search-bar {
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-sm);
padding: 6px 6px 6px 18px;
}
.cv-search-bar:focus-within { border-color: #8fb8de; box-shadow: 0 0 0 3px rgba(60,132,189,.12); }
.cv-search-bar-ico { color: var(--cv-mid); opacity: .7; font-size: 16px; flex-shrink: 0; }
.cv-search-input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
font-size: 15px;
padding: 11px 6px;
color: var(--cv-dark);
}
.cv-search-btn {
flex-shrink: 0;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
font-size: 15px;
cursor: pointer;
transition: box-shadow var(--t), transform var(--t), background var(--t);
}
.cv-search-btn-go {
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
box-shadow: var(--shadow-sm);
}
.cv-search-btn-go:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cv-search-btn-clear { background: var(--c-surface-2); color: var(--c-muted); }
.cv-search-btn-clear:hover { background: var(--cv-item-hover); color: var(--cv-mid); }
/* --- Facets ------------------------------------------------------------- */
.cv-search-section-title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
color: var(--cv-dark);
font-size: 104%;
margin: 20px 2px 10px;
}
.cv-search-section-title .fa { color: var(--cv-mid); opacity: .7; }
.cv-search-facets { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-search-facet {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-pill);
background: #fff;
color: var(--cv-mid) !important;
font-size: 91%;
font-weight: 600;
text-decoration: none !important;
transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
}
.cv-search-facet:hover { background: var(--cv-item-hover); border-color: #8fb8de; }
.cv-search-facet.is-active {
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
border-color: var(--cv-mid);
color: #fff !important;
box-shadow: var(--shadow-sm);
}
.cv-search-facet-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 18px;
padding: 0 6px;
border-radius: var(--radius-pill);
background: var(--cv-panel-bg);
color: var(--cv-mid);
font-size: 80%;
font-weight: 700;
}
.cv-search-facet.is-active .cv-search-facet-count { background: rgba(255,255,255,.22); color: #fff; }
/* --- Result cards ------------------------------------------------------- */
.cv-search-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cv-search-result {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-left: 4px solid var(--c-brand);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 13px 16px;
transition: box-shadow var(--t), border-color var(--t);
}
.cv-search-result:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; }
.cv-search-ico {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--c-brand-softer);
color: var(--cv-mid);
font-size: 18px;
}
.cv-search-result-body { flex: 1; min-width: 0; }
.cv-search-result-title { font-weight: 700; color: var(--cv-dark); font-size: 102%; line-height: 1.35; }
.cv-search-result-title a { color: var(--cv-dark) !important; text-decoration: none !important; }
.cv-search-result-title a:hover { color: var(--cv-mid) !important; text-decoration: underline !important; }
.cv-search-result-meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.cv-search-result-meta .cv-chip a { color: var(--cv-mid) !important; text-decoration: none !important; }
.cv-search-result-meta .cv-chip a:hover { text-decoration: underline !important; }
.cv-search-result-actions { flex-shrink: 0; display: flex; gap: 6px; }
/* --- Empty state -------------------------------------------------------- */
.cv-search-empty {
background: #fff;
border: 1px dashed var(--cv-panel-border);
border-radius: var(--radius-md);
text-align: center;
padding: 44px 20px;
margin-top: 12px;
}
.cv-search-empty .fa { font-size: 42px; color: var(--cv-panel-border); display: block; margin-bottom: 12px; }
.cv-search-empty p { margin: 0; font-size: 110%; color: #6b7c93; font-weight: 600; }
/* --- Responsive --------------------------------------------------------- */
@media (max-width: 600px) {
.cv-search-result { flex-wrap: wrap; }
.cv-search-result-actions { width: 100%; justify-content: flex-end; }
}
/* =======================================================================
Live Chat rooms (chatrooms.jsp / chatrooms_view.jsp) — cv-chat-*
Room list + create-room card + a modern in-page chat room. Preserves the
cewshandler/chat.js DOM hooks (#cechat-, #ce-room-chat-, #msg_inp).
======================================================================= */
.cv-chat { max-width: 1080px; margin: 0 auto; padding: 4px 6px 16px; }
/* --- Header ------------------------------------------------------------- */
.cv-chat-header {
display: flex;
align-items: center;
gap: 16px;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 16px 20px;
margin-bottom: 16px;
}
.cv-chat-header-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: rgba(255,255,255,.15);
font-size: 22px;
}
.cv-chat-header h1 { margin: 0; font-size: 132%; font-weight: 700; color: #fff !important; }
/* --- Chat room layout --------------------------------------------------- */
.cv-chat-grid {
display: grid;
grid-template-columns: 1fr 280px;
gap: 14px;
align-items: start;
}
.cv-chat-main {
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 14px;
}
/* scroll area + modern bubble skin (cewshandler renders
.chat_message_wrapper > ul.chat_message > li, .chat_message_right = me) */
.cv-chat-messages .chat_box_wrapper.chat_box_small.chat_box_active {
width: 100% !important;
height: 440px !important;
overflow-y: auto !important;
}
.cv-chat-messages .chat_box {
background: var(--c-surface-2) !important;
border-radius: var(--radius-sm);
padding: 14px !important;
min-height: 100%;
}
.cv-chat-messages .chat_box .chat_message_wrapper { margin-bottom: 16px; }
.cv-chat-messages .chat_box .chat_message_wrapper ul.chat_message > li:first-child::before { display: none; }
.cv-chat-messages .chat_box.chat_box_colors_a .chat_message_wrapper ul.chat_message > li {
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: 14px 14px 14px 4px;
box-shadow: var(--shadow-sm);
font-size: 14px;
padding: 9px 14px;
color: var(--cv-dark);
}
.cv-chat-messages .chat_box.chat_box_colors_a .chat_message_wrapper.chat_message_right ul.chat_message > li {
background: var(--c-brand-softer);
border-color: #cfe3f5;
border-radius: 14px 14px 4px 14px;
}
.cv-chat-messages .chat_box .chat_message_wrapper ul.chat_message { margin-left: 12px; }
.cv-chat-messages .chat_box .chat_message_wrapper.chat_message_right ul.chat_message { margin-right: 12px !important; }
/* composer */
.cv-chat-inputbar {
display: flex;
align-items: center;
gap: 10px;
margin: 14px 0 0;
background: var(--c-surface-2);
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
padding: 6px 6px 6px 16px;
}
.cv-chat-inputbar:focus-within { border-color: #8fb8de; box-shadow: 0 0 0 3px rgba(60,132,189,.12); }
.cv-chat-input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: 15px; padding: 11px 0; color: var(--cv-dark); }
.cv-chat-send {
flex-shrink: 0;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: box-shadow var(--t), transform var(--t);
}
.cv-chat-send:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
/* --- User panel --------------------------------------------------------- */
.cv-chat-side {
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 14px;
}
.cv-chat-side-title { font-weight: 700; color: var(--cv-dark); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 96%; }
.cv-chat-side-title .fa { color: var(--cv-mid); opacity: .7; }
.cv-chat-users { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 440px; overflow: auto; }
.cv-chat-user { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--radius-sm); background: var(--c-surface-2); font-size: 90%; color: var(--cv-dark); }
.cv-chat-user .md-user-image { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
/* --- Create room card --------------------------------------------------- */
.cv-chat-newroom {
max-width: 600px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 22px 24px;
}
.cv-chat-newroom h3 { margin: 0 0 16px; font-size: 116%; font-weight: 700; color: var(--cv-dark); display: flex; align-items: center; gap: 9px; }
.cv-chat-newroom h3 .fa { color: var(--cv-mid); }
.cv-chat-label { display: block; font-size: 85%; font-weight: 600; color: var(--cv-mid); margin-bottom: 6px; }
.cv-chat-newroom-actions { margin-top: 14px; display: flex; gap: 8px; }
.cv-chat-tips { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--c-border-soft); display: flex; flex-direction: column; gap: 8px; }
.cv-chat-tips li { font-size: 87%; color: #5c6b7f; display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; }
.cv-chat-tips li .fa { color: var(--cv-mid); opacity: .6; margin-top: 3px; }
/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
.cv-chat-grid { grid-template-columns: 1fr; }
}
/* =======================================================================
Registered users / badge leaderboard (course_users.jsp) — cv-lb-*
Ranked member cards with avatar, social links, open badges + count.
======================================================================= */
.cv-lb { max-width: 980px; margin: 0 auto; padding: 4px 6px 16px; }
/* --- Header ------------------------------------------------------------- */
.cv-lb-header {
display: flex;
align-items: center;
gap: 16px;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 16px 20px;
margin-bottom: 16px;
}
.cv-lb-header-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: rgba(255,255,255,.15);
font-size: 22px;
}
.cv-lb-header h1 { margin: 0; font-size: 132%; font-weight: 700; color: #fff !important; display: inline-flex; align-items: center; gap: 10px; }
.cv-lb-count {
font-size: 64%;
font-weight: 700;
background: rgba(255,255,255,.2);
border-radius: var(--radius-pill);
padding: 2px 11px;
}
/* --- Member cards ------------------------------------------------------- */
.cv-lb-list { display: flex; flex-direction: column; gap: 10px; }
.cv-lb-card {
display: flex;
align-items: center;
gap: 16px;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-left: 4px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 14px 16px;
transition: box-shadow var(--t), border-color var(--t);
}
.cv-lb-card:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; }
.cv-lb-top1 { border-left-color: #f5b301; }
.cv-lb-top2 { border-left-color: #9aa7b6; }
.cv-lb-top3 { border-left-color: #cd7f32; }
.cv-lb-rank {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 104%;
background: var(--c-surface-2);
color: var(--c-muted);
}
.cv-lb-rank--1 { background: linear-gradient(135deg, #f7b733 0%, #fc9803 100%); color: #fff; box-shadow: var(--shadow-sm); }
.cv-lb-rank--2 { background: linear-gradient(135deg, #c2ccd8 0%, #93a3b5 100%); color: #fff; }
.cv-lb-rank--3 { background: linear-gradient(135deg, #df9e6f 0%, #c87f3f 100%); color: #fff; }
.cv-lb-avatar { flex-shrink: 0; }
.cv-lb-avatar img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: var(--shadow-sm); }
.cv-lb-info { flex: 1; min-width: 0; }
.cv-lb-name { font-weight: 700; font-size: 108%; color: var(--cv-dark); line-height: 1.3; }
.cv-lb-name a { color: var(--cv-dark) !important; text-decoration: none !important; }
.cv-lb-name a:hover { color: var(--cv-mid) !important; }
.cv-lb-headline { font-size: 86%; color: var(--c-muted); margin-top: 1px; }
.cv-lb-social { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.cv-lb-social a {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--c-surface-2);
color: var(--cv-mid) !important;
font-size: 13px;
text-decoration: none !important;
transition: background var(--t), color var(--t);
}
.cv-lb-social a:hover { background: var(--cv-mid); color: #fff !important; }
.cv-lb-board {
margin-top: 9px;
font-size: 82%;
color: #46586e;
background: var(--c-brand-softer);
border: 1px solid #e1eef9;
border-radius: var(--radius-sm);
padding: 6px 11px;
display: inline-block;
}
.cv-lb-board .fa { opacity: .55; margin: 0 3px; }
/* --- Badges ------------------------------------------------------------- */
.cv-lb-badges { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 96px; }
.cv-lb-badgecount {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 800;
color: var(--c-warning);
background: var(--c-warning-soft);
border: 1px solid #f6e2bd;
border-radius: var(--radius-pill);
padding: 3px 12px;
font-size: 92%;
}
.cv-lb-badgestrip { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; max-width: 170px; }
.cv-lb-badge img { height: 42px; width: auto; border-radius: 6px; transition: transform var(--t); display: block; }
.cv-lb-badge:hover img { transform: scale(1.14); }
.cv-lb-nobadge { color: #c2ccd6; font-size: 22px; }
/* --- Last visit --------------------------------------------------------- */
.cv-lb-visit { flex-shrink: 0; text-align: right; font-size: 80%; color: var(--c-muted); min-width: 116px; }
.cv-lb-visit-date { color: var(--cv-dark); font-weight: 600; }
.cv-lb-visit .fa { opacity: .6; margin-right: 3px; }
/* --- Empty state -------------------------------------------------------- */
.cv-lb-empty {
background: #fff;
border: 1px dashed var(--cv-panel-border);
border-radius: var(--radius-md);
text-align: center;
padding: 50px 20px;
}
.cv-lb-empty .fa { font-size: 46px; color: var(--cv-panel-border); display: block; margin-bottom: 12px; }
.cv-lb-empty p { margin: 0; font-size: 112%; color: #6b7c93; font-weight: 600; }
/* --- Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
.cv-lb-card { flex-wrap: wrap; }
.cv-lb-badges, .cv-lb-visit { width: 100%; min-width: 0; align-items: flex-start; text-align: left; }
.cv-lb-badgestrip { justify-content: flex-start; max-width: none; }
}
/* =======================================================================
Contact (contact.jsp) — cv-contact-*
Contact form (community) + contact-info cards.
======================================================================= */
.cv-contact { max-width: 920px; margin: 0 auto; padding: 4px 6px 16px; }
/* --- Header ------------------------------------------------------------- */
.cv-contact-header {
display: flex;
align-items: center;
gap: 16px;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 16px 20px;
margin-bottom: 16px;
}
.cv-contact-header-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: rgba(255,255,255,.15);
font-size: 22px;
}
.cv-contact-header h1 { margin: 0; font-size: 132%; font-weight: 700; color: #fff !important; }
/* --- Form mode (community) ---------------------------------------------- */
.cv-contact-form-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.cv-contact-form {
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 22px 24px;
}
.cv-contact-form h3 { margin: 0 0 18px; font-size: 116%; font-weight: 700; color: var(--cv-dark); }
.cv-contact-field { margin-bottom: 15px; }
.cv-contact-field label { display: block; font-size: 85%; font-weight: 600; color: var(--cv-mid); margin-bottom: 6px; }
.cv-contact-field .req { color: var(--c-danger); margin-left: 2px; }
.cv-contact-input, .cv-contact-select, .cv-contact-textarea {
width: 100%;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-sm);
padding: 10px 12px;
font-size: 14px;
outline: none;
background: #fff;
color: var(--cv-dark);
transition: border-color var(--t), box-shadow var(--t);
}
.cv-contact-input:focus, .cv-contact-select:focus, .cv-contact-textarea:focus {
border-color: #8fb8de;
box-shadow: 0 0 0 3px rgba(60,132,189,.12);
}
.cv-contact-textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.cv-contact-submit {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 11px 26px;
border: none;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
font-weight: 600;
font-size: 14px;
cursor: pointer;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--t), transform var(--t);
}
.cv-contact-submit:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cv-contact-aside {
background: linear-gradient(135deg, #f3f9fd 0%, #e8f2fb 100%);
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 24px 20px;
text-align: center;
}
.cv-contact-aside img { max-width: 170px; height: auto; }
.cv-contact-aside p { color: #46586e; font-size: 89%; line-height: 1.6; margin: 14px 0 0; }
/* --- Success ------------------------------------------------------------ */
.cv-contact-success {
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
text-align: center;
padding: 50px 24px;
}
.cv-contact-success .fa { font-size: 56px; color: var(--c-success); display: block; margin-bottom: 16px; }
.cv-contact-success p { margin: 0; font-size: 112%; color: var(--cv-dark); font-weight: 600; line-height: 1.6; }
/* --- Info mode ---------------------------------------------------------- */
.cv-contact-cards { display: flex; flex-direction: column; gap: 12px; }
.cv-contact-card {
display: flex;
gap: 16px;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-left: 4px solid var(--c-brand);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 18px 20px;
transition: box-shadow var(--t), border-color var(--t);
}
.cv-contact-card:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; }
.cv-contact-card-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--c-brand-softer);
color: var(--cv-mid);
font-size: 20px;
}
.cv-contact-card-body { flex: 1; min-width: 0; }
.cv-contact-card-body h4 { margin: 0 0 6px; font-size: 104%; font-weight: 700; color: var(--cv-dark); }
.cv-contact-card-body p { margin: 0 0 8px; color: #46586e; line-height: 1.6; font-size: 93%; }
.cv-contact-card-body p:last-child { margin-bottom: 0; }
.cv-contact-card-body a { color: var(--cv-mid); }
.cv-contact-email { font-size: 110%; font-weight: 600; color: var(--cv-mid); }
.cv-contact-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
padding: 8px 18px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff !important;
font-weight: 600;
text-decoration: none !important;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--t), transform var(--t);
}
.cv-contact-cta:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); color: #fff !important; }
/* --- Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
.cv-contact-form-grid { grid-template-columns: 1fr; }
.cv-contact-aside { order: -1; }
}
/* =======================================================================
Registration request (register.jsp) — cv-reg-*
Centered sign-up card with icon fields, error states, success view.
======================================================================= */
.cv-reg { max-width: 540px; margin: 0 auto; padding: 4px 6px 16px; }
/* --- Header ------------------------------------------------------------- */
.cv-reg-header {
display: flex;
align-items: center;
gap: 16px;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 16px 20px;
margin-bottom: 16px;
}
.cv-reg-header-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: rgba(255,255,255,.15);
font-size: 22px;
}
.cv-reg-header h1 { margin: 0; font-size: 128%; font-weight: 700; color: #fff !important; }
/* --- Card --------------------------------------------------------------- */
.cv-reg-card {
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 24px;
}
/* --- Icon fields -------------------------------------------------------- */
.cv-reg-field {
display: flex;
align-items: center;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-sm);
margin-bottom: 12px;
transition: border-color var(--t), box-shadow var(--t);
}
.cv-reg-field:focus-within { border-color: #8fb8de; box-shadow: 0 0 0 3px rgba(60,132,189,.12); }
.cv-reg-field.is-error { border-color: var(--c-danger); box-shadow: 0 0 0 3px rgba(220,38,38,.10); }
.cv-reg-ico { width: 44px; flex-shrink: 0; text-align: center; color: var(--cv-mid); opacity: .7; }
.cv-reg-field.is-error .cv-reg-ico { color: var(--c-danger); opacity: 1; }
.cv-reg-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 11px 12px 11px 0; font-size: 14px; color: var(--cv-dark); }
/* --- Labeled fields (code / user type) ---------------------------------- */
.cv-reg-labeled { margin-bottom: 14px; }
.cv-reg-labeled > label { display: block; font-size: 85%; font-weight: 600; color: var(--cv-mid); margin-bottom: 6px; }
.cv-reg-control {
width: 100%;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-sm);
padding: 10px 12px;
font-size: 14px;
outline: none;
background: #fff;
color: var(--cv-dark);
transition: border-color var(--t), box-shadow var(--t);
}
.cv-reg-control:focus { border-color: #8fb8de; box-shadow: 0 0 0 3px rgba(60,132,189,.12); }
.cv-reg-help { font-size: 82%; color: var(--c-muted); margin-top: 7px; line-height: 1.5; }
/* --- Submit ------------------------------------------------------------- */
.cv-reg-submit {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 12px 20px;
margin-top: 4px;
border: none;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
font-weight: 600;
font-size: 14px;
cursor: pointer;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--t), transform var(--t);
}
.cv-reg-submit:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
/* --- Success ------------------------------------------------------------ */
.cv-reg-success {
text-align: center;
padding: 10px 4px 6px;
}
.cv-reg-success .fa { font-size: 54px; color: var(--c-success); display: block; margin-bottom: 14px; }
.cv-reg-success h3 { margin: 0 0 8px; font-size: 116%; color: var(--cv-dark); font-weight: 700; }
.cv-reg-success p { margin: 0 auto; color: #46586e; line-height: 1.6; max-width: 420px; }
/* --- Footer note -------------------------------------------------------- */
.cv-reg-note { margin-top: 14px; font-size: 84%; color: var(--c-muted); line-height: 1.6; }
/* =======================================================================
Forums (forums.jspf / forums_view.jspf) — cv-forum-*
Shared skeleton reskinned for every context (site / course / lab/team)
and edit mode. Category & thread cards, post cards, paginated thread view.
All rules scoped under #pMain so they never leak into legacy pages.
======================================================================= */
#pMain .cv-forum { width: 100%; max-width: none; margin: 0; padding: 4px 6px 16px; }
/* --- Header bar --------------------------------------------------------- */
#pMain .cv-forum-header {
display: flex;
align-items: center;
gap: 16px;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 16px 20px;
margin-bottom: 16px;
}
#pMain .cv-forum-header-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: rgba(255,255,255,.15);
font-size: 22px;
}
#pMain .cv-forum-header-txt { min-width: 0; flex: 1; }
#pMain .cv-forum-header h1 { margin: 0; font-size: 132%; font-weight: 700; color: #fff !important; }
#pMain .cv-forum-header-sub { margin-top: 3px; font-size: 90%; opacity: .85; }
#pMain .cv-forum-header .cv-forum-newbtn { flex-shrink: 0; }
/* --- Toolbar (breadcrumb + actions) ------------------------------------- */
#pMain .cv-forum-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
}
#pMain .cv-forum-crumb {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
margin: 0;
padding: 7px 8px 7px 16px;
list-style: none;
background: linear-gradient(135deg, var(--cv-panel-bg) 0%, var(--c-surface-2) 100%);
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-sm);
font-size: 90%;
color: var(--c-muted);
}
#pMain .cv-forum-crumb li { display: inline-flex; align-items: center; }
#pMain .cv-forum-crumb a {
color: var(--cv-mid);
text-decoration: none;
font-weight: 600;
transition: color var(--t);
}
#pMain .cv-forum-crumb a:hover { color: var(--c-brand); text-decoration: none; }
#pMain .cv-forum-crumb a .fa { margin-right: 6px; opacity: .7; }
#pMain .cv-forum-crumb .sep { color: var(--cv-mid); opacity: .4; font-size: 92%; }
#pMain .cv-forum-crumb .active {
color: var(--cv-dark);
font-weight: 700;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-pill);
padding: 3px 13px;
}
#pMain .cv-forum-bar-spacer { flex: 1; }
/* New topic / new category button -- shared accent button ---------------- */
#pMain .cv-forum-btn {
display: inline-flex;
align-items: center;
gap: 7px;
border: none;
border-radius: var(--radius-md);
padding: 9px 16px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
color: #fff;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--t), transform var(--t);
}
#pMain .cv-forum-btn:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); color: #fff; }
#pMain .cv-forum-btn--ghost {
background: #fff;
color: var(--cv-mid);
border: 1px solid var(--cv-panel-border);
}
#pMain .cv-forum-btn--ghost:hover { color: var(--cv-mid); border-color: #8fb8de; }
/* --- Card list (categories & threads share the shell) ------------------- */
#pMain .cv-forum-list { display: flex; flex-direction: column; gap: 10px; }
#pMain .cv-forum-card,
#pMain a.cv-forum-card {
position: relative;
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-left: 4px solid var(--cv-panel-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 14px 16px;
text-decoration: none !important;
color: inherit;
transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
#pMain .cv-forum-card:hover,
#pMain a.cv-forum-card:hover {
box-shadow: var(--shadow-md);
border-color: #8fb8de;
border-left-color: var(--c-brand);
}
#pMain .cv-forum-card--unread { border-left-color: var(--c-danger); background: var(--c-danger-soft); }
/* Icon avatar (left) ----------------------------------------------------- */
#pMain .cv-forum-ico {
flex-shrink: 0;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--c-brand-softer);
color: var(--cv-mid);
font-size: 24px;
}
#pMain .cv-forum-card--unread .cv-forum-ico { background: #fde8e8; color: var(--c-danger); }
/* Card link: a stretched, empty overlay so the whole card navigates, while links
inside the description and the edit/delete buttons stay clickable (raised above
the overlay via z-index). This avoids wrapping rich HTML — which can contain its
own — inside an anchor, which produced invalid nested anchors. ---------- */
#pMain .cv-forum-cardlink {
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
text-decoration: none !important;
color: inherit;
}
/* Keep interactive content above the stretched overlay */
#pMain .cv-forum-desc a,
#pMain .cv-forum-actions { position: relative; z-index: 2; }
/* Card body (middle, flexes) -------------------------------------------- */
#pMain .cv-forum-body { flex: 1; min-width: 0; }
#pMain .cv-forum-title {
margin: 0;
font-size: 108%;
font-weight: 700;
color: var(--cv-dark);
line-height: 1.35;
overflow-wrap: break-word;
}
#pMain .cv-forum-card:hover .cv-forum-title { color: var(--c-brand); }
#pMain .cv-forum-desc { margin: 3px 0 0; font-size: 88%; color: var(--c-muted); line-height: 1.45; }
#pMain .cv-forum-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* Stat chips ------------------------------------------------------------- */
#pMain .cv-forum-stat {
display: inline-flex;
align-items: center;
gap: 5px;
background: #f3f7fb;
border: 1px solid var(--c-border-soft);
color: #46586e;
font-size: 82%;
padding: 2px 10px;
border-radius: var(--radius-pill);
white-space: nowrap;
}
#pMain .cv-forum-stat .fa { opacity: .6; font-size: 90%; }
#pMain .cv-forum-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--c-danger);
color: #fff;
font-size: 80%;
font-weight: 700;
padding: 2px 10px;
border-radius: var(--radius-pill);
white-space: nowrap;
}
/* Last-post column (right) ---------------------------------------------- */
#pMain .cv-forum-last {
flex-shrink: 0;
width: 160px;
text-align: right;
font-size: 84%;
color: var(--c-muted);
line-height: 1.4;
}
#pMain .cv-forum-last strong { color: var(--cv-dark); font-weight: 600; }
#pMain .cv-forum-last .fa { opacity: .6; }
/* Edit-mode card actions ------------------------------------------------- */
#pMain .cv-forum-actions { flex-shrink: 0; display: flex; gap: 6px; }
#pMain .cv-forum-iconbtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--radius-sm);
border: 1px solid var(--c-border-soft);
background: #fff;
color: var(--c-muted);
cursor: pointer;
transition: background var(--t), color var(--t), border-color var(--t);
}
#pMain .cv-forum-iconbtn:hover { background: var(--c-surface-2); }
#pMain .cv-forum-iconbtn--danger:hover { background: var(--c-danger-soft); color: var(--c-danger); border-color: #f3c2c2; }
#pMain .cv-forum-iconbtn--warn:hover { background: var(--c-warning-soft); color: var(--c-warning); border-color: #f3e0b8; }
/* --- Empty state -------------------------------------------------------- */
#pMain .cv-forum-empty {
background: #fff;
border: 1px dashed var(--cv-panel-border);
border-radius: var(--radius-md);
text-align: center;
padding: 50px 20px;
}
#pMain .cv-forum-empty .fa { font-size: 46px; color: var(--cv-panel-border); display: block; margin-bottom: 12px; }
#pMain .cv-forum-empty p { margin: 0; font-size: 112%; color: #6b7c93; font-weight: 600; }
/* --- Pagination (modern pill pager; shared cv-pager-*) ------------------ */
#pMain .cv-forum-pager { padding: 18px 2px 4px; text-align: center; }
#pMain .cv-pager {
display: inline-flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
justify-content: center;
padding: 6px;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-sm);
}
#pMain .cv-pager-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 13px;
border: none;
border-radius: var(--radius-pill);
background: transparent;
font-size: 14px;
font-weight: 600;
color: var(--cv-mid);
text-decoration: none;
cursor: pointer;
transition: background var(--t), color var(--t), box-shadow var(--t);
}
#pMain a.cv-pager-btn:hover { background: var(--cv-item-hover); color: var(--cv-dark); text-decoration: none; }
#pMain .cv-pager-btn.is-active {
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
box-shadow: var(--shadow-sm);
cursor: default;
}
#pMain .cv-pager-btn.is-disabled { color: var(--cv-panel-border); cursor: default; pointer-events: none; }
#pMain .cv-pager-edge { color: var(--c-muted); }
#pMain .cv-pager-gap { display: inline-flex; align-items: flex-end; padding: 0 2px; color: var(--c-muted); font-weight: 700; }
/* =======================================================================
Thread view (forums_view.jspf) — posts as cards
======================================================================= */
#pMain .cv-forum-thread-head { margin-bottom: 14px; }
#pMain .cv-forum-thread-title {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 12px;
font-size: 150%;
font-weight: 700;
color: var(--cv-dark);
line-height: 1.3;
}
#pMain .cv-forum-thread-title .fa { color: var(--cv-mid); font-size: 90%; }
/* Notification toggle ---------------------------------------------------- */
#pMain .cv-forum-notif { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
#pMain .cv-forum-notif-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border-radius: var(--radius-pill);
border: 1px solid var(--cv-panel-border);
background: #fff;
color: var(--c-muted);
font-size: 88%;
font-weight: 600;
cursor: pointer;
transition: background var(--t), color var(--t), border-color var(--t);
}
#pMain .cv-forum-notif input { display: none; }
#pMain .cv-forum-notif input:checked + .cv-forum-notif-pill {
background: var(--c-success-soft);
color: var(--c-success);
border-color: #bfe6c8;
}
#pMain .cv-forum-notif .fa-bell-slash { display: inline; }
#pMain .cv-forum-notif .fa-bell { display: none; }
#pMain .cv-forum-notif input:checked + .cv-forum-notif-pill .fa-bell-slash { display: none; }
#pMain .cv-forum-notif input:checked + .cv-forum-notif-pill .fa-bell { display: inline; }
/* Post card -------------------------------------------------------------- */
#pMain .cv-forum-posts { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; padding: 0; list-style: none; }
#pMain .cv-forum-post {
display: flex;
gap: 0;
background: #fff;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow var(--t), border-color var(--t);
}
#pMain .cv-forum-post:hover { box-shadow: var(--shadow-lg); border-color: #cdddef; }
#pMain .cv-forum-post--unread { border-left: 4px solid var(--c-danger); }
#pMain .cv-forum-post--op { border-left: 4px solid var(--c-brand); }
/* Author sidebar --------------------------------------------------------- */
#pMain .cv-forum-author {
position: relative;
flex-shrink: 0;
width: 196px;
background: linear-gradient(180deg, var(--cv-item-active) 0%, var(--c-surface-2) 42%, #fff 100%);
border-right: 1px solid var(--c-border-soft);
padding: 24px 16px 18px;
text-align: center;
}
#pMain .cv-forum-author::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
}
#pMain .cv-forum-author-avatar {
width: 74px;
height: 74px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 0 0 3px var(--cv-mid), var(--shadow-md);
background: #fff;
margin-bottom: 12px;
}
#pMain .cv-forum-author-name { font-weight: 700; color: var(--cv-dark); font-size: 95%; line-height: 1.3; }
#pMain .cv-forum-author-name a { color: var(--cv-dark); text-decoration: none; transition: color var(--t); }
#pMain .cv-forum-author-name a:hover { color: var(--c-brand); }
#pMain .cv-forum-author-headline { font-size: 80%; color: var(--cv-mid); font-weight: 600; margin-top: 4px; line-height: 1.35; }
#pMain .cv-forum-author-joined {
display: inline-block;
font-size: 73%;
color: var(--c-muted);
margin-top: 9px;
background: #fff;
border: 1px solid var(--c-border-soft);
padding: 2px 10px;
border-radius: var(--radius-pill);
}
#pMain .cv-forum-author-pm {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
padding: 6px 13px;
border-radius: var(--radius-pill);
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff;
font-size: 78%;
font-weight: 600;
cursor: pointer;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--t), transform var(--t);
}
#pMain .cv-forum-author-pm:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
/* Post main column ------------------------------------------------------- */
#pMain .cv-forum-post-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px 20px; }
#pMain .cv-forum-post-info {
display: flex;
align-items: center;
gap: 10px;
font-size: 82%;
color: var(--c-muted);
padding-bottom: 10px;
border-bottom: 1px solid var(--c-border-soft);
}
#pMain .cv-forum-post-info > span:first-child {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--c-surface-2);
border: 1px solid var(--c-border-soft);
padding: 3px 11px;
border-radius: var(--radius-pill);
font-weight: 600;
}
#pMain .cv-forum-post-info .fa { opacity: .6; }
#pMain .cv-forum-post-info .nseen { color: var(--c-danger); opacity: 1; }
#pMain .cv-forum-post-title {
position: relative;
margin: 14px 0 8px;
padding-left: 12px;
font-size: 118%;
font-weight: 700;
color: var(--cv-dark);
line-height: 1.35;
}
#pMain .cv-forum-post-title::before {
content: "";
position: absolute;
left: 0; top: 3px; bottom: 3px;
width: 3px;
border-radius: 3px;
background: linear-gradient(180deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
}
#pMain .cv-forum-post-body {
flex: 1;
color: #3a4a5a;
line-height: 1.65;
font-size: 95%;
overflow-wrap: break-word;
}
#pMain .cv-forum-post-body > :first-child { margin-top: 0; }
#pMain .cv-forum-post-body > :last-child { margin-bottom: 0; }
#pMain .cv-forum-post-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
/* Quoted text (output of the [QUOTE:id:user] regex) — modern blockquote --- */
#pMain .cv-forum-post-body .label-success {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--c-brand-softer);
color: var(--cv-mid);
font-weight: 700;
font-size: 80%;
padding: 4px 12px;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
#pMain .cv-forum-post-body .alert-success.mvftop,
#pMain .cv-forum-post-body .mvftop {
background: var(--c-brand-softer);
border: none;
border-left: 3px solid var(--c-brand);
border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
color: #41566d;
padding: 12px 16px;
margin: 0 0 12px;
}
#pMain .cv-forum-post-body .mvftop > :first-child { margin-top: 0; }
#pMain .cv-forum-post-body .mvftop > :last-child { margin-bottom: 0; }
/* Post action row -------------------------------------------------------- */
#pMain .cv-forum-post-actions {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 6px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--c-border-soft);
}
#pMain .cv-forum-pbtn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--c-border-soft);
background: #fff;
color: #46586e;
font-size: 84%;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background var(--t), color var(--t), border-color var(--t);
}
#pMain .cv-forum-pbtn:hover { background: var(--c-surface-2); color: #46586e; }
#pMain .cv-forum-pbtn--quote:hover { background: var(--c-info-soft); color: var(--c-info); border-color: #bcdcef; }
#pMain .cv-forum-pbtn--edit:hover { background: var(--c-warning-soft); color: var(--c-warning); border-color: #f3e0b8; }
#pMain .cv-forum-pbtn--del:hover { background: var(--c-danger-soft); color: var(--c-danger); border-color: #f3c2c2; }
#pMain .cv-forum-pbtn--resend:hover { background: var(--c-success-soft); color: var(--c-success); border-color: #bfe8cf; }
/* --- Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
#pMain .cv-forum-last { display: none; }
#pMain .cv-forum-post { flex-direction: column; }
#pMain .cv-forum-author {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
text-align: left;
border-right: none;
border-bottom: 1px solid var(--c-border-soft);
padding: 12px 14px;
}
#pMain .cv-forum-author-avatar { width: 44px; height: 44px; margin-bottom: 0; }
#pMain .cv-forum-author-joined, #pMain .cv-forum-author-pm { margin-top: 0; }
}
@media (max-width: 600px) {
#pMain .cv-forum-card { flex-wrap: wrap; }
#pMain .cv-forum-ico { width: 42px; height: 42px; font-size: 20px; }
#pMain .cv-forum-thread-title { font-size: 124%; }
#pMain .cv-forum-post-actions { justify-content: flex-start; }
}
/* ===================================================================== */
/* Classrooms / Teleconference (course_teleconf.jsp) — .cv-tc-* */
/* ===================================================================== */
#pMain .cv-tc { width: 100%; max-width: 900px; margin: 0 auto; padding: 4px 0 24px; }
#pMain .cv-tc-list { display: flex; flex-direction: column; gap: 16px; }
#pMain .cv-tc-card {
position: relative;
display: flex;
align-items: flex-start;
gap: 14px;
background: var(--c-surface);
border: 1px solid var(--c-border-soft);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 16px 18px 16px 22px;
overflow: hidden;
transition: box-shadow var(--t), transform var(--t);
}
#pMain .cv-tc-card:hover { box-shadow: var(--shadow-md); }
#pMain .cv-tc-card.is-closed { opacity: .82; }
/* status accent bar (left edge) */
#pMain .cv-tc-accent { position: absolute; top: 0; left: 0; bottom: 0; width: 5px; background: var(--c-muted); }
#pMain .cv-tc-card.is-success .cv-tc-accent { background: var(--c-success); }
#pMain .cv-tc-card.is-warning .cv-tc-accent { background: var(--c-warning); }
#pMain .cv-tc-card.is-danger .cv-tc-accent { background: var(--c-danger); }
#pMain .cv-tc-card.is-primary .cv-tc-accent { background: var(--c-brand); }
/* status icon disc */
#pMain .cv-tc-icon {
position: relative;
flex: 0 0 auto;
width: 46px; height: 46px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 19px; color: #fff;
background: var(--c-muted);
box-shadow: var(--shadow-sm);
}
#pMain .cv-tc-card.is-success .cv-tc-icon { background: var(--c-success); }
#pMain .cv-tc-card.is-warning .cv-tc-icon { background: var(--c-warning); }
#pMain .cv-tc-card.is-danger .cv-tc-icon { background: var(--c-danger); }
#pMain .cv-tc-card.is-primary .cv-tc-icon { background: linear-gradient(135deg, var(--cv-dark), var(--cv-mid)); }
#pMain .cv-tc-live-dot {
position: absolute; top: -2px; right: -2px;
width: 13px; height: 13px; border-radius: 50%;
background: #ef4444; border: 2px solid var(--c-surface);
animation: cvTcPulse 1.4s ease-out infinite;
}
@keyframes cvTcPulse {
0% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
70% { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
#pMain .cv-tc-main { flex: 1 1 auto; min-width: 0; }
#pMain .cv-tc-head {
display: flex; align-items: center; gap: 12px;
cursor: pointer;
}
#pMain .cv-tc-headtext { flex: 1 1 auto; min-width: 0; }
#pMain .cv-tc-title {
margin: 0 0 3px;
font-size: 116%; font-weight: 700;
color: var(--cv-dark) !important;
line-height: 1.25;
word-wrap: break-word;
}
#pMain .cv-tc-time { font-size: 86%; color: var(--c-muted); }
#pMain .cv-tc-time i { color: var(--c-brand); margin-right: 4px; }
#pMain .cv-tc-time span { display: inline; }
#pMain .cv-tc-status-pill {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 5px;
font-size: 75%; font-weight: 700; letter-spacing: .04em;
padding: 3px 10px; border-radius: var(--radius-pill);
}
#pMain .cv-tc-status-pill.is-live { background: #fee2e2; color: #b91c1c; }
#pMain .cv-tc-status-pill.is-live i { font-size: 7px; animation: cvTcBlink 1.2s steps(2,start) infinite; }
@keyframes cvTcBlink { 50% { opacity: .25; } }
#pMain .cv-tc-toggle {
flex: 0 0 auto;
color: var(--c-muted); font-size: 14px;
transition: transform var(--t);
}
#pMain .cv-tc-card.is-closed .cv-tc-toggle { transform: rotate(-90deg); }
#pMain .cv-tc-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-border-soft); }
#pMain .cv-tc-desc { margin: 0 0 12px; color: #374151; line-height: 1.5; }
#pMain .cv-tc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#pMain .cv-tc-enter { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; border-radius: var(--radius-md); }
#pMain .cv-tc-participants {
display: inline-flex; align-items: center; gap: 5px;
font-size: 84%; font-weight: 600; color: var(--c-success);
background: var(--c-success-soft); padding: 4px 10px; border-radius: var(--radius-pill);
}
#pMain .cv-tc-copy { margin-left: auto; border-radius: var(--radius-md) !important; }
#pMain .cv-tc-alert {
margin-top: 14px;
background: var(--c-danger-soft);
border: 1px solid #fecaca;
border-left: 4px solid var(--c-danger);
border-radius: var(--radius-md);
padding: 12px 14px;
}
#pMain .cv-tc-alert-title { font-weight: 700; color: #991b1b; margin-bottom: 6px; }
#pMain .cv-tc-alert p { margin: 0 0 10px; color: #7f1d1d; font-size: 90%; }
#pMain .cv-tc-rec { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--c-border-soft); }
#pMain .cv-tc-rec-title { margin: 0 0 10px; font-size: 95%; font-weight: 700; color: var(--cv-dark); }
#pMain .cv-tc-rec-title i { color: var(--c-brand); margin-right: 5px; }
/* Restyle the fixed getRecordingsHtml() output.
Markup (set in bbb_api.jspf, shared) per recording: tr>td with
.col-md-8 (icon+name), .col-md-11 (start time), .col-md-5 (playback btns). */
#pMain .cv-tc-rec table.paleBlock {
width: 100% !important;
background: transparent !important;
border: 0 !important;
border-collapse: separate;
border-spacing: 0;
margin: 0;
}
#pMain .cv-tc-rec table.paleBlock tbody,
#pMain .cv-tc-rec table.paleBlock tr { display: block; }
#pMain .cv-tc-rec table.paleBlock td {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 14px;
background: var(--c-surface-2);
border: 1px solid var(--c-border-soft);
border-radius: var(--radius-md);
padding: 10px 14px;
margin-bottom: 8px;
transition: background var(--t), box-shadow var(--t);
}
#pMain .cv-tc-rec table.paleBlock td:hover { background: var(--c-brand-softer); box-shadow: var(--shadow-sm); }
#pMain .cv-tc-rec table.paleBlock td:last-child { margin-bottom: 0; }
/* neutralize Bootstrap column floats/widths inside the row */
#pMain .cv-tc-rec td > div[class*="col-md-"] { float: none; width: auto; padding: 0; min-height: 0; }
#pMain .cv-tc-rec .col-md-8 {
flex: 1 1 220px; min-width: 0;
font-weight: 600; color: var(--cv-dark);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#pMain .cv-tc-rec .col-md-8 i { color: var(--c-brand); margin-right: 7px; }
#pMain .cv-tc-rec .col-md-11 {
flex: 0 0 auto;
font-size: 83%; color: var(--c-muted);
display: inline-flex; align-items: center; gap: 5px;
}
#pMain .cv-tc-rec .col-md-11::before {
font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f017"; /* fa-clock */
color: var(--c-muted); opacity: .7;
}
#pMain .cv-tc-rec .col-md-5 { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
/* the playback action buttons */
#pMain .cv-tc-rec .col-md-5 .btn {
display: inline-flex; align-items: center; gap: 6px;
border-radius: var(--radius-md);
font-weight: 600;
}
#pMain .cv-tc-rec .col-md-5 .btn.pull-right { float: none !important; }
/* "processing" placeholder (legacy .paleBlock.text-warning) → soft warning chip */
#pMain .cv-tc-rec .col-md-5 .paleBlock.text-warning,
#pMain .cv-tc-rec div.paleBlock.text-warning {
display: inline-flex; align-items: center; gap: 6px;
background: var(--c-warning-soft) !important;
color: var(--c-warning) !important;
border: 1px solid #fde68a;
border-radius: var(--radius-pill);
padding: 4px 12px; font-size: 84%; font-weight: 600;
margin: 0;
}
#pMain .cv-tc-empty {
text-align: center; color: var(--c-muted);
padding: 48px 20px;
background: var(--c-surface-2);
border: 1px dashed var(--cv-panel-border);
border-radius: var(--radius-md);
}
#pMain .cv-tc-empty i { font-size: 40px; color: var(--cv-panel-border); margin-bottom: 12px; }
#pMain .cv-tc-empty p { margin: 0; font-size: 104%; }
@media (max-width: 600px) {
#pMain .cv-tc-card { flex-wrap: wrap; padding-left: 18px; }
#pMain .cv-tc-icon { width: 40px; height: 40px; font-size: 17px; }
#pMain .cv-tc-copy { margin-left: 0; }
}
/* ===================== AI Artifact Generator (cv-art-*) ===================== */
/* Builds on the cv-air chat shell; only the generator-specific bits live here. */
#pMain .cv-art-toolbar {
display: flex;
gap: 12px;
align-items: flex-end;
flex-wrap: wrap;
margin: 14px 0;
padding: 12px 14px;
background: var(--c-surface-2);
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
}
#pMain .cv-art-field { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: 400; }
#pMain .cv-art-field > span { font-size: 82%; color: var(--c-muted); }
#pMain .cv-art-field.cv-art-grow { flex: 1 1 220px; }
#pMain .cv-art-toolbar .cv-air-send { align-self: flex-end; }
#pMain .cv-art-toolbar .cv-air-send:disabled { opacity: .5; cursor: not-allowed; }
/* "Create new" entry at the top of the My-artifacts list. */
#pMain .cv-art-mine .cv-art-newrow {
border: 1px dashed var(--cv-panel-border);
background: var(--c-brand-softer);
color: var(--cv-mid);
font-weight: 600;
}
#pMain .cv-art-mine .cv-art-newrow:hover { background: var(--cv-item-hover); }
/* Per-row delete affordance in the My-artifacts list. */
#pMain .cv-art-mine .cv-art-del {
margin-left: 8px;
padding: 2px 6px;
color: var(--c-muted);
border-radius: var(--radius-sm);
flex: 0 0 auto;
}
#pMain .cv-art-mine .cv-art-del:hover { color: var(--c-danger); background: var(--c-danger-soft); }
/* Deploy (rocket) affordance: approved artifacts only, placed before the trash icon. */
#pMain .cv-art-mine .cv-art-deploy {
margin-left: 8px;
padding: 2px 6px;
color: var(--c-muted);
border-radius: var(--radius-sm);
flex: 0 0 auto;
}
#pMain .cv-art-mine .cv-art-deploy:hover { color: var(--c-success); background: var(--c-success-soft); }
/* Quiz test-run modal: keep long quizzes scrollable inside the dialog. */
#artQuizModal .modal-body { max-height: 70vh; overflow-y: auto; }
#artQuizModal #artQuizOut { min-height: 120px; }
#pMain .cv-art-renderer { margin-bottom: 12px; }
#pMain .cv-art-editorwrap {
display: flex;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
overflow: hidden;
}
/* TinyMCE (document types) replaces the textarea with .tox-tinymce inside the flex row:
let it take the full width, and drop its own frame (the wrap already draws one). */
#pMain .cv-art-editorwrap > .tox-tinymce { flex: 1 1 auto; width: 100%; min-width: 0; border: 0; border-radius: 0; }
#pMain .cv-art-linenums {
padding: 6px 6px;
background: var(--c-surface-2);
color: #9aa5b1;
text-align: right;
border-right: 1px solid var(--c-border-soft);
overflow: hidden;
user-select: none;
white-space: pre;
min-width: 2.6em;
font-family: "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 13px;
line-height: 18px;
}
#pMain .cv-art-textarea {
flex: 1;
width: 100%;
height: 420px; /* fixed: content scrolls, the editor never grows */
overflow: auto;
font-family: "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 13px;
line-height: 18px;
resize: vertical; /* the user may still resize by hand */
border: none;
border-radius: 0;
outline: none;
box-shadow: none;
padding: 6px 8px;
margin: 0;
}
#pMain .cv-art-syntax {
margin-bottom: 10px;
padding: 6px 12px;
border-radius: var(--radius-md);
font-size: 86%;
}
#pMain .cv-art-syntax-ok { background: var(--c-success-soft); color: var(--c-success); border: 1px solid #cde9d4; }
#pMain .cv-art-syntax-err { background: var(--c-danger-soft); color: var(--c-danger); border: 1px solid #f2c9c9; }
#pMain .cv-art-syntax-err a { color: var(--c-danger); font-weight: 600; text-decoration: underline; }
#pMain .cv-art-view {
width: 100%;
height: 420px; /* fixed, matches the text editors */
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
background: #fff;
}
#pMain .cv-art-status {
margin-bottom: 12px;
padding: 8px 12px;
border-radius: var(--radius-md);
background: var(--c-warning-soft);
border: 1px solid #f3e1bd;
font-size: 88%;
}
#pMain .cv-art-warn { color: var(--c-warning); padding: 2px 0; }
#pMain .cv-art-warn:before { content: "▲ "; }
#pMain .cv-art-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#pMain .cv-art-actions .btn { flex: 1 1 auto; }
#pMain .cv-art-statusbadge { margin-bottom: 6px; }
#pMain .cv-art-queue, #pMain .cv-art-mine { margin-top: 6px; }
#pMain .cv-art-queue .ac-row, #pMain .cv-art-mine .ac-row { padding: 8px 12px; }
#pMain .cv-art-mine .cv-chip { margin-left: auto; }
/* ===================== AI Artifact Generator v2: library + workspace (cv-art2) ===================== */
#pMain .cv-art2 { max-width: 1440px; }
#pMain .cv-art-h2 { font-size: 15px; font-weight: 700; color: var(--cv-dark); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
#pMain .cv-art-h2 .fa { color: var(--cv-mid); }
/* status chip (library rows + workspace header) */
#pMain .cv-art-st {
display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-pill);
font-size: 12px; font-weight: 700; white-space: nowrap; background: rgba(15,23,42,.07); color: #334155;
}
#pMain .cv-art-st.is-pending_approval { background: var(--c-warning-soft); color: #92400e; }
#pMain .cv-art-st.is-approved { background: var(--c-success-soft); color: #166534; }
#pMain .cv-art-st.is-rejected { background: var(--c-danger-soft); color: #b91c1c; }
/* --- library: new cards --- */
#pMain .cv-art-newrow2 { margin-bottom: 18px; }
#pMain .cv-art-newcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
#pMain .cv-art-newcard {
display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; text-align: left;
background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); cursor: pointer;
transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
#pMain .cv-art-newcard:hover { box-shadow: var(--shadow-md); border-color: var(--cv-mid); transform: translateY(-1px); }
#pMain .cv-art-newcard > .fa { font-size: 20px; color: var(--cv-mid); margin-bottom: 4px; }
#pMain .cv-art-newcard-t { font-weight: 700; color: var(--cv-dark); font-size: 14px; }
#pMain .cv-art-newcard-d { font-size: 12px; color: var(--c-muted); }
#pMain .cv-art-newcard.is-suggested { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(60,132,189,.18); }
#pMain .cv-art-newrow2 .cv-art-newcards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* "how do you want to start?" step of #artNewModal */
#pMain .cv-art-startq { font-weight: 600; color: var(--cv-dark); margin: 0 0 10px; }
#pMain .cv-art-starts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#pMain .cv-art-start {
display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; text-align: center;
background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); cursor: pointer;
transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
#pMain .cv-art-start:hover, #pMain .cv-art-start:focus { box-shadow: var(--shadow-md); border-color: var(--cv-mid); transform: translateY(-1px); outline: none; }
#pMain .cv-art-start > .fa { font-size: 24px; color: var(--cv-mid); }
#pMain .cv-art-start-t { font-weight: 700; color: var(--cv-dark); font-size: 14px; }
#pMain .cv-art-start-d { font-size: 12px; color: var(--c-muted); line-height: 1.35; }
#pMain .cv-art-startback { display: inline-block; margin-bottom: 10px; font-size: 13px; }
#pMain #artNewStep2 .cv-art-field { margin-bottom: 10px; }
@media (max-width: 600px) { #pMain .cv-art-starts { grid-template-columns: 1fr; } }
/* --- library: list --- */
#pMain .cv-art-libbox { background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-lg); overflow: hidden; }
#pMain .cv-art-libbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; background: var(--c-surface-2); border-bottom: 1px solid var(--cv-panel-border); }
#pMain .cv-art-tabs { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
#pMain .cv-art-tab {
border: 1px solid transparent; background: transparent; padding: 5px 12px; border-radius: var(--radius-pill);
font-size: 13px; color: #334155; cursor: pointer;
}
#pMain .cv-art-tab:hover { background: var(--cv-item-hover); }
#pMain .cv-art-tab.is-active { background: var(--cv-mid); color: #fff; }
#pMain .cv-art-libtools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#pMain .cv-art-pendchip {
border: 1px solid var(--cv-panel-border); background: #fff; padding: 4px 12px; border-radius: var(--radius-pill);
font-size: 13px; color: #334155; cursor: pointer;
}
#pMain .cv-art-pendchip.has-items { border-color: #f3d29b; color: #92400e; background: var(--c-warning-soft); }
#pMain .cv-art-pendchip.is-active { background: #d97706; color: #fff; border-color: #d97706; }
#pMain .cv-art-search, .cv-patlib .cv-art-search { position: relative; }
#pMain .cv-art-search .fa, .cv-patlib .cv-art-search .fa { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--c-muted); }
#pMain .cv-art-search input, .cv-patlib .cv-art-search input { padding-left: 30px; min-width: 220px; height: 32px; border-radius: var(--radius-pill); }
#pMain .cv-art-liblist { max-height: 62vh; overflow: auto; }
#pMain .cv-art-row {
display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--c-border-soft);
cursor: pointer; transition: background var(--t);
}
#pMain .cv-art-row:hover, #pMain .cv-art-row:focus { background: var(--cv-item-hover); outline: none; }
#pMain .cv-art-rowico {
flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--c-surface-2);
display: inline-flex; align-items: center; justify-content: center; color: var(--cv-mid);
}
#pMain .cv-art-rowmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#pMain .cv-art-rowtitle { font-weight: 600; color: var(--cv-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pMain .cv-art-rowmeta { font-size: 12px; color: var(--c-muted); }
#pMain .cv-art-rowbtn {
border: 0; background: transparent; width: 30px; height: 30px; border-radius: var(--radius-md); color: var(--c-muted); cursor: pointer;
}
#pMain .cv-art-rowbtn.is-del:hover { background: var(--c-danger-soft); color: var(--c-danger); }
#pMain .cv-art-rowbtn.is-deploy { color: var(--c-success); }
#pMain .cv-art-rowbtn.is-deploy:hover { background: var(--c-success-soft); }
#pMain .cv-art-libempty { padding: 30px; text-align: center; color: var(--c-muted); }
/* --- workspace --- */
#pMain .cv-art-wshead {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; margin-bottom: 10px;
background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-lg);
position: sticky; top: var(--cv-sticky-top); z-index: 20;
}
#pMain .cv-art-back { border: 0; background: var(--c-surface-2); padding: 6px 12px; border-radius: var(--radius-pill); color: var(--cv-dark); font-weight: 600; cursor: pointer; }
#pMain .cv-art-back:hover { background: var(--cv-item-hover); }
#pMain .cv-art-wstype { font-size: 12px; color: var(--c-muted); white-space: nowrap; }
#pMain .cv-art-wstitle {
flex: 1 1 240px; min-width: 160px; border: 1px solid transparent; border-radius: var(--radius-md); padding: 5px 8px;
font-size: 17px; font-weight: 700; color: var(--cv-dark); background: transparent;
}
#pMain .cv-art-wstitle:hover, #pMain .cv-art-wstitle:focus { border-color: var(--cv-panel-border); background: #fff; outline: none; }
#pMain .cv-art-owner { font-size: 12px; color: var(--c-muted); }
#pMain .cv-art-wsactions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
#pMain .cv-art-wsactions #artModActions { display: inline-flex; gap: 6px; }
#pMain .cv-art-robar { padding: 8px 12px; margin-bottom: 10px; border-radius: var(--radius-md); background: var(--c-info-soft); color: #075985; font-size: 13px; }
#pMain .cv-art-wsbody { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; align-items: start; }
#pMain .cv-art-ws.chat-collapsed .cv-art-wsbody { grid-template-columns: minmax(0, 1fr) 44px; }
#pMain .cv-art-ws.chat-collapsed .cv-art-chat > :not(.cv-art-chathead) { display: none; }
/* Collapsed: a compact vertical tab (arrow, icon, «Βοηθός AI»); a click anywhere expands it. */
#pMain .cv-art-ws.chat-collapsed .cv-art-chat { height: auto !important; min-height: 0; cursor: pointer; }
#pMain .cv-art-ws.chat-collapsed .cv-art-chat:hover { border-color: var(--cv-mid); }
#pMain .cv-art-ws.chat-collapsed .cv-art-chathead { flex-direction: column; gap: 10px; padding: 10px 0 14px; border-bottom: 0; }
#pMain .cv-art-ws.chat-collapsed .cv-art-chathead > .cv-art-scope { display: none; }
#pMain .cv-art-ws.chat-collapsed .cv-art-chathead > .cv-art-chattoggle { order: -1; margin: 0; }
#pMain .cv-art-ws.chat-collapsed .cv-art-chathead > .fa-comments { font-size: 18px; }
#pMain .cv-art-ws.chat-collapsed .cv-art-chathead > span:not(.cv-art-scope) { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12.5px; white-space: nowrap; }
#pMain .cv-art-ws.chat-collapsed .cv-art-chattoggle .fa { transform: rotate(180deg); }
#pMain .cv-art-wsmain { min-width: 0; }
#pMain .cv-art-ws .cv-art-textarea { min-height: 560px; }
#pMain .cv-art-chat {
display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-lg);
position: sticky; top: calc(var(--cv-sticky-top) + 64px); height: calc(100vh - var(--cv-header-h) - 90px); min-height: 380px; overflow: hidden;
}
#pMain .cv-art-chathead { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--c-border-soft); font-weight: 700; color: var(--cv-dark); }
#pMain .cv-art-chathead .fa-comments { color: var(--cv-mid); }
#pMain .cv-art-scope {
margin-left: auto; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-pill);
background: var(--c-brand-softer); color: var(--cv-mid); border: 1px solid var(--cv-panel-border); max-width: 170px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#pMain .cv-art-scope.is-toggle { cursor: pointer; }
#pMain .cv-art-scope.is-toggle:hover { border-color: var(--cv-mid); }
#pMain .cv-art-chattoggle { border: 0; background: transparent; color: var(--c-muted); padding: 2px 6px; cursor: pointer; }
#pMain .cv-art-chathead .cv-art-scope + .cv-art-chattoggle { margin-left: 0; }
#pMain .cv-art-chathead > .cv-art-chattoggle:only-of-type { margin-left: auto; }
#pMain .cv-art-chatmsgs { flex: 1 1 auto; overflow: auto; padding: 10px; font-size: 13.5px; }
#pMain .cv-art-chatmsgs .paleBlock, #pMain .cv-art-chatmsgs .whiteBlock { border-radius: var(--radius-md); max-width: 100%; }
#pMain .cv-art-scopechip { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: var(--radius-pill); background: rgba(45,90,142,.12); color: var(--cv-mid); }
#pMain .cv-art-chatinput { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--c-border-soft); }
#pMain .cv-art-chatinput textarea { resize: none; font-size: 13.5px; }
#pMain .cv-art-chatinput .cv-air-send { padding: 0 14px; }
#pMain .cv-art-palette { flex: 0 0 120px; flex-direction: column; gap: 3px; padding: 6px; border-left: 1px solid rgba(0,0,0,.1); }
#pMain .cv-art-palette .pal-btn { text-align: left; }
#pMain .cv-art-palette .pal-l0 { font-weight: 700; }
#pMain .cv-art-palette .pal-l1 { margin-left: 10px; }
#pMain .cv-art-palette .pal-l2 { margin-left: 20px; }
#pMain .cv-art-palette .pal-l3 { margin-left: 30px; }
#pMain .cv-art-palette .pal-b { font-weight: 700; }
#pMain .cv-art-palbadge { font-size: 11px; padding: 3px 8px; border-radius: 10px; margin: 0 0 10px 0; text-align: center; }
.cv-art-toast {
position: fixed; right: 24px; bottom: 24px; z-index: 2000; max-width: 420px; padding: 10px 16px; border-radius: var(--radius-md);
background: #1f2937; color: #fff; box-shadow: var(--shadow-lg); font-size: 13.5px;
}
.cv-art-toast.is-ok { background: #166534; }
.cv-art-toast.is-warn { background: #92400e; }
.cv-art-toast.is-error { background: #b91c1c; }
/* --- lesson plan workspace (cv-plan) --- */
#pMain .cv-plan-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
#pMain .cv-plan-seg { display: inline-flex; background: var(--c-surface-2); border: 1px solid var(--cv-panel-border); border-radius: var(--radius-pill); padding: 2px; }
#pMain .cv-plan-seg button { border: 0; background: transparent; padding: 5px 14px; border-radius: var(--radius-pill); font-size: 13px; color: #334155; cursor: pointer; }
#pMain .cv-plan-seg button.is-active { background: #fff; color: var(--cv-dark); font-weight: 700; box-shadow: var(--shadow-sm); }
#pMain .cv-plan-warnchip { border: 1px solid #f3d29b; background: var(--c-warning-soft); color: #92400e; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 12.5px; cursor: pointer; }
#pMain .cv-plan-fmt { font-size: 12px; color: var(--c-muted); }
#pMain .cv-plan-warnlist { background: var(--c-warning-soft); border: 1px solid #f3e1bd; border-radius: var(--radius-md); padding: 6px 10px; margin-bottom: 10px; font-size: 13px; color: #92400e; max-height: 160px; overflow: auto; }
#pMain .cv-plan-warnrow { padding: 3px 0; cursor: pointer; }
#pMain .cv-plan-warnrow:hover { text-decoration: underline; }
#pMain .cv-plan-body { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 12px; align-items: start; }
#pMain .cv-plan-outline {
background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-lg); padding: 6px;
position: sticky; top: calc(var(--cv-sticky-top) + 64px); max-height: calc(100vh - var(--cv-header-h) - 100px); overflow: auto;
}
#pMain .cv-plan-node {
display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; border: 0; background: transparent;
padding: 6px 8px; border-radius: var(--radius-md); font-size: 13px; color: #334155; cursor: pointer;
}
#pMain .cv-plan-node:hover { background: var(--cv-item-hover); }
#pMain .cv-plan-node.is-active { background: var(--cv-item-active); color: var(--cv-dark); font-weight: 600; box-shadow: inset 3px 0 0 var(--cv-mid); }
#pMain .cv-plan-node.is-header { font-weight: 700; color: var(--cv-dark); border-bottom: 1px solid var(--c-border-soft); border-radius: 0; margin-bottom: 4px; }
#pMain .cv-plan-node.is-part { font-weight: 700; color: var(--cv-dark); margin-top: 6px; }
#pMain .cv-plan-node.is-act { padding-left: 24px; }
#pMain .cv-plan-node > .fa { color: var(--cv-mid); width: 14px; text-align: center; flex: 0 0 auto; }
#pMain .cv-plan-num { font-size: 11px; color: var(--c-muted); flex: 0 0 auto; }
#pMain .cv-plan-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pMain .cv-plan-bdgs { display: inline-flex; gap: 3px; flex: 0 0 auto; }
#pMain .cv-plan-bdg { font-size: 10.5px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--c-surface-2); color: var(--c-muted); display: inline-flex; gap: 2px; align-items: center; }
#pMain .cv-plan-bdg.is-miss { background: var(--c-danger-soft); color: #b91c1c; }
#pMain .cv-plan-bdg.is-warn { background: var(--c-warning-soft); color: #92400e; }
#pMain .cv-plan-bdg.is-pend { background: var(--c-brand-softer); color: var(--cv-mid); }
#pMain .cv-plan-node.is-filling { box-shadow: inset 3px 0 0 var(--c-brand); background: var(--c-brand-softer); }
#pMain .cv-plan-fillrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
/* staged creation: "outline ready -> fill the parts" banner + progress strip while parts are filled */
#pMain .cv-plan-stage {
display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 10px;
background: linear-gradient(135deg, #f3f8fd 0%, #eaf2fb 100%); border: 1px solid #cfe0f1; border-radius: var(--radius-md);
}
#pMain .cv-plan-stage.is-error { background: var(--c-warning-soft); border-color: #f3e1bd; }
#pMain .cv-plan-stage-ico {
flex: 0 0 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: #fff; color: var(--c-brand); font-size: 18px;
}
#pMain .cv-plan-stage.is-error .cv-plan-stage-ico { color: #b45309; }
#pMain .cv-plan-stage.is-running .cv-plan-stage-ico { animation: cvArtPulse 1.8s ease-out infinite; }
#pMain .cv-plan-stage-main { flex: 1 1 auto; min-width: 0; }
#pMain .cv-plan-stage-step { font-size: 11px; letter-spacing: .05em; color: var(--c-muted); }
#pMain .cv-plan-stage-t { font-weight: 700; color: var(--cv-dark); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pMain .cv-plan-stage-d { font-size: 12.5px; color: var(--c-muted); margin-top: 2px; }
#pMain .cv-plan-stage .cv-art-busy-bar { height: 10px; margin: 6px 0 4px; }
#pMain .cv-plan-stage .cv-art-busy-bar .progress-bar { line-height: 10px; font-size: 9px; }
#pMain .cv-plan-stage-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
#pMain .cv-plan-stage > .cv-air-send, #pMain .cv-plan-stage > .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 600px) { #pMain .cv-plan-stage { flex-wrap: wrap; } #pMain .cv-plan-stage-ico { display: none; } }
@media (prefers-reduced-motion: reduce) { #pMain .cv-plan-stage.is-running .cv-plan-stage-ico { animation: none; } }
#pMain .cv-plan-add { display: block; width: 100%; text-align: left; border: 1px dashed var(--cv-panel-border); background: transparent; color: var(--cv-mid); font-size: 12px; padding: 4px 8px; border-radius: var(--radius-md); margin: 4px 0; cursor: pointer; }
#pMain .cv-plan-add.is-act { margin-left: 24px; width: calc(100% - 24px); }
#pMain .cv-plan-add:hover { background: var(--cv-item-hover); }
#pMain .cv-plan-card { background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-lg); padding: 14px 16px; min-height: 420px; }
#pMain .cv-plan-cardhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
#pMain .cv-plan-kind { font-weight: 700; color: var(--cv-mid); font-size: 13px; letter-spacing: .03em; }
#pMain .cv-plan-nodeacts { margin-left: auto; display: inline-flex; gap: 4px; }
#pMain .cv-plan-nodewarn { background: var(--c-warning-soft); color: #92400e; border-radius: var(--radius-md); padding: 6px 10px; font-size: 13px; margin-bottom: 10px; }
#pMain .cv-plan-f { display: block; margin: 0 0 12px; font-weight: 400; }
#pMain .cv-plan-flbl { display: block; font-size: 12.5px; font-weight: 600; color: #475569; margin-bottom: 4px; }
#pMain .cv-plan-flbl small { font-weight: 400; color: var(--c-muted); }
#pMain .cv-plan-f textarea { resize: vertical; font-size: 13.5px; line-height: 1.45; }
#pMain .cv-plan-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#pMain .cv-plan-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Reference Material: one row per source = document chip + its search topics */
#pMain .cv-plan-refs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
#pMain .cv-plan-ref { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#pMain .cv-plan-ref .cv-plan-chip { flex: 0 1 auto; max-width: 100%; }
#pMain .cv-plan-reftopics { flex: 1 1 220px; min-width: 160px; height: 28px; font-size: 12.5px; }
#pMain .cv-plan-reftopics-ro { flex: 1 1 220px; font-size: 12.5px; color: var(--c-muted); font-style: italic; }
#pMain .cv-plan-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--c-surface-2); border: 1px solid var(--cv-panel-border); font-size: 12.5px; color: #1f2937; }
#pMain .cv-plan-chip.is-pattern { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; cursor: pointer; }
#pMain .cv-plan-chip.is-ref.is-strict { background: #ecfdf5; border-color: #a7f3d0; }
#pMain .cv-plan-chip em { color: var(--c-muted); font-style: normal; }
#pMain .cv-plan-chipx { color: var(--c-muted); font-weight: 700; text-decoration: none; margin-left: 2px; }
#pMain .cv-plan-chipx:hover { color: var(--c-danger); }
#pMain .cv-plan-chiptg { font-size: 11px; color: var(--cv-mid); text-decoration: underline dotted; }
#pMain .cv-plan-hint { font-size: 12.5px; color: var(--c-muted); }
#pMain .cv-plan-sigs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
#pMain .cv-plan-sig { display: grid; grid-template-columns: 200px minmax(0, 1fr) 18px; gap: 6px; align-items: center; }
#pMain .cv-plan-sigtag { font-family: monospace; font-size: 12.5px; }
#pMain .cv-plan-empty { text-align: center; padding: 50px 20px; color: var(--c-muted); }
#pMain .cv-plan-empty > .fa { font-size: 34px; color: var(--cv-panel-border); }
#pMain .cv-plan-empty p { max-width: 460px; margin: 10px auto 16px; }
#pMain .cv-plan-body.is-empty { grid-template-columns: minmax(0, 1fr); }
#pMain .cv-plan-body.is-empty .cv-plan-outline { display: none; }
#pMain .cv-plan-note { font-size: 12.5px; color: var(--c-muted); margin-bottom: 6px; }
#pMain .cv-plan-slice { font-family: monospace; font-size: 13px; }
#pMain .cv-plan-preview { background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-lg); padding: 18px 22px; }
#pMain .cv-plan-pv h2 { margin-top: 0; color: var(--cv-dark); }
#pMain .cv-plan-pvmeta { color: var(--c-muted); }
#pMain .cv-plan-pvpart { border-top: 1px solid var(--c-border-soft); padding-top: 8px; margin-top: 14px; }
#pMain .cv-plan-pvact { margin: 8px 0 8px 14px; padding-left: 12px; border-left: 3px solid var(--cv-panel-border); }
#pMain .cv-plan-pre { white-space: pre-wrap; font-size: 13px; }
#pMain .cv-plan-pvbar { display: flex; justify-content: flex-end; margin: -6px -8px 8px 0; }
#pMain .cv-art-ws.is-final .cv-plan-card, #pMain .cv-art-ws.is-readonly .cv-plan-card { background: #fcfcfd; }
/* --- pattern library (modal; may live outside #pMain) --- */
.cv-patlib-dialog { width: 1100px; max-width: 96vw; }
.cv-patlib-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cv-patlib-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cv-patlib-cat { border: 1px solid var(--cv-panel-border); background: #fff; padding: 3px 11px; border-radius: var(--radius-pill); font-size: 12.5px; cursor: pointer; }
.cv-patlib-cat b { font-weight: 600; color: var(--c-muted); margin-left: 3px; }
.cv-patlib-cat.is-active { background: var(--cv-mid); color: #fff; border-color: var(--cv-mid); }
.cv-patlib-cat.is-active b { color: rgba(255,255,255,.8); }
.cv-patlib-main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; height: 60vh; }
#cvPatLib.is-detail-only .cv-patlib-dialog { width: 640px; }
#cvPatLib.is-detail-only .cv-patlib-bar, #cvPatLib.is-detail-only .cv-patlib-cats, #cvPatLib.is-detail-only .cv-patlib-list { display: none; }
#cvPatLib.is-detail-only .cv-patlib-main { grid-template-columns: minmax(0, 1fr); height: auto; max-height: 70vh; }
#cvPatLib.is-detail-only .cv-patlib-detail { border-left: 0; padding-left: 0; }
.cv-patlib-list { overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; align-content: start; padding-right: 4px; }
.cv-patlib-card { border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); padding: 9px 10px; background: #fff; cursor: pointer; transition: border-color var(--t), box-shadow var(--t); }
.cv-patlib-card:hover { box-shadow: var(--shadow-md); }
.cv-patlib-card.is-focus { border-color: var(--cv-mid); box-shadow: 0 0 0 2px rgba(45,90,142,.15); }
.cv-patlib-card.is-suggested { background: #fffbeb; border-color: #f3d29b; }
.cv-patlib-cardtop { display: flex; align-items: center; gap: 6px; }
.cv-patlib-name { font-weight: 700; color: var(--cv-dark); flex: 1 1 auto; font-size: 13.5px; }
.cv-patlib-used { color: var(--c-success); font-size: 12px; }
.cv-patlib-add { border: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--c-brand-softer); color: var(--cv-mid); cursor: pointer; }
.cv-patlib-add:hover { background: var(--cv-mid); color: #fff; }
.cv-patlib-use { font-size: 12px; color: #475569; margin-top: 4px; line-height: 1.35; }
.cv-patlib-why { font-size: 12px; color: #92400e; margin-top: 4px; }
.cv-patlib-catdot { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 0 7px; border-radius: var(--radius-pill); margin-top: 3px; background: #f1f5f9; color: #475569; }
.cv-patlib-catdot.cat-diagnosis { background: #fef3c7; color: #92400e; }
.cv-patlib-catdot.cat-explanation { background: #dbeafe; color: #1e40af; }
.cv-patlib-catdot.cat-guided_practice { background: #dcfce7; color: #166534; }
.cv-patlib-catdot.cat-retrieval_reflection { background: #ede9fe; color: #5b21b6; }
.cv-patlib-catdot.cat-critical_thinking { background: #fee2e2; color: #991b1b; }
.cv-patlib-catdot.cat-metacognition { background: #cffafe; color: #155e75; }
.cv-patlib-catdot.cat-assessment_feedback { background: #fce7f3; color: #9d174d; }
.cv-patlib-detail { overflow: auto; border-left: 1px solid var(--c-border-soft); padding-left: 14px; font-size: 13px; }
.cv-patlib-detail h3 { margin: 0 0 4px; font-size: 18px; color: var(--cv-dark); }
.cv-patlib-detail h4 { font-size: 13px; font-weight: 700; color: var(--cv-mid); margin: 14px 0 4px; }
.cv-patlib-detail ul { padding-left: 18px; margin: 0; }
.cv-patlib-detail li { margin-bottom: 3px; }
.cv-patlib-desc { margin: 8px 0; color: #334155; }
.cv-patlib-addbig { margin: 6px 0 4px; }
@media (max-width: 1100px) {
#pMain .cv-art-wsbody { grid-template-columns: minmax(0, 1fr); }
#pMain .cv-art-chat { position: static; height: 460px; }
#pMain .cv-plan-body { grid-template-columns: minmax(0, 1fr); }
#pMain .cv-plan-outline { position: static; max-height: 280px; }
.cv-patlib-main { grid-template-columns: minmax(0, 1fr); height: auto; }
.cv-patlib-list { max-height: 40vh; }
}
/* ===================== GIFT quiz player skin (#quiz-player-root) =====================
Shared skin for the runGiftQuiz player. Copied verbatim from the inline block in
course_assess_aiview.jsp so the AI Artifact Generator's test-run modal renders the same
"fancy" player; this copy is the shared source — the aiview inline block is identical and
can be removed in a later cleanup. Fonts Syne/Lora are linked in index.jsp. */
#quiz-player-root, #quiz-player-root *, #quiz-player-root *::before, #quiz-player-root *::after {
box-sizing: border-box;
}
#quiz-player-root {
--qz-surface: #ffffff;
--qz-bg-soft: #faf8f4;
--qz-border: #e8e2d9;
--qz-ink: #1c1917;
--qz-muted: #78716c;
--qz-accent: #c2410c;
--qz-accent-lt: #fff1ec;
--qz-correct: #166534;
--qz-correct-bg: #dcfce7;
--qz-wrong: #991b1b;
--qz-wrong-bg: #fee2e2;
--qz-partial: #92400e;
--qz-partial-bg: #fef3c7;
--qz-track: #e8e2d9;
--qz-sans: 'Syne', sans-serif;
--qz-serif: 'Lora', serif;
font-family: var(--qz-serif);
color: var(--qz-ink);
width: 100%;
}
#quiz-player-root #quiz { display: none; }
#quiz-player-root #quiz-output { width: 100%; }
#quiz-player-root #artQuizOut { width: 100%; }
#quiz-player-root .qz-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 1.25rem;
}
#quiz-player-root .qz-label {
font-family: var(--qz-sans); font-size: 1.9rem; font-weight: 700;
letter-spacing: 0.12em; color: var(--qz-muted);
}
#quiz-player-root .qz-track { flex: 1; margin: 0 1rem; height: 4px; background: var(--qz-track); border-radius: 2px; overflow: hidden; }
#quiz-player-root .qz-fill { height: 100%; background: var(--qz-accent); border-radius: 2px; transition: width 0.45s cubic-bezier(.4,0,.2,1); }
#quiz-player-root .qz-card {
background: var(--qz-surface);
border: 1px solid var(--qz-border);
border-radius: 4px;
padding: 1.5rem 1.25rem 1rem;
box-shadow: 4px 4px 0 var(--qz-border);
animation: qzCardIn 0.3s ease both;
}
@keyframes qzCardIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
#quiz-player-root .qz-qid {
font-family: var(--qz-sans); font-size: 1.15rem; font-weight: 700;
letter-spacing: 0.1em;
color: var(--qz-accent); margin-bottom: 0.4rem;
}
#quiz-player-root .qz-marks {
font-family: var(--qz-sans); font-size: 0.95rem; font-weight: 600;
color: var(--qz-muted); margin-bottom: 0.75rem; letter-spacing: 0.04em;
}
#quiz-player-root .qz-stem {
font-size: 1.5rem; font-weight: 500; line-height: 1.55;
color: var(--qz-ink); margin-bottom: 1.5rem;
}
#quiz-player-root mjx-container[display="true"] {
display: inline !important; margin: 0 0.2em !important; text-align: unset !important;
}
#quiz-player-root .qz-options { display: flex; flex-direction: column; gap: 0.5rem; }
#quiz-player-root .qz-opt {
display: flex; align-items: center; gap: 0.85rem;
padding: 0.85rem 1rem; border: 1.5px solid var(--qz-border); border-radius: 4px;
background: var(--qz-bg-soft); font-family: var(--qz-serif); font-size: 1.45rem; color: var(--qz-ink);
cursor: pointer; text-align: left; width: 100%;
transition: border-color 0.15s, background 0.15s;
}
#quiz-player-root .qz-opt:hover:not(:disabled) { border-color: var(--qz-accent); background: var(--qz-accent-lt); }
#quiz-player-root .qz-opt:disabled { cursor: default; }
#quiz-player-root .qz-opt.opt-correct { border-color: var(--qz-correct); background: var(--qz-correct-bg); color: var(--qz-correct); font-weight: 500; }
#quiz-player-root .qz-opt.opt-wrong { border-color: var(--qz-wrong); background: var(--qz-wrong-bg); color: var(--qz-wrong); }
#quiz-player-root .qz-opt.opt-partial { border-color: var(--qz-partial); background: var(--qz-partial-bg); color: var(--qz-partial); }
#quiz-player-root .opt-letter {
font-family: var(--qz-sans); font-size: 0.9rem; font-weight: 700;
width: 22px; height: 22px; border: 1.5px solid currentColor; border-radius: 2px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; opacity: 0.55; transition: opacity 0.15s;
}
#quiz-player-root .qz-opt:hover .opt-letter,
#quiz-player-root .qz-opt.opt-correct .opt-letter,
#quiz-player-root .qz-opt.opt-wrong .opt-letter,
#quiz-player-root .qz-opt.opt-partial .opt-letter { opacity: 1; }
#quiz-player-root .opt-weight {
margin-left: auto; font-family: var(--qz-sans); font-size: 0.88rem; font-weight: 700;
opacity: 0; transition: opacity 0.2s; white-space: nowrap; padding-left: 0.5rem;
}
#quiz-player-root .qz-opt.opt-correct .opt-weight,
#quiz-player-root .qz-opt.opt-wrong .opt-weight,
#quiz-player-root .qz-opt.opt-partial .opt-weight { opacity: 1; }
#quiz-player-root .opt-letter.checkbox { border-radius: 3px; }
#quiz-player-root .qz-opt.opt-checked .opt-letter.checkbox {
background: var(--qz-accent); color: #fff; border-color: var(--qz-accent); opacity: 1;
}
#quiz-player-root .qz-submit-row { margin-top: 1rem; display: flex; justify-content: flex-end; }
#quiz-player-root .qz-tf { display: flex; gap: 0.75rem; }
#quiz-player-root .qz-tf .qz-opt {
flex: 1; justify-content: center;
font-family: var(--qz-sans); font-weight: 700; font-size: 1rem; letter-spacing: 0.05em;
}
#quiz-player-root .qz-inp-row { display: flex; gap: 0.6rem; }
#quiz-player-root .qz-inp {
flex: 1; padding: 0.85rem 1rem;
border: 1.5px solid var(--qz-border); border-radius: 4px;
font-family: var(--qz-serif); font-size: 1.05rem; color: var(--qz-ink);
background: var(--qz-bg-soft); outline: none; transition: border-color 0.15s;
}
#quiz-player-root .qz-inp:focus { border-color: var(--qz-accent); }
#quiz-player-root .qz-inp:disabled { opacity: 0.55; }
#quiz-player-root .qz-inp.opt-correct { border-color: var(--qz-correct); background: var(--qz-correct-bg); color: var(--qz-correct); }
#quiz-player-root .qz-inp.opt-wrong { border-color: var(--qz-wrong); background: var(--qz-wrong-bg); color: var(--qz-wrong); }
#quiz-player-root .qz-inp.opt-partial { border-color: var(--qz-partial); background: var(--qz-partial-bg); color: var(--qz-partial); }
#quiz-player-root .qz-check {
padding: 0.85rem 1.3rem; background: var(--qz-ink); color: #fff;
border: none; border-radius: 4px;
font-family: var(--qz-sans); font-size: 0.9rem; font-weight: 700;
letter-spacing: 0.06em;
cursor: pointer; white-space: nowrap; transition: background 0.15s;
}
#quiz-player-root .qz-check:hover:not(:disabled) { background: var(--qz-accent); }
#quiz-player-root .qz-check:disabled { opacity: 0.4; cursor: default; }
#quiz-player-root .qz-match { display: flex; flex-direction: column; gap: 0.5rem; }
#quiz-player-root .match-row {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.6rem 0.85rem;
border: 1.5px solid var(--qz-border); border-radius: 4px; background: var(--qz-bg-soft);
}
#quiz-player-root .match-left { flex: 1; font-family: var(--qz-serif); font-size: 1.5rem; font-weight: 500; }
#quiz-player-root .match-arrow { color: var(--qz-muted); font-size: 1.45rem; flex-shrink: 0; }
#quiz-player-root .match-sel {
flex: 1; padding: 0.6rem 0.75rem;
border: 1.5px solid var(--qz-border); border-radius: 4px;
font-family: var(--qz-serif); font-size: 1.5rem; color: var(--qz-ink);
background: var(--qz-surface); outline: none; cursor: pointer; transition: border-color 0.15s;
}
#quiz-player-root .match-sel:focus { border-color: var(--qz-accent); }
#quiz-player-root .match-sel.opt-correct { border-color: var(--qz-correct); background: var(--qz-correct-bg); color: var(--qz-correct); }
#quiz-player-root .match-sel.opt-wrong { border-color: var(--qz-wrong); background: var(--qz-wrong-bg); color: var(--qz-wrong); }
#quiz-player-root .qz-feedback {
display: none; margin-top: 1.25rem; padding: 0.9rem 1.1rem; border-radius: 4px;
font-family: var(--qz-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em;
animation: qzFadeIn 0.2s ease;
}
#quiz-player-root .qz-feedback.show { display: block; }
#quiz-player-root .fb-correct { background: var(--qz-correct-bg); color: var(--qz-correct); border: 1px solid #86efac; }
#quiz-player-root .fb-wrong { background: var(--qz-wrong-bg); color: var(--qz-wrong); border: 1px solid #fca5a5; }
#quiz-player-root .fb-partial { background: var(--qz-partial-bg); color: var(--qz-partial); border: 1px solid #fcd34d; }
@keyframes qzFadeIn { from { opacity:0; } to { opacity:1; } }
#quiz-player-root .qz-footer { margin-top: 1.25rem; display: flex; justify-content: space-between; align-items: center; }
#quiz-player-root .qz-next {
padding: 0.85rem 1.75rem; background: var(--qz-accent); color: #fff;
border: none; border-radius: 4px;
font-family: var(--qz-sans); font-size: 0.9rem; font-weight: 700;
letter-spacing: 0.07em;
cursor: pointer; display: none;
transition: opacity 0.15s, transform 0.1s;
}
#quiz-player-root .qz-next:hover { opacity: 0.88; }
#quiz-player-root .qz-next:active { transform: scale(0.97); }
#quiz-player-root .qz-next.visible { display: block; animation: qzFadeIn 0.25s ease; }
#quiz-player-root .qz-skip {
padding: 0.7rem 1.25rem; background: transparent; color: var(--qz-muted);
border: 1px solid var(--qz-border); border-radius: 4px;
font-family: var(--qz-sans); font-size: 0.85rem; font-weight: 600;
cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
#quiz-player-root .qz-skip:hover { color: var(--qz-ink); border-color: var(--qz-muted); }
#quiz-player-root .qz-results {
background: var(--qz-surface); border: 1px solid var(--qz-border); border-radius: 4px;
box-shadow: 4px 4px 0 var(--qz-border);
padding: 2rem 1.5rem; text-align: center; animation: qzCardIn 0.35s ease;
}
#quiz-player-root .res-grade-label {
font-family: var(--qz-sans); font-size: 0.9rem; font-weight: 700;
letter-spacing: 0.12em; color: var(--qz-muted); margin-bottom: 0.5rem;
}
#quiz-player-root .res-grade {
font-family: var(--qz-sans); font-size: 3.5rem; font-weight: 800;
color: var(--qz-accent); line-height: 1; margin-bottom: 0.25rem;
}
#quiz-player-root .res-fraction {
font-family: var(--qz-sans); font-size: 0.95rem; font-weight: 600;
color: var(--qz-muted); margin-bottom: 0.35rem;
}
#quiz-player-root .res-pct {
font-family: var(--qz-sans); font-size: 0.75rem; font-weight: 600;
color: var(--qz-muted); letter-spacing: 0.06em; margin-bottom: 1.5rem;
}
#quiz-player-root .res-breakdown { display: flex; flex-direction: column; gap: 0.4rem; text-align: left; margin-bottom: 1.5rem; }
#quiz-player-root .res-row {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.55rem 0.85rem; border-radius: 4px; background: var(--qz-bg-soft);
}
#quiz-player-root .res-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#quiz-player-root .dot-c { background: var(--qz-correct); }
#quiz-player-root .dot-w { background: var(--qz-wrong); }
#quiz-player-root .dot-p { background: #f59e0b; }
#quiz-player-root .res-q { flex: 1; font-family: var(--qz-serif); font-size: 0.85rem; color: var(--qz-ink); }
#quiz-player-root .res-sc { font-family: var(--qz-sans); font-size: 0.9rem; font-weight: 700; color: var(--qz-muted); white-space: nowrap; }
#quiz-player-root .qz-restart {
padding: 0.7rem 1.75rem; background: var(--qz-ink); color: #fff;
border: none; border-radius: 4px;
font-family: var(--qz-sans); font-size: 0.78rem; font-weight: 700;
letter-spacing: 0.07em;
cursor: pointer; transition: background 0.15s;
}
#quiz-player-root .qz-restart:hover { background: var(--qz-accent); }
#quiz-player-root .qz-error {
padding: 1.1rem; border-radius: 4px;
background: var(--qz-wrong-bg); color: var(--qz-wrong); border: 1px solid #fca5a5;
font-family: var(--qz-sans); font-size: 0.82rem;
}
/* "Από παρουσίαση" modal (slide deck -> lesson plan). */
#artPresModal .cv-art-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; font-weight: 400; }
#artPresModal .cv-art-field > span { font-size: 82%; color: var(--c-muted); }
#artPresModal .cv-art-field.cv-art-grow { flex: 1 1 260px; }
.cv-art-pres-hint { font-size: 13px; color: var(--c-muted); margin: 0 0 10px; min-height: 1.2em; }
.cv-art-pres-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.cv-art-pres-label { font-size: 82%; color: var(--c-muted); }
.cv-art-pres-chips .cv-chip a { margin-left: 4px; text-decoration: none; font-weight: 700; }
.cv-art-pres-vstate { font-size: 13px; color: var(--cv-mid); font-weight: 600; }
.cv-art-pres-vstate.is-done { color: #2e7d32; font-weight: 500; }
#presVisionLbl.is-off { color: var(--c-muted); }
/* busy panel: replaces the form while slides are described / the plan is written */
#artPresModal .modal-body.is-busy > :not(.cv-art-busy),
#artPresModal .modal-body.is-busy + .modal-footer #presGenerate { display: none !important; }
.cv-art-busy {
display: flex; align-items: center; gap: 18px; padding: 22px 20px; margin: 4px 0;
background: linear-gradient(135deg, #f3f8fd 0%, #eaf2fb 100%);
border: 1px solid #cfe0f1; border-radius: var(--radius-md);
}
.cv-art-busy-ico {
flex: 0 0 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: #fff; color: var(--c-brand); font-size: 28px; box-shadow: 0 0 0 0 rgba(60,132,189,.45);
animation: cvArtPulse 1.8s ease-out infinite;
}
.cv-art-busy-ico .fa { animation: cvArtWiggle 2.4s ease-in-out infinite; }
.cv-art-busy-main { flex: 1 1 auto; min-width: 0; }
.cv-art-busy-step { font-size: 12px; letter-spacing: .05em; color: var(--c-muted); min-height: 1em; }
.cv-art-busy-title { font-size: 18px; font-weight: 700; color: var(--cv-dark); margin: 2px 0 10px; }
.cv-art-busy-bar { height: 14px; margin: 0 0 8px; border-radius: 7px; background: #dbe7f3; box-shadow: none; }
.cv-art-busy-bar .progress-bar { background-color: var(--c-brand); font-size: 10px; line-height: 14px; transition: width .6s ease; }
.cv-art-busy-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--cv-dark); }
.cv-art-busy-meta #presBusyTime { font-variant-numeric: tabular-nums; color: var(--c-muted); }
.cv-art-busy-wait { font-size: 12px; color: var(--c-muted); margin-top: 6px; }
@keyframes cvArtPulse { 0% { box-shadow: 0 0 0 0 rgba(60,132,189,.45); } 70% { box-shadow: 0 0 0 16px rgba(60,132,189,0); } 100% { box-shadow: 0 0 0 0 rgba(60,132,189,0); } }
@keyframes cvArtWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .cv-art-busy-ico, .cv-art-busy-ico .fa { animation: none; } }
/* Knowledge scope of the AI turns (new-artifact dialog + #artKbModal + workspace header chip). */
.cv-art-kb-modes { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cv-art-kb-modes label { font-weight: 400; margin: 0; color: var(--cv-dark); cursor: pointer; }
.cv-art-kb-modes input { margin: 0 4px 0 0; vertical-align: -1px; }
.cv-art-kb-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cv-art-kb-sum { font-size: 12px; color: var(--cv-mid); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-art-kb-hint { font-size: 12px; color: var(--c-muted); margin-top: 6px; }
#pMain .cv-art-kbchip {
display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 2px 10px; border-radius: var(--radius-pill);
border: 1px solid var(--cv-panel-border); background: var(--c-brand-softer); color: var(--cv-mid);
font-size: 12px; font-weight: 600; cursor: pointer;
}
#pMain .cv-art-kbchip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pMain .cv-art-kbchip:hover:not(:disabled) { border-color: var(--cv-mid); }
#pMain .cv-art-kbchip:disabled { cursor: default; opacity: .75; }
/* Cohort-report modal (the cross-surface loop's curation step). */
.cv-art-rep-toolbar {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.cv-art-rep-toolbar .cv-art-field { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: 400; }
.cv-art-rep-toolbar .cv-art-field > span { font-size: 82%; color: var(--c-muted); }
.cv-art-rep-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow: auto; }
.cv-art-rep-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
background: var(--c-surface-2);
cursor: pointer;
margin: 0;
font-weight: 400;
}
.cv-art-rep-row:hover { background: var(--cv-item-hover); }
.cv-art-rep-desc { flex: 1; font-size: 90%; }
.cv-art-rep-meta { font-size: 82%; color: var(--c-muted); white-space: nowrap; }
.cv-art-rep-confirmed { background: var(--c-success-soft); color: var(--c-success); border-color: #cde9d4; }
.cv-art-rep-suspected { background: var(--c-warning-soft); color: var(--c-warning); border-color: #f3e1bd; }
.cv-art-rep-unmapped { background: var(--c-surface-2); color: var(--c-muted); }
/* Typing indicator (same animation the coach rooms define inline). */
#pMain .cv-art .typingDots {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: bold;
font-size: 18px;
opacity: .75;
}
#pMain .cv-art .typingDots span { animation: cvArtDotsBlink 1.4s infinite both; }
#pMain .cv-art .typingDots span:nth-child(1) { animation-delay: 0s; }
#pMain .cv-art .typingDots span:nth-child(2) { animation-delay: .2s; }
#pMain .cv-art .typingDots span:nth-child(3) { animation-delay: .4s; }
@keyframes cvArtDotsBlink {
0% { opacity: .2; }
20% { opacity: 1; }
100% { opacity: .2; }
}
@media (max-width: 700px) {
#pMain .cv-art-toolbar { flex-direction: column; align-items: stretch; }
#pMain .cv-art-toolbar .cv-air-send { align-self: stretch; }
}
/* Spacer under the fixed navbar (index.jsp) — height follows --cv-header-h. */
.cv-header-spacer { height: var(--cv-header-h); }
/* =======================================================================
Mobile off-canvas drawer (xs) — #LeftMenu slides in over the content
instead of expanding inline and pushing the page down. Bootstrap's
collapse state machine is untouched: .in = open, request() still calls
collapse('hide'). The drawer stays mounted (visibility, not display) so
the transform can animate and the MutationObservers keep their node.
======================================================================= */
#cvDrawerBackdrop { display: none; }
@media (max-width: 767px) {
#LeftMenu.navbar-collapse {
position: fixed;
top: var(--cv-header-h);
left: 0;
bottom: 0;
width: min(86vw, 320px);
display: block;
height: auto !important;
max-height: none;
margin: 0;
padding: 8px;
border-top: 0;
background: var(--c-surface-2);
box-shadow: var(--shadow-lg);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
z-index: 1040;
transition: transform .22s ease, visibility 0s linear .22s;
}
#LeftMenu.navbar-collapse:not([aria-expanded="true"]) {
visibility: hidden;
transform: translateX(-100%);
}
#LeftMenu.navbar-collapse[aria-expanded="true"] {
visibility: visible;
transform: none;
transition: transform .22s ease, visibility 0s;
}
body:has(#LeftMenu[aria-expanded="true"]) #cvDrawerBackdrop {
display: block;
position: fixed;
inset: var(--cv-header-h) 0 0 0;
background: rgba(15, 23, 42, .45);
z-index: 1035;
}
}
@media (prefers-reduced-motion: reduce) {
#LeftMenu.navbar-collapse { transition: none !important; }
}
/* =======================================================================
Merged header — the old 25px #StatusBarWrapper strip is gone; language,
user chip and logout live in #cvUserMenu inside the navbar. Header is now
the native 50px navbar (--cv-header-h). .statUser is kept because
findUserId() (default.js) parses the avatar src out of it.
======================================================================= */
.cv-navbar { min-height: var(--cv-header-h); }
.cv-usermenu { position: absolute; top: 0; right: 8px; height: var(--cv-header-h); display: flex; align-items: center; z-index: 2; }
.cv-um-toggle { display: flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; padding: 4px 8px; border-radius: var(--radius-pill); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); transition: background var(--t); }
.cv-um-toggle:hover, .cv-um-toggle:focus, .open > .cv-um-toggle { background: rgba(255,255,255,.22); color: #fff; text-decoration: none; outline: none; }
.cv-usermenu .statUser { float: none; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: transparent; font-size: 13px; color: #fff; }
.cv-um-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #fff; }
.cv-um-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-um-caret { opacity: .8; }
.cv-um-panel { min-width: 230px; padding: 6px; border-radius: var(--radius-md); border: 1px solid var(--cv-panel-border); box-shadow: var(--shadow-lg); }
.cv-um-panel .divider { margin: 6px 0; }
.cv-um-row { padding: 4px 6px; }
.cv-um-row form { margin: 0; display: flex; align-items: center; gap: 8px; }
.cv-um-row label { margin: 0; color: var(--c-muted); }
.cv-um-row .langSelect { flex: 1; height: 30px; font-size: 13px; margin: 0; }
.cv-um-logout { width: 100%; text-align: left; border: 0; background: transparent; color: var(--c-danger); font-weight: 600; padding: 6px 8px; border-radius: var(--radius-sm); }
.cv-um-logout:hover, .cv-um-logout:focus { background: var(--c-danger-soft); outline: none; }
.cv-um-lang-anon .langSelect { height: 28px; margin: 0; font-size: 12px; }
@media (min-width: 768px) {
/* one row: brand | links (grow) | user menu; flex so the absolutely-placed menu never overlaps the links */
.cv-navbar > .container { display: flex; align-items: center; position: relative; padding-right: 0; }
.cv-navbar > .container::before, .cv-navbar > .container::after { display: none; }
.cv-navbar > .container > #bs1 { flex: 1 1 auto; }
.cv-usermenu { position: static; flex: 0 0 auto; margin: 0 4px 0 8px; }
}
@media (max-width: 767px) {
/* avatar-only chip pinned top-right; keep the hamburgers clear of it */
.cv-navbar > .container { position: relative; }
.cv-navbar > .container > .navbar-header { margin-right: 52px; }
.cv-um-name, .cv-um-caret { display: none; }
.cv-um-toggle { padding: 3px; }
}
/* Header fit: the merged header is 50px, so the logo box must fit inside it (it used to spill into
the old 25px status strip), and the anonymous language select must not collide with the hamburgers. */
.cv-navbar .navbar-brand { height: var(--cv-header-h); padding-top: 4px; padding-bottom: 4px; display: flex; align-items: center; }
.cv-navbar .navbar-brand img { max-height: 34px !important; width: auto; }
@media (max-width: 767px) {
.cv-um-lang-anon .langSelect { width: 86px; }
.cv-navbar > .container:has(.cv-um-lang-anon) > .navbar-header { margin-right: 100px; }
}
/* =======================================================================
xs header row — one flex line, nothing floats/wraps (the old floated
toggles + brand wrapped the logo onto a second line on narrow phones).
[menu drawer btn] [logo, shrinks] [site links btn] ... [user chip]
======================================================================= */
@media (max-width: 767px) {
.cv-navbar > .container { padding-left: 8px; padding-right: 8px; }
.cv-navbar > .container > .navbar-header {
display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
height: var(--cv-header-h); margin-left: 0; margin-right: 44px; /* room for the avatar chip */
}
.cv-navbar > .container > .navbar-header::before,
.cv-navbar > .container > .navbar-header::after { display: none; }
.cv-navbar > .container > .navbar-collapse { margin-left: -8px; margin-right: -8px; }
.cv-navbar .cv-nav-toggle {
float: none; margin: 0; padding: 0; flex: 0 0 auto;
width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-md); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
color: #fff; transition: background var(--t);
}
.cv-navbar .cv-nav-toggle i { color: #fff; font-size: 17px; line-height: 1; }
.cv-navbar .cv-nav-toggle:hover, .cv-navbar .cv-nav-toggle:focus { background: rgba(255,255,255,.22); outline: none; }
.cv-navbar .cv-nav-toggle:not(.collapsed) { background: #fff; border-color: #fff; } /* open state */
.cv-navbar .cv-nav-toggle:not(.collapsed) i { color: var(--cv-dark); }
.cv-navbar .navbar-brand {
float: none; margin: 0 !important; padding: 0; height: auto; flex: 1 1 auto; min-width: 0;
display: flex; align-items: center;
}
.cv-navbar .navbar-brand img { max-width: 100%; max-height: 32px !important; height: auto; object-fit: contain; }
.cv-navbar .cv-nav-toggle--links { margin-left: auto; }
}
@media (min-width: 768px) { .cv-navbar .cv-nav-toggle { display: none; } }
/* =======================================================================
Edit / view mode language — "reading room" vs "workbench".
body.cv-mode-edit / cv-mode-view are set by editSiteMode()/normalSiteMode()
in default.js on every navigation (edit = mng_*, manage*, msite*, profile*).
The mode is signalled three redundant ways so colour is never the only cue:
(1) header tint + accent stripe, (2) the two-segment switch (icon + label,
filled = current), (3) dotted workbench surface behind the page.
======================================================================= */
:root {
--cv-edit: #d97706;
--cv-edit-dark: #92400e;
--cv-edit-soft: #fffbeb;
--cv-edit-line: #f5d08a;
}
body.cv-mode-edit {
background-color: #f1f5fa;
background-image: radial-gradient(rgba(45,90,142,.18) 1px, transparent 1px);
background-size: 16px 16px;
}
body.cv-mode-edit .cv-navbar {
box-shadow: inset 0 -3px 0 var(--cv-edit), 0 2px 14px rgba(0,0,0,.35); /* inset: stripe adds no height */
}
body.cv-mode-edit #PageTitle { border-bottom: 2px solid var(--cv-edit-line); }
/* --- Two-segment mode switch (built by enhanceModeSwitch) --- */
.cv-modesw {
float: right; display: inline-flex; align-items: center; margin-top: 1px; padding: 3px;
border-radius: var(--radius-pill); background: #eef2f7; border: 1px solid var(--cv-panel-border);
font-size: 13px; letter-spacing: 0; line-height: 1;
}
body.cv-mode-edit .cv-modesw { border-color: var(--cv-edit); }
.cv-modesw-ctx { padding: 0 10px 0 8px; color: var(--c-muted); font-weight: 600; white-space: nowrap; }
.cv-modesw-seg {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; margin: 0;
border: 0; border-radius: var(--radius-pill); background: transparent; color: #475569;
font: inherit; font-weight: 600; cursor: pointer; transition: background var(--t), color var(--t);
}
.cv-modesw-seg:hover, .cv-modesw-seg:focus { background: rgba(15,23,42,.07); outline: none; }
.cv-modesw-seg.is-on { cursor: default; color: #fff; box-shadow: var(--shadow-sm); }
.cv-modesw-seg--view.is-on { background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%); }
.cv-modesw-seg--edit.is-on { background: linear-gradient(135deg, var(--cv-edit-dark) 0%, var(--cv-edit) 100%); }
@media (max-width: 767px) {
.cv-modesw-ctx { display: none; }
.cv-modesw-seg:not(.is-on) .cv-modesw-txt { display: none; } /* icon-only for the inactive segment */
.cv-modesw-seg { padding: 7px 10px; }
}
/* --- Edit-side chrome: admin left panels + editing surface --- */
.cv-panel-card--edit { border-top: 3px solid var(--cv-edit); }
.cv-panel-header--static { cursor: default; }
.cv-panel-card--edit .cv-menu-item.title5 { border-left-color: var(--cv-edit) !important; }
.cv-edit-surface { /* opt-in: wrap an edit form group */
background: #fff; border: 1px dashed var(--cv-edit); border-radius: var(--radius-md); padding: var(--sp-4);
}
/* =======================================================================
Icon rail (desktop >=768). body.cv-rail = rail active, body.cv-rail-ok =
this menu can be a rail (only .cv-panel-card menus; not the player nav or
the anonymous login card). Set by applyRail() in default.js.
The rail is the column's own width; hovering/focusing #LeftMenu widens it
to --cv-menu-w as an overlay (the column keeps its 72px, so the page
doesn't reflow). Every rail-only rule is scoped to the collapsed state
via R = "#LeftMenu:not(.cv-peek)" so the peek shows the
normal full menu.
======================================================================= */
#cvRailBtn { display: none; }
@media (min-width: 768px) {
body.cv-rail-ok #cvRailBtn {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
width: 34px; height: 34px; margin-right: 8px; padding: 0;
border-radius: var(--radius-md); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
color: #fff; cursor: pointer; transition: background var(--t);
}
body.cv-rail-ok #cvRailBtn:hover, body.cv-rail-ok #cvRailBtn:focus { background: rgba(255,255,255,.24); outline: none; }
body.cv-rail-ok #cvRailBtn[aria-pressed="true"] { background: #fff; color: var(--cv-dark); }
/* Columns: rail + fluid main. Bootstrap's col-md-* widths lose on specificity. */
body.cv-rail .cv-app-row > .cv-col-left { flex: 0 0 var(--cv-rail-w); width: var(--cv-rail-w); max-width: var(--cv-rail-w); }
body.cv-rail .cv-app-row > .cv-col-main { flex: 1 1 0; width: auto; max-width: none; }
/* Fluid content: lift the 85%/1440px container cap (shell and navbar together so edges stay aligned). */
body.cv-rail .cv-shell, body.cv-rail .cv-navbar > .container { width: 98%; max-width: 1800px; }
body.cv-rail:not(.cv-rail-player) #LeftMenu { width: 100%; z-index: 1025; transition: width .18s ease, box-shadow .18s ease; }
body.cv-rail:not(.cv-rail-player) #LeftMenu.cv-peek {
width: var(--cv-menu-w); background: var(--c-surface-2); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
/* --- collapsed rail: icons only --- */
body.cv-rail:not(.cv-rail-player) #LeftMenu:not(.cv-peek) > :not(#accmenu):not(.cv-panel-card),
body.cv-rail:not(.cv-rail-player) #LeftMenu:not(.cv-peek) #accmenu > :not(.cv-panel-card) { display: none; }
body.cv-rail:not(.cv-rail-player) #LeftMenu:not(.cv-peek) .panel-collapse { display: block !important; height: auto !important; visibility: visible; }
body.cv-rail:not(.cv-rail-player) #LeftMenu:not(.cv-peek) .cv-panel-header { text-align: center; padding: 8px 0; }
body.cv-rail:not(.cv-rail-player) #LeftMenu:not(.cv-peek) .cv-panel-title { display: block; font-size: 0; }
body.cv-rail:not(.cv-rail-player) #LeftMenu:not(.cv-peek) .cv-panel-title .cv-icon { font-size: 16px; margin: 0; }
body.cv-rail:not(.cv-rail-player) #LeftMenu:not(.cv-peek) .cv-chevron { display: none; }
body.cv-rail:not(.cv-rail-player) #LeftMenu:not(.cv-peek) .cv-menu-item { padding: 6px 0 !important; min-height: 30px; text-align: center; font-size: 0; }
body.cv-rail:not(.cv-rail-player) #LeftMenu:not(.cv-peek) .cv-menu-img { float: none !important; display: block; margin: 0 auto !important; }
body.cv-rail:not(.cv-rail-player) #LeftMenu:not(.cv-peek) .cv-menu-link { position: absolute; inset: 0; font-size: 0; overflow: hidden; }
/* .cv-menu-item sets font-size:0 in the rail, which would collapse a Font Awesome ::before
glyph to nothing -- so FA menu icons need their size restored explicitly. */
body.cv-rail:not(.cv-rail-player) #LeftMenu:not(.cv-peek) .cv-menu-ico { display: block; margin: 0 auto !important; font-size: 15px; }
/* No room for a number in a 72px rail: show the unread badge as a dot. */
body.cv-rail:not(.cv-rail-player) #LeftMenu:not(.cv-peek) .cv-menu-badge {
position: absolute; top: 4px; right: 8px; margin: 0;
width: 8px; height: 8px; min-width: 0; padding: 0; border-radius: 50%; font-size: 0;
}
}
/* =======================================================================
"Start course" call-to-action (userLeftPanel.jspf) — the primary action of
a course space, so it is the one green, filled element in the left menu.
Expanded: full-width card with a play disc. Rail: a round green play button.
======================================================================= */
.cv-run-cta {
display: flex; align-items: center; gap: 12px; margin: 8px; padding: 10px 14px;
border-radius: var(--radius-lg); text-decoration: none !important; color: #fff !important;
background: linear-gradient(135deg, #15803d 0%, var(--c-success) 100%);
box-shadow: 0 2px 8px rgba(22,163,74,.35); transition: transform var(--t), box-shadow var(--t), filter var(--t);
}
.cv-run-cta:hover, .cv-run-cta:focus { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22,163,74,.45); filter: brightness(1.05); outline: none; }
.cv-run-cta-ico {
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.22); font-size: 14px;
}
.cv-run-cta-ico .fa { margin-left: 2px; } /* optical centre of the play triangle */
.cv-run-cta-txt { font-weight: 700; font-size: 14px; line-height: 1.2; }
@media (min-width: 768px) {
body.cv-rail:not(.cv-rail-player) #LeftMenu:not(.cv-peek) .cv-run-cta { margin: 8px auto; padding: 0; width: 44px; height: 44px; justify-content: center; border-radius: 50%; }
body.cv-rail:not(.cv-rail-player) #LeftMenu:not(.cv-peek) .cv-run-cta-ico { background: transparent; width: auto; height: auto; font-size: 17px; }
body.cv-rail:not(.cv-rail-player) #LeftMenu:not(.cv-peek) .cv-run-cta-txt { display: none; }
}
/* Rail: only cards made of .cv-menu-item rows can be shrunk to icons. Cards with custom bodies (programs
catalog tree + search form, etc.) keep just their header icon while collapsed; the peek shows them in full.
More specific than the "force every .panel-collapse open" rule above, so it wins. */
@media (min-width: 768px) {
body.cv-rail:not(.cv-rail-player) #LeftMenu:not(.cv-peek) .cv-panel-card:not(:has(.cv-menu-item)) .panel-collapse { display: none !important; }
}
/* =======================================================================
Use the space the icon rail frees up. These pages cap their own root width
(their max-width above); while body.cv-rail is on, lift the cap. List/grid
style pages get the widest ceiling; text-heavy ones (news, grades, users,
teleconf) stop earlier so line length stays readable. Tweak the tokens.
======================================================================= */
:root { --cv-wide-max: 1560px; --cv-wide-mid: 100%; --cv-wide-text: 1200px; } /* mid = fill the main column (grades, users, teleconf) */
@media (min-width: 768px) {
body.cv-rail .cv-dc, body.cv-rail .cv-air, body.cv-rail .cv-chat { max-width: var(--cv-wide-max); }
body.cv-rail .cv-grade, body.cv-rail .cv-lb, body.cv-rail #pMain .cv-tc { max-width: var(--cv-wide-mid); }
body.cv-rail .cv-news { max-width: var(--cv-wide-text); }
}
/* Course player, desktop: #LeftMenu is the single scroller (see the sticky left menu block), so pin the top
section (unit header + progress + prev/next buttons) to it. Otherwise auto-scrolling the list to the current
step carries the navigation buttons out of view and you have to scroll back up to press Next. */
@media (min-width: 768px) {
#LeftMenu .cv-run-top {
position: sticky; top: 0; z-index: 3; background: var(--c-surface);
border-radius: var(--radius-md) var(--radius-md) 0 0;
box-shadow: 0 3px 6px -3px rgba(15,23,42,.22);
}
}
/* Course player + rail toggle: the player menu is NOT shrunk (its prev/next buttons live in it), so "rail" for
the player only means wide mode — container widened (rule above), menu column fixed at its normal readable
width instead of a % of the wider page, and the player gets everything else. */
:root { --cv-run-menu-w: 300px; }
@media (min-width: 768px) {
body.cv-rail.cv-rail-player .cv-app-row > .cv-col-left { flex: 0 0 var(--cv-run-menu-w); width: var(--cv-run-menu-w); max-width: var(--cv-run-menu-w); }
}
/* =======================================================================
cv-hero — the shared page hero for user-facing (normal view) pages.
One uniform band at the top of the main column: a 20px title with its
icon and a one-line tagline on the LEFT, supporting content on the
RIGHT (numbered steps, facts, a progress bar, a call to action).
The course name is NOT repeated here -- it lives in the page title bar.
First users: lab.jsp (steps), course_unit.jsp (facts + continue).
Below 768px the two sides stack and the steps become a column.
Legacy aliases: lab.jsp's old cv-wsp-hero / cv-wsp-title / cv-wsp-tagline /
cv-wsp-steps markup is kept on every selector, so a half-deployed site
(new CSS + old lab.jsp, or the reverse) still renders the band correctly.
======================================================================= */
.cv-hero, .cv-wsp-hero {
position: relative;
overflow: hidden;
margin-bottom: 14px;
padding: 20px 24px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
box-shadow: var(--shadow-lg);
color: #fff;
}
.cv-hero::after, .cv-wsp-hero::after {
content: "";
position: absolute; right: -70px; top: -70px;
width: 240px; height: 240px; border-radius: 50%;
background: rgba(255,255,255,.06);
pointer-events: none;
}
.cv-hero-inner, .cv-wsp-hero-inner {
position: relative; z-index: 1;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 14px 28px;
}
.cv-hero-main, .cv-wsp-hero-main { flex: 1 1 260px; min-width: 0; }
/* mainss.css paints every h1 blue (#25629E), which is near-invisible here. */
.cv-hero-title, .cv-wsp-title {
display: flex; align-items: center; gap: 10px; margin: 0;
font-size: 20px; font-weight: 800; letter-spacing: 0; color: #fff !important;
}
.cv-hero-title .fa, .cv-wsp-title .fa { opacity: .85; font-size: 18px; }
.cv-hero-sub, .cv-wsp-tagline { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.92); }
/* right-hand side: steps, facts and actions all sit in the same row */
.cv-hero-aside {
flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
}
/* --- numbered "how this page works" steps --- */
.cv-hero-steps, .cv-wsp-steps {
flex: 0 1 auto;
display: flex; flex-wrap: wrap; gap: 8px 22px;
margin: 0; padding: 0; list-style: none; counter-reset: cvstep;
}
.cv-hero-steps li, .cv-wsp-steps li {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: rgba(255,255,255,.92);
}
.cv-hero-steps li::before, .cv-wsp-steps li::before {
counter-increment: cvstep; content: counter(cvstep);
flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
background: rgba(255,255,255,.18);
font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.cv-hero-steps .fa, .cv-wsp-steps .fa { opacity: .8; }
/* --- one fact: icon + number + label --- */
.cv-hero-fact {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; color: rgba(255,255,255,.92);
}
.cv-hero-fact .fa { opacity: .8; }
.cv-hero-fact strong { font-size: 15px; font-weight: 800; color: #fff; }
/* --- slim progress bar, for a fact that carries one --- */
.cv-hero-prog {
display: inline-block; width: 90px; height: 6px; border-radius: var(--radius-pill);
background: rgba(255,255,255,.22); overflow: hidden; vertical-align: middle;
}
.cv-hero-prog-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: #fff; }
/* --- actions: light on dark, so they read as part of the band --- */
.cv-hero-btn {
display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px;
border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-pill);
background: rgba(255,255,255,.14); color: #fff !important;
font-size: 13px; font-weight: 700; text-decoration: none !important;
transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.cv-hero-btn:hover, .cv-hero-btn:focus { background: rgba(255,255,255,.26); color: #fff !important; outline: none; }
.cv-hero-btn--cta {
background: #fff; border-color: #fff; color: var(--cv-dark) !important;
box-shadow: var(--shadow-md);
}
.cv-hero-btn--cta:hover, .cv-hero-btn--cta:focus {
background: #fff; color: var(--cv-dark) !important; box-shadow: var(--shadow-lg); transform: translateY(-1px);
}
.cv-hero-btn--done { background: rgba(255,255,255,.18); cursor: default; }
@media (max-width: 767px) {
.cv-hero, .cv-wsp-hero { padding: 16px 16px; }
.cv-hero-inner, .cv-wsp-hero-inner { flex-direction: column; align-items: flex-start; }
.cv-hero-aside { width: 100%; }
.cv-hero-steps, .cv-wsp-steps { flex-direction: column; gap: 7px; }
}
/* =======================================================================
Folder cards (cv-folder*) — digital content as a drill-down, on both
course_content.jsp (normal view) and mng_course_content.jsp (management).
At the root you see the categories and nothing else; opening one gives a
breadcrumb (.cv-subcrumb) plus its sub-folders and its files. Replaces the
category rail, which wrapped into three rows once a space had ~15 categories.
======================================================================= */
.cv-folders {
display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
gap: 12px; margin: 0 0 16px;
}
.cv-folder-wrap { position: relative; display: flex; }
.cv-folder {
flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0;
padding: 14px; background: var(--c-surface);
border: 1px solid var(--cv-panel-border); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); text-decoration: none !important;
transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.cv-folder:hover, .cv-folder:focus { border-color: #8fb8de; box-shadow: var(--shadow-md); transform: translateY(-1px); outline: none; }
.cv-folder-ico {
flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-md);
display: inline-flex; align-items: center; justify-content: center;
background: var(--c-brand-softer); color: var(--cv-mid); font-size: 19px;
}
.cv-folder-body { flex: 1 1 auto; min-width: 0; }
.cv-folder-name { display: block; font-size: 14.5px; font-weight: 700; color: var(--cv-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-folder-no { display: block; margin-top: 2px; font-size: 12px; color: var(--c-muted); }
.cv-folder.is-empty .cv-folder-ico { background: var(--c-surface-2); color: var(--c-muted); }
/* the "new category" card: an outline, so it reads as an action and not as a folder */
.cv-folder--new {
justify-content: center; border-style: dashed; box-shadow: none;
color: var(--cv-mid) !important; font-weight: 700;
}
.cv-folder--new:hover { background: var(--c-brand-softer); }
/* management actions, floating over the card (they cannot nest inside its ) */
.cv-folder-acts {
position: absolute; top: 6px; right: 6px; z-index: 2;
display: inline-flex; gap: 2px; padding: 2px;
background: rgba(255,255,255,.92); border-radius: var(--radius-pill);
opacity: 0; transition: opacity var(--t);
}
.cv-folder-wrap:hover .cv-folder-acts, .cv-folder-wrap:focus-within .cv-folder-acts { opacity: 1; }
.cv-folder-acts .cv-ui-iconbtn { width: 26px; height: 26px; border-color: transparent; font-size: 12px; }
/* the rename / new-category field takes a card's place */
.cv-folder-form { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: var(--c-surface); border: 1px dashed var(--cv-mid); border-radius: var(--radius-lg); }
.cv-folder-form .cv-ui-input { flex: 1 1 auto; width: auto; padding: 7px 10px; }
@media (hover: none) {
.cv-folder-acts { opacity: 1; } /* no hover on touch */
}
@media (max-width: 767px) {
.cv-folders { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cv-folder { padding: 11px; gap: 9px; }
.cv-folder-ico { width: 36px; height: 36px; font-size: 16px; }
}
/* =======================================================================
SUPERSEDED by the folder cards above (kept until every page is deployed).
Category bar (cv-catbar-*) — one line that replaces the wrapping rail of
category tabs on digital content, on both sides: course_content.jsp (normal
view) and mng_course_content.jsp (management). With 17 categories the rail
wrapped into three rows of folder chips and buried the current one.
The picker is a native /, so neither page needs new JS:
hides everything but the while closed, and every item in
the panel is a link that navigates away, which closes it.
======================================================================= */
.cv-catbar {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
margin: 0 0 14px; padding: 8px 10px;
background: var(--c-surface-2);
border: 1px solid var(--c-border-soft);
border-radius: var(--radius-md);
}
.cv-catbar-pick { position: relative; flex: 0 1 auto; min-width: 0; }
.cv-catbar-pick > summary {
display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px;
background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md);
color: var(--cv-dark); font-size: 14.5px; font-weight: 700; cursor: pointer; list-style: none;
transition: border-color var(--t), background var(--t);
}
.cv-catbar-pick > summary::-webkit-details-marker { display: none; }
.cv-catbar-pick > summary::marker { content: ""; }
.cv-catbar-pick > summary:hover { border-color: #8fb8de; background: var(--cv-item-hover); }
.cv-catbar-pick > summary .fa-folder-open { color: var(--cv-mid); }
.cv-catbar-pick > summary .fa-caret-down { margin-left: 2px; opacity: .6; font-size: 12px; }
.cv-catbar-pick[open] > summary { border-color: var(--cv-mid); box-shadow: 0 0 0 3px rgba(60,132,189,.15); }
.cv-catbar-pick[open] > summary .fa-caret-down { transform: rotate(180deg); }
/* the panel: every category at once, grouped, with its count */
.cv-catbar-panel {
position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
width: max(320px, 100%); max-width: 92vw; max-height: 60vh; overflow: auto;
padding: 10px; background: #fff;
border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.cv-catbar-group {
margin: 6px 4px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
color: var(--c-muted);
}
.cv-catbar-group:first-child { margin-top: 0; }
.cv-catbar-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px; }
.cv-catbar-item {
display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--radius-sm);
color: #334155 !important; font-size: 13.5px; text-decoration: none !important;
}
.cv-catbar-item:hover, .cv-catbar-item:focus { background: var(--cv-item-hover); color: var(--cv-dark) !important; outline: none; }
.cv-catbar-item .fa { color: var(--c-muted); font-size: 12.5px; }
.cv-catbar-item-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-catbar-item-no { flex: 0 0 auto; color: var(--c-muted); font-size: 12px; font-weight: 700; }
.cv-catbar-item.is-active { background: var(--c-brand-softer); color: var(--cv-dark) !important; font-weight: 700; }
.cv-catbar-item.is-active .fa { color: var(--cv-mid); }
/* actions on the CURRENT category, in a fixed place instead of inside the active tab */
.cv-catbar-acts { display: inline-flex; align-items: center; gap: 4px; }
.cv-catbar-acts .cv-ui-iconbtn { width: 30px; height: 30px; }
.cv-catbar-sep { width: 1px; height: 22px; background: var(--c-border-soft); }
.cv-catbar-end { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
/* the rename / new-category forms take the picker's place */
.cv-catbar .cv-res-newcat { flex: 1 1 260px; }
.cv-catbar .cv-res-newcat .cv-ui-input { flex: 1 1 auto; width: auto; }
@media (max-width: 767px) {
.cv-catbar { gap: 6px; }
.cv-catbar-pick { flex: 1 1 100%; }
.cv-catbar-pick > summary { width: 100%; }
.cv-catbar-end { margin-left: 0; }
.cv-catbar-end .cv-ui-btn span { display: none; }
}
/* =======================================================================
Digital content management (mng_course_resources.jspf — shared by
mng_course_content.jsp, mng_course_labexercises.jsp, mng_course_labnotes.jsp
and the dormant docs/notes/slides/prj wrappers) — cv-res-*.
The page sits on cv-ui-* (page, card, tabs/pills, table, toggle, buttons,
iconbtn, fields); only the resource row's own pieces live here.
The list MUST stay a real table: make_sortable('#ins_table','#upd_slides_frm',
[seq,showbox,presbox,annbox]) sorts tbody > tr and renumber_table() rewrites
every `.priority :input` name plus `.sequence` in the row.
======================================================================= */
.cv-res-table td { vertical-align: middle; }
.cv-res-table .sortHandle { white-space: nowrap; color: var(--c-muted); cursor: grab; }
.cv-res-table .sortHandle:active { cursor: grabbing; }
.cv-res-table .sortHandle .fa { margin-right: 4px; opacity: .7; }
.cv-res-table .sequence {
display: inline-flex; align-items: center; justify-content: center;
min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--radius-pill);
background: var(--c-surface-2); color: var(--c-muted); font-size: 12px; font-weight: 700;
}
/* the dragged clone: jQuery UI lifts the out of the table flow */
.cv-res-table tr.ui-sortable-helper { display: table; background: #fff; box-shadow: var(--shadow-md); }
.cv-res-title { font-weight: 600; color: #0f172a; }
.cv-res-meta { margin-top: 2px; font-size: 12px; color: var(--c-muted); }
/* per-row conversion/upload progress (ids are driven by doc_process_prog.js:
progress_div / progress_sp) */
.cv-res-prog { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--cv-mid); }
/* one flag = a checkbox with an icon label, so three of them fit in one cell */
.cv-res-col-flags { width: 1%; white-space: nowrap; }
.cv-res-col-act { width: 1%; white-space: nowrap; text-align: right; }
.cv-res-flag {
display: inline-flex; align-items: center; gap: 4px; margin: 0 6px 0 0; padding: 3px 7px;
border: 1px solid var(--c-border-soft); border-radius: var(--radius-pill);
background: #fff; font-weight: 400; cursor: pointer;
}
.cv-res-flag .fa { color: var(--c-muted); font-size: 12px; }
.cv-res-flag:has(input:checked) { background: var(--c-success-soft); border-color: #86efac; }
.cv-res-flag:has(input:checked) .fa { color: #166534; }
.cv-res-flag:has(input:focus-visible) { outline: 2px solid var(--c-brand); outline-offset: 1px; }
/* new sub-category: an inline field inside the pill rail */
.cv-res-newcat { display: inline-flex; align-items: center; gap: 6px; }
.cv-res-newcat .cv-ui-input { width: 200px; padding: 6px 10px; }
/* the bulk action select (a bootstrap-select / selectpicker, kept as-is) sits on the
left, under the row checkboxes it acts on; the buttons are pushed to the right */
.cv-res-bulk { margin-right: 12px; }
.cv-res-bulk .bootstrap-select { position: relative; min-width: 180px; }
/* Its menu has to FLOAT over the list. Rendered in flow it grew the card downwards and
pushed everything around when opened. It lives in the card's footer, so it opens
upward; .cv-ui-card clips with overflow:hidden (to round its corners), which would cut
the menu off, so the card holding it gets visible overflow and its head/footer carry
the rounded corners themselves. */
.cv-ui-card:has(.cv-res-bulk) { overflow: visible; }
.cv-ui-card:has(.cv-res-bulk) > .cv-ui-card-head { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.cv-ui-card:has(.cv-res-bulk) > form > .cv-ui-actions,
.cv-ui-card:has(.cv-res-bulk) > .cv-ui-actions { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.cv-res-bulk .bootstrap-select > .dropdown-menu {
position: absolute !important; top: auto !important; bottom: 100%; left: 0;
margin: 0 0 6px; z-index: 1000; min-width: 100%;
max-height: none !important; border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden;
}
.cv-res-bulk .bootstrap-select > .dropdown-menu > .inner { max-height: none !important; overflow: visible; }
.cv-res-bulk .bootstrap-select > .dropdown-menu li > a { padding: 7px 12px; font-size: 13.5px; }
.cv-res-actbtns { margin-left: auto; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; }
/* --- the wrapper page (mng_course_content.jsp): full width, category tabs with
management affordances on the active tab --- */
.cv-res-page { max-width: none; }
.cv-res-tabwrap { display: inline-flex; align-items: center; }
.cv-res-ord { width: 22px; height: 28px; border-radius: var(--radius-sm); color: var(--c-muted) !important; }
/* rename / delete, revealed inside the active tab. They are inside the tab's
: returning false from the inline handler also cancels the anchor's navigation. */
.cv-res-tabacts { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding-left: 7px; border-left: 1px solid rgba(15,23,42,.15); }
.cv-res-tabacts .fa { padding: 3px; border-radius: var(--radius-sm); font-size: 12px; opacity: .75; cursor: pointer; }
.cv-res-tabacts .fa:hover { opacity: 1; background: rgba(15,23,42,.08); }
.cv-res-tabacts .fa-trash-can:hover { background: var(--c-danger-soft); color: var(--c-danger); }
/* the rename / new-category forms sit in the tab rail */
.cv-ui-tabs .cv-res-newcat { margin: 0 0 -2px; padding: 4px 6px; }
/* --- the add/edit form ------------------------------------------------- */
/* The file/link/HTML switch keeps its legacy Bootstrap markup because
selectItemTypeRadios() swaps `active btn-warning` / `notActive btn-default`
on the spans; the id+class specificity here overrides Bootstrap's colours. */
.cv-res-typeswitch { margin-bottom: 12px; }
.cv-res-typeswitch #radioBtn { display: inline-flex; }
.cv-res-typeswitch #radioBtn .btn {
display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
background: #fff; border: 1px solid var(--cv-panel-border); border-radius: 0;
color: #475569; font-size: 13px; font-weight: 600; text-shadow: none; box-shadow: none;
}
.cv-res-typeswitch #radioBtn .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.cv-res-typeswitch #radioBtn .btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.cv-res-typeswitch #radioBtn .btn + .btn { border-left: 0; }
.cv-res-typeswitch #radioBtn .btn:hover { background: var(--cv-item-hover); color: var(--cv-dark); }
.cv-res-typeswitch #radioBtn .btn.btn-warning,
.cv-res-typeswitch #radioBtn .btn.active {
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
border-color: var(--cv-mid); color: #fff;
}
#file_div, #link_div, #templ_div { margin-bottom: 10px; }
#templ_div { margin-top: 4px; }
.cv-res-templ { margin-bottom: 8px; }
/* the three access flags read as rows, not a wall of checkboxes */
#showPresDiv, #showAnnDiv { margin-top: 10px; }
.cv-ui-card-body > .cv-ui-choice--row { width: 100%; }
.cv-ui-choice--row .cv-ui-hint { display: block; margin-top: 2px; }
/* a CHECKBOX in a choice row stays visible (unlike the radio-card pattern, where
.cv-ui-choice input is hidden and the card tint carries the state): three
independent access flags need their own visible tick. */
.cv-ui-choice .cv-ui-cb { position: static; opacity: 1; width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }
/* the form's action bar is its own strip under the last card */
.cv-res-formbar { margin-bottom: 16px; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-lg); }
@media (max-width: 767px) {
.cv-res-flag { margin: 0 4px 4px 0; }
.cv-res-bulk { margin-right: 0; width: 100%; }
.cv-res-actbtns { margin-left: 0; width: 100%; }
}
/* =======================================================================
Course structure management (mng_course_units.jsp / mng_course_units_conf.jsp)
— cv-lu-*. Sits on the shared cv-ui-* blocks (page, tabs, card, fields,
toggle, buttons, iconbtn, order, alerts); only the three list shapes that
cv-ui does not cover live here: the unit rows, the sortable item rows and
the per-user progress rows.
======================================================================= */
/* --- Unit rows (list of learning units) --------------------------------- */
.cv-lu-row {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
padding: 12px 16px; border-bottom: 1px solid var(--c-border-soft);
}
.cv-lu-row:last-child { border-bottom: 0; }
.cv-lu-row:hover { background: var(--c-brand-softer); }
.cv-lu-row.is-hidden .cv-lu-thumb, .cv-lu-row.is-hidden .cv-lu-main { opacity: .5; }
.cv-lu-no {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
min-width: 26px; height: 26px; padding: 0 7px; border-radius: var(--radius-pill);
background: var(--cv-mid); color: #fff; font-size: 12.5px; font-weight: 700;
}
.cv-lu-row.is-hidden .cv-lu-no { background: var(--c-muted); }
.cv-lu-thumb {
flex: 0 0 auto; width: 56px; height: 56px; object-fit: cover;
border: 1px solid var(--c-border-soft); border-radius: var(--radius-md); background: var(--c-surface-2);
}
.cv-lu-main { flex: 1 1 240px; min-width: 0; }
.cv-lu-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--cv-dark); }
.cv-lu-desc {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--c-muted);
}
.cv-lu-acts { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
/* --- Sortable learning items (jQuery UI sortable needs a real table: it is
wired by make_sortable('#li_table','#li_frm') and renumber_table(),
which depend on tbody > tr, .sortHandle, .priority :input, .sequence) -- */
.cv-lu-items { width: 100%; border-collapse: collapse; }
.cv-lu-items td { padding: 9px 10px; vertical-align: middle; border-bottom: 1px solid var(--c-border-soft); }
.cv-lu-items tr:last-child td { border-bottom: 0; }
.cv-lu-items tr:hover { background: var(--c-brand-softer); }
.cv-lu-items tr.lastvis { background: var(--cv-item-active); } /* the item just edited */
.cv-lu-items tr.is-section td { background: var(--c-surface-2); }
.cv-lu-items tr.is-section:hover td { background: #e8eef6; }
.cv-lu-items tr.is-hidden .cv-lu-item-title { opacity: .5; }
/* the dragged clone: jQuery UI lifts the out of the table flow */
.cv-lu-items tr.ui-sortable-helper { display: table; background: #fff; box-shadow: var(--shadow-md); }
.cv-lu-items .cv-lu-col-seq { width: 1%; }
.cv-lu-items .cv-lu-col-act { width: 1%; white-space: nowrap; text-align: right; }
.cv-lu-items .sequence {
display: inline-flex; align-items: center; justify-content: center;
min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--radius-pill);
background: var(--c-surface-2); color: var(--c-muted); font-size: 12px; font-weight: 700;
}
.cv-lu-items .sortHandle { width: 1%; text-align: center; color: var(--c-muted); cursor: grab; }
.cv-lu-items .sortHandle:active { cursor: grabbing; }
.cv-lu-item-title { font-weight: 600; color: #0f172a; }
.cv-lu-sec-title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; color: var(--cv-dark); }
.cv-lu-sec-title .fa { color: var(--cv-mid); }
.cv-lu-item-meta { font-size: 12px; line-height: 1.4; color: var(--c-muted); }
/* --- Per-user progress rows -------------------------------------------- */
.cv-lu-prog-row {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
padding: 10px 16px; border-bottom: 1px solid var(--c-border-soft);
}
.cv-lu-prog-row:last-child { border-bottom: 0; }
.cv-lu-prog-row:hover { background: var(--c-brand-softer); }
.cv-lu-prog-name { flex: 1 1 200px; min-width: 0; font-weight: 600; color: var(--cv-dark); }
.cv-lu-prog-bar { flex: 2 1 180px; height: 8px; border-radius: var(--radius-pill); background: #e2e8f0; overflow: hidden; }
.cv-lu-prog-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--cv-mid), var(--c-success)); }
.cv-lu-prog-pct { flex: 0 0 44px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--c-muted); }
/* --- The unit editor: media column + fields ---------------------------- */
.cv-lu-edit { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 18px; align-items: start; }
.cv-lu-edit-media { display: flex; flex-direction: column; gap: 10px; }
.cv-lu-edit-media .cv-ui-thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.cv-lu-edit-main { min-width: 0; }
@media (max-width: 767px) {
.cv-lu-edit { grid-template-columns: 1fr; }
.cv-lu-edit-media { flex-direction: row; flex-wrap: wrap; align-items: center; }
.cv-lu-edit-media .cv-ui-thumb { width: 96px; }
.cv-lu-row { gap: 8px; }
.cv-lu-thumb { width: 44px; height: 44px; }
}
/* =======================================================================
cv-subcrumb / cv-sub — the shared header for INNER pages (level 2).
Where a service's main page opens with the dark cv-hero band, an inner
page (one unit, one workspace, one resource, one room) opens with two
lighter pieces, so the level is readable at a glance and the content
starts higher up:
1. .cv-subcrumb — thin strip: back to the parent page, "N / total",
and previous/next siblings, always in the same three positions.
2. .cv-sub — white identity card: media, number + title,
description, chips, and the page's primary action.
The gradient stays unique to cv-hero == "you are at the top of a service".
First user: course_unit_view.jsp.
======================================================================= */
.cv-subcrumb {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
margin-bottom: 10px; padding: 7px 12px;
background: var(--c-surface-2);
border: 1px solid var(--c-border-soft);
border-radius: var(--radius-md);
font-size: 13px;
}
.cv-subcrumb-back {
display: inline-flex; align-items: center; gap: 7px;
color: var(--cv-dark) !important; font-weight: 700; text-decoration: none !important;
}
.cv-subcrumb-back:hover, .cv-subcrumb-back:focus { color: var(--cv-mid) !important; outline: none; }
.cv-subcrumb-back .fa { font-size: 12px; opacity: .75; }
.cv-subcrumb-pos { flex: 1 1 auto; min-width: 0; color: var(--c-muted); }
.cv-subcrumb-pos strong { color: var(--cv-dark); font-weight: 700; }
.cv-subcrumb-nav { flex: 0 0 auto; display: inline-flex; gap: 6px; }
.cv-subnav-btn {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-pill);
color: var(--cv-dark) !important; font-size: 12.5px; font-weight: 600; text-decoration: none !important;
transition: background var(--t), border-color var(--t);
}
.cv-subnav-btn:hover, .cv-subnav-btn:focus { background: var(--cv-item-hover); border-color: #8fb8de; outline: none; }
.cv-subnav-btn.is-off { opacity: .4; pointer-events: none; }
/* --- the identity card ------------------------------------------------- */
.cv-sub {
display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 18px;
margin-bottom: 14px; padding: 16px 18px;
background: var(--c-surface);
border: 1px solid var(--cv-panel-border);
border-left: 4px solid var(--cv-mid);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
/* no overflow:hidden -- the share dropdown has to escape the card */
}
.cv-sub-media { flex: 0 0 120px; max-width: 120px; }
.cv-sub-media img {
display: block; width: 100%; height: auto;
border: 1px solid var(--c-border-soft); border-radius: var(--radius-md);
background: var(--c-surface-2);
}
.cv-sub-body { flex: 1 1 320px; min-width: 0; }
.cv-sub-top { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px 14px; }
/* mainss.css paints every h1 blue-ish; this is the one place we want that colour anyway. */
.cv-sub-title {
flex: 1 1 240px; min-width: 0; margin: 0;
display: flex; align-items: center; gap: 10px;
font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--cv-dark) !important;
}
.cv-sub-num {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
min-width: 26px; height: 26px; padding: 0 7px; border-radius: var(--radius-pill);
background: var(--cv-mid); color: #fff; font-size: 13px; font-weight: 700;
}
.cv-sub-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
.cv-sub-desc { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: #46586e; }
.cv-sub-desc :first-child { margin-top: 0; }
.cv-sub-desc :last-child { margin-bottom: 0; }
.cv-sub-foot { margin-top: 10px; }
/* --- share menu: one button instead of a row of coloured icons --------- */
.cv-share-menu { min-width: 210px; padding: 6px; }
.cv-share-menu > li > a, .cv-share-menu > li > button {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px;
background: none; border: 0; border-radius: var(--radius-sm);
color: #46586e; font-size: 13px; text-align: left; cursor: pointer;
}
.cv-share-menu > li > a:hover, .cv-share-menu > li > a:focus,
.cv-share-menu > li > button:hover, .cv-share-menu > li > button:focus {
background: var(--cv-item-hover); color: var(--cv-dark); outline: none;
}
.cv-share-menu .fa, .cv-share-menu .fab { width: 16px; text-align: center; opacity: .8; }
@media (max-width: 767px) {
.cv-subcrumb { gap: 6px 10px; }
.cv-subcrumb-pos { flex: 1 1 100%; order: 3; }
.cv-subnav-btn span { display: none; } /* icon-only, like the mode switch */
.cv-sub { padding: 14px; }
.cv-sub-media { flex: 0 0 76px; max-width: 76px; }
.cv-sub-title { font-size: 16.5px; }
}
/* =======================================================================
cv-ui — shared building blocks for management (mng_*) pages
First users: mng_course.jsp, mng_course_users.jsp. Deliberately free of the
legacy classes (paleBlock, title4, tabmenu, box1, .button, formDefault ...).
Pieces: page shell, tabs/pills, card, buttons, form fields, toggle switch,
choice cards, table, badge/avatar, service grid, staff rows, progress overlay.
======================================================================= */
.cv-ui-page { max-width: 1120px; margin: 0 auto; padding: 4px 6px 20px; }
@media (min-width: 768px) { body.cv-rail .cv-ui-page { max-width: 1500px; } }
.cv-ui-hidden { display: none !important; }
/* --- Page title row (management pages): the service name + its page-level action --- */
.cv-ui-pagehead { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 2px 2px 14px; }
.cv-ui-pagetitle {
flex: 1 1 auto; min-width: 0; margin: 0; display: flex; align-items: center; gap: 10px;
font-size: 20px; font-weight: 800; color: var(--cv-dark) !important;
}
.cv-ui-pagetitle .fa { color: var(--cv-mid); font-size: 18px; }
/* --- Tabs (section level) and pills (sub level) --- */
.cv-ui-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 16px; border-bottom: 2px solid var(--cv-panel-border); }
.cv-ui-tab {
display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; margin-bottom: -2px;
color: #475569; font-weight: 600; text-decoration: none !important;
border-bottom: 3px solid transparent; border-radius: var(--radius-md) var(--radius-md) 0 0;
transition: background var(--t), color var(--t);
}
.cv-ui-tab:hover, .cv-ui-tab:focus { background: var(--cv-item-hover); color: var(--cv-dark); outline: none; }
.cv-ui-tab.is-active { color: var(--cv-dark); background: var(--c-brand-softer); border-bottom-color: var(--cv-mid); }
.cv-ui-tab .fa { opacity: .8; }
@media (max-width: 767px) {
.cv-ui-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.cv-ui-tab { padding: 10px 12px; white-space: nowrap; }
.cv-ui-tab:not(.is-active) span { display: none; } /* icon-only when inactive, like the mode switch */
}
.cv-ui-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.cv-ui-pill {
display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-pill);
background: #eef2f7; color: #475569; font-size: 13px; font-weight: 600; text-decoration: none !important;
transition: background var(--t), color var(--t);
}
.cv-ui-pill:hover, .cv-ui-pill:focus { background: var(--cv-item-hover); color: var(--cv-dark); outline: none; }
.cv-ui-pill.is-active { background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%); color: #fff; }
/* --- Card --- */
.cv-ui-card { background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 16px; overflow: hidden; }
.cv-ui-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 16px; background: var(--c-surface-2); border-bottom: 1px solid var(--cv-panel-border); }
.cv-ui-card-head h2 { flex: 1 1 auto; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--cv-dark); }
.cv-ui-card-head h2 .fa { color: var(--cv-mid); }
.cv-ui-card-body { padding: 16px; }
/* Collapsible card: + */
.cv-ui-fold > summary { cursor: pointer; list-style: none; outline: none; }
.cv-ui-fold > summary::-webkit-details-marker { display: none; }
.cv-ui-fold > summary::marker { content: ""; }
.cv-ui-fold > summary:hover { background: var(--cv-item-hover); }
.cv-ui-fold > summary:focus-visible { box-shadow: inset 0 0 0 2px var(--cv-mid); }
.cv-ui-fold:not([open]) > summary { border-bottom: 0; }
.cv-ui-fold-hint { color: var(--c-muted); font-size: 13px; }
.cv-ui-fold[open] .cv-ui-fold-hint { display: none; }
.cv-ui-fold-caret { color: var(--cv-mid); transition: transform .15s; }
.cv-ui-fold[open] .cv-ui-fold-caret { transform: rotate(180deg); }
.cv-ui-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; background: var(--c-surface-2); border-top: 1px solid var(--c-border-soft); }
.cv-ui-empty { padding: 28px 16px; text-align: center; color: var(--c-muted); }
.cv-ui-empty .fa { display: block; font-size: 28px; margin-bottom: 8px; opacity: .5; }
/* --- Buttons --- */
.cv-ui-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px;
border: 1px solid transparent; border-radius: var(--radius-md); font: inherit; font-weight: 600; font-size: 14px; line-height: 1.2;
cursor: pointer; text-decoration: none !important; transition: filter var(--t), box-shadow var(--t), background var(--t);
}
.cv-ui-btn--sm { padding: 6px 12px; font-size: 13px; }
.cv-ui-btn--primary { background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%); color: #fff !important; }
.cv-ui-btn--primary:hover, .cv-ui-btn--primary:focus { filter: brightness(1.12); box-shadow: var(--shadow-md); outline: none; }
.cv-ui-btn--ghost { background: #fff; color: var(--cv-dark) !important; border-color: var(--cv-panel-border); }
.cv-ui-btn--ghost:hover, .cv-ui-btn--ghost:focus { background: var(--cv-item-hover); outline: none; }
.cv-ui-btn--danger { background: var(--c-danger); color: #fff !important; }
.cv-ui-btn--danger:hover, .cv-ui-btn--danger:focus { filter: brightness(1.1); outline: none; }
.cv-ui-btn--danger-ghost { background: #fff; color: var(--c-danger) !important; border-color: #fecaca; }
.cv-ui-btn--danger-ghost:hover { background: var(--c-danger-soft); }
.cv-ui-iconbtn {
display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); background: #fff; color: #475569 !important; cursor: pointer; text-decoration: none !important;
}
.cv-ui-iconbtn:hover, .cv-ui-iconbtn:focus { background: var(--cv-item-hover); outline: none; }
.cv-ui-iconbtn--danger { color: var(--c-danger) !important; }
.cv-ui-iconbtn--danger:hover { background: var(--c-danger-soft); }
.cv-ui-iconbtn.is-disabled { opacity: .35; pointer-events: none; }
/* --- Form fields --- */
.cv-ui-field { margin-bottom: 18px; }
.cv-ui-label { display: block; margin-bottom: 6px; font-weight: 700; color: var(--cv-dark); }
.cv-ui-hint { margin-top: 4px; font-size: 12.5px; color: var(--c-muted); }
.cv-ui-hint.is-error { color: var(--c-danger); font-weight: 600; }
.cv-ui-input, .cv-ui-textarea, .cv-ui-select {
width: 100%; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: var(--radius-md); background: #fff; color: #0f172a; font: inherit;
transition: border-color var(--t), box-shadow var(--t);
}
.cv-ui-select { width: auto; max-width: 100%; }
.cv-ui-input:focus, .cv-ui-textarea:focus, .cv-ui-select:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(60,132,189,.18); outline: none; }
.cv-ui-select[data-v="0"] { background-color: #dcfce7; border-color: #86efac; } /* per-service access: everyone */
.cv-ui-select[data-v="1"] { background-color: #fee2e2; border-color: #fca5a5; } /* registered only */
.cv-ui-kv { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 8px 16px; margin: 0 0 18px; }
.cv-ui-kv dt { color: var(--c-muted); font-weight: 600; }
.cv-ui-kv dd { margin: 0; font-weight: 600; color: #0f172a; }
@media (max-width: 600px) { .cv-ui-kv { grid-template-columns: 1fr; gap: 0; } .cv-ui-kv dd { margin-bottom: 8px; } }
.cv-ui-cb { width: 18px; height: 18px; margin: 0; accent-color: var(--cv-mid); cursor: pointer; }
.cv-ui-cb--danger { accent-color: var(--c-danger); }
.cv-ui-cb--ok { accent-color: var(--c-success); }
.cv-ui-thumb { width: 120px; height: 120px; object-fit: cover; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); background: var(--c-surface-2); }
.cv-ui-scroll { max-height: 260px; overflow: auto; }
.cv-ui-two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .cv-ui-two { grid-template-columns: 1fr; } }
/* --- Toggle switch: a real checkbox (form-submittable, keyboard + screen-reader friendly) drawn as a switch --- */
.cv-ui-toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-weight: 600; color: #334155; }
.cv-ui-toggle input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.cv-ui-toggle-track { position: relative; flex: 0 0 auto; width: 44px; height: 24px; border-radius: var(--radius-pill); background: #cbd5e1; transition: background var(--t); }
.cv-ui-toggle-track::after {
content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.35); transition: transform var(--t);
}
.cv-ui-toggle input:checked + .cv-ui-toggle-track { background: var(--c-success); }
.cv-ui-toggle input:checked + .cv-ui-toggle-track::after { transform: translateX(20px); }
.cv-ui-toggle input:focus-visible + .cv-ui-toggle-track { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.cv-ui-toggle input:disabled + .cv-ui-toggle-track { opacity: .5; }
.cv-ui-toggle--warn input:checked + .cv-ui-toggle-track { background: var(--cv-edit); } /* privileged flags (admin) */
@media (prefers-reduced-motion: reduce) { .cv-ui-toggle-track, .cv-ui-toggle-track::after { transition: none; } }
/* --- Choice cards (radio groups) --- */
.cv-ui-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.cv-ui-choice {
position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; font-weight: 500;
background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); cursor: pointer;
transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.cv-ui-choice:hover { border-color: #8fb8de; }
.cv-ui-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.cv-ui-choice .fa { flex: 0 0 auto; width: 20px; margin-top: 2px; text-align: center; color: var(--cv-mid); }
.cv-ui-choice:has(input:checked) { background: var(--c-brand-softer); border-color: var(--cv-mid); box-shadow: 0 0 0 2px rgba(45,90,142,.15); }
.cv-ui-choice:has(input:focus-visible) { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.cv-ui-choice--row { padding: 9px 12px; }
.cv-ui-custom { margin-top: 12px; padding: 12px 14px; background: var(--c-surface-2); border: 1px dashed var(--cv-panel-border); border-radius: var(--radius-md); }
.cv-ui-custom-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--c-border-soft); }
.cv-ui-custom-row:last-child { border-bottom: 0; }
/* --- Table --- */
.cv-ui-tablewrap { overflow-x: auto; }
.cv-ui-table { width: 100%; border-collapse: collapse; }
.cv-ui-table th {
padding: 10px 12px; text-align: left; white-space: nowrap; background: var(--c-surface-2); color: var(--c-muted);
font-size: 12px; font-weight: 700; letter-spacing: .04em; border-bottom: 1px solid var(--cv-panel-border);
}
.cv-ui-table td { padding: 10px 12px; vertical-align: middle; border-bottom: 1px solid var(--c-border-soft); }
.cv-ui-table tbody tr:hover { background: var(--c-brand-softer); }
.cv-ui-table .cv-ui-col-check { width: 1%; text-align: center; white-space: nowrap; }
.cv-ui-table th a { color: inherit; margin-left: 4px; }
.cv-ui-sub { display: block; font-size: 12.5px; font-weight: 700; color: var(--c-success); }
.cv-ui-tablefoot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--c-border-soft); }
.cv-ui-range { color: var(--c-muted); font-size: 13px; }
/* --- Badge / avatar --- */
.cv-ui-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radius-pill); background: rgba(15,23,42,.08); color: #334155; font-size: 12px; font-weight: 700; }
.cv-ui-badge--ok { background: var(--c-success-soft); color: #166534; }
.cv-ui-badge--warn { background: var(--c-warning-soft); color: #92400e; }
.cv-ui-badge--danger { background: var(--c-danger-soft); color: #b91c1c; }
.cv-ui-pill .cv-ui-badge { background: rgba(255,255,255,.25); color: inherit; }
.cv-ui-pill:not(.is-active) .cv-ui-badge { background: rgba(15,23,42,.1); }
.cv-ui-avatar {
display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
background: linear-gradient(135deg, var(--cv-mid) 0%, var(--c-brand) 100%); color: #fff; font-weight: 700;
}
/* --- Services: one card per service with an on/off switch --- */
.cv-ui-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; padding: 16px; }
.cv-ui-svc {
display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 16px; font-weight: 400; cursor: pointer;
background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md);
transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.cv-ui-svc:hover { box-shadow: var(--shadow-md); }
.cv-ui-svc.is-on { background: var(--c-success-soft); border-color: #86efac; }
/* Service glyph (one per lesson_services.service_id, mng_course.jsp): large enough to tell
the services apart at a glance, and it carries the on/off state with the card. */
.cv-ui-svc-ico {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 58px; height: 58px; border-radius: var(--radius-md);
background: var(--c-surface-2); color: var(--cv-mid); font-size: 27px;
transition: background var(--t), color var(--t);
}
.cv-ui-svc.is-on .cv-ui-svc-ico { background: #fff; color: #166534; }
.cv-ui-svc.is-master .cv-ui-svc-ico { background: var(--c-brand-softer); color: var(--cv-dark); }
.cv-ui-svc.is-master.is-on .cv-ui-svc-ico { background: #fff; color: #166534; }
.cv-ui-svc-main { flex: 1 1 auto; min-width: 0; }
.cv-ui-svc-name { display: block; font-size: 15px; font-weight: 700; color: var(--cv-dark); }
.cv-ui-svc-desc { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--c-muted); }
/* Category groups (lesson_services.category) */
.cv-ui-svc-group + .cv-ui-svc-group { border-top: 1px solid var(--cv-panel-border); }
.cv-ui-svc-group-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 0; }
/* As a (collapsible group) it needs its own bottom padding and a caret column. */
summary.cv-ui-svc-group-head { padding: 12px 16px; }
.cv-ui-svc-group[open] > summary.cv-ui-svc-group-head { padding-bottom: 0; }
summary.cv-ui-svc-group-head .cv-ui-fold-caret { margin-left: 2px; }
.cv-ui-svc-group-ico {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
border-radius: var(--radius-md); background: var(--c-surface-2); color: var(--cv-mid); font-size: 15px;
}
.cv-ui-svc-group-txt { flex: 1 1 auto; min-width: 0; }
.cv-ui-svc-group-title { display: block; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--cv-dark); }
.cv-ui-svc-group-desc { display: block; font-size: 12.5px; color: var(--c-muted); }
.cv-ui-svc-group .cv-ui-svc-grid { padding-top: 12px; }
.cv-ui-svc.is-master { border-width: 2px; border-color: var(--cv-mid); }
.cv-ui-svc.is-master.is-on { border-color: #22c55e; }
.cv-ui-svc.is-gated { opacity: .6; }
.cv-ui-svc.is-gated.is-on { background: #fff; border-color: var(--cv-panel-border); }
.cv-ui-svc-note { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: #92400e; }
/* --- Staff rows --- */
.cv-ui-list { margin: 0; padding: 0; list-style: none; }
.cv-ui-staff-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 16px; border-bottom: 1px solid var(--c-border-soft); }
.cv-ui-staff-row:last-child { border-bottom: 0; }
/* Fixed, not 1fr: the settings groups then start at the same x in every row, whatever the
name's length or whether the row carries the short-CV chip. */
.cv-ui-staff-id { flex: 0 0 190px; min-width: 0; }
.cv-ui-staff-del { margin-left: auto; }
.cv-ui-staff-id strong { display: block; color: var(--cv-dark); }
.cv-ui-staff-id span { color: var(--c-muted); font-size: 13px; }
.cv-ui-staff-flags { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; }
/* Staff row (mng_course.jsp): three different kinds of setting, kept visually apart —
the ROLE on the space's page (one choice), WHAT IS PUBLIC next to the name, and the
RIGHTS the person has. They used to be one undifferentiated line of switches. */
.cv-ui-staff-cfg { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: flex-start; gap: 12px 24px; }
.cv-ui-staff-grp { display: flex; flex-direction: column; gap: 6px; }
/* Same column widths row to row (the segmented control is a fixed size anyway; the public
chips are not, because the short CV only exists for an instructor). */
.cv-ui-staff-grp--role { min-width: 318px; }
.cv-ui-staff-grp--pub { min-width: 250px; }
/* Too narrow for one line: the settings drop to a line of their own INSTEAD of the delete
button wrapping away from its row on its own. */
@media (max-width: 1250px) {
.cv-ui-staff-cfg { flex: 1 1 100%; order: 3; }
.cv-ui-staff-del { order: 2; }
}
@media (max-width: 600px) {
.cv-ui-staff-grp--role, .cv-ui-staff-grp--pub { min-width: 0; }
.cv-ui-staff-cfg { gap: 12px 16px; }
}
.cv-ui-staff-grp-lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--c-muted); }
.cv-ui-staff-pubs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Segmented single choice: a radio group drawn as one control (reusable). */
.cv-ui-seg { display: inline-flex; padding: 2px; background: var(--c-surface-2); border: 1px solid var(--cv-panel-border); border-radius: var(--radius-pill); }
.cv-ui-seg-opt { margin: 0; }
.cv-ui-seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.cv-ui-seg-opt > span {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill);
font-size: 13px; font-weight: 600; color: #475569; white-space: nowrap; cursor: pointer;
transition: background var(--t), color var(--t);
}
.cv-ui-seg-opt:hover > span { color: var(--cv-dark); }
.cv-ui-seg-opt input:checked + span { background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%); color: #fff; box-shadow: var(--shadow-sm); }
.cv-ui-seg-opt input:focus-visible + span { outline: 2px solid var(--c-brand); outline-offset: 2px; }
/* Chip toggle: a checkbox drawn as a chip — on = green, like the service cards. */
.cv-ui-chiptog {
display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px;
background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-pill);
font-size: 13px; font-weight: 600; color: #475569; cursor: pointer;
transition: background var(--t), border-color var(--t), color var(--t);
}
.cv-ui-chiptog input { position: absolute; opacity: 0; width: 0; height: 0; }
.cv-ui-chiptog .fa { opacity: .6; }
.cv-ui-chiptog:has(input:checked) { background: var(--c-success-soft); border-color: #86efac; color: #166534; }
.cv-ui-chiptog:has(input:checked) .fa { opacity: 1; }
.cv-ui-chiptog:has(input:focus-visible) { outline: 2px solid var(--c-brand); outline-offset: 2px; }
/* Set, but with no effect yet: the person has no role, so nothing of theirs is on the page. */
.cv-ui-chiptog.is-muted { color: var(--c-muted); }
.cv-ui-chiptog.is-muted:has(input:checked) { background: var(--c-surface-2); border-color: var(--cv-panel-border); color: var(--c-muted); }
.cv-ui-chiptog.is-muted:has(input:checked) .fa { opacity: .6; }
.cv-ui-order { display: flex; flex-direction: column; gap: 2px; }
.cv-ui-order .cv-ui-iconbtn { width: 26px; height: 20px; border-radius: 4px; font-size: 11px; }
/* --- Danger zone --- */
.cv-ui-danger { padding: 14px 16px; background: var(--c-danger-soft); border: 1px solid #fecaca; border-radius: var(--radius-md); }
.cv-ui-danger p { margin: 0 0 10px; color: #991b1b; font-weight: 600; }
/* --- Upload progress overlay (ids/structure are driven by scripts/upload.js: showProgress/updateProgress) --- */
.cv-ui-progress {
position: fixed !important; top: 0 !important; left: 0 !important; right: 0; bottom: 0; visibility: hidden;
display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.5); z-index: 3000;
}
.cv-ui-progress-card { width: min(92vw, 460px); padding: 24px 28px; text-align: center; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.cv-ui-progress-card p { margin: 6px 0 0; color: var(--c-muted); }
.cv-ui-progress #progressBarText { margin-top: 12px; font-weight: 700; color: var(--cv-dark); }
.cv-ui-progress #progressBarBox { width: 350px; max-width: 100%; height: 12px; margin: 8px auto 0; overflow: hidden; text-align: left; background: #e5ebf3; border-radius: var(--radius-pill); }
.cv-ui-progress #progressBarBoxContent { width: 0; height: 100%; background: var(--c-success); border-radius: var(--radius-pill); }
/* =======================================================================
Profile page (user_mp.jsp) — cv-pf-* and Settings page (profile.jsp) — cv-set-*
Both sit on the shared cv-ui-* blocks (cards, fields, toggles, buttons).
======================================================================= */
/* --- Profile header: cover band + overlapping avatar --- */
.cv-pf-hero { overflow: visible; }
.cv-pf-cover {
height: 120px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 60%, var(--c-brand) 100%);
position: relative; overflow: hidden;
}
.cv-pf-cover::after { /* soft dotted texture */
content: ""; position: absolute; inset: 0; opacity: .18;
background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 18px 18px;
}
.cv-pf-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 20px; padding: 0 24px 18px; }
.cv-pf-avatar {
flex: 0 0 auto; width: 132px; height: 132px; margin-top: -66px; position: relative; z-index: 1;
border-radius: 50%; border: 5px solid #fff; background: #fff; object-fit: cover; box-shadow: var(--shadow-md);
}
.cv-pf-id { flex: 1 1 260px; min-width: 0; padding-top: 12px; }
.cv-pf-name { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--cv-dark); }
.cv-pf-headline { margin-top: 4px; font-size: 15px; color: #475569; }
.cv-pf-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cv-pf-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.cv-pf-btn-following { background: var(--c-success-soft); color: #166534 !important; border-color: #86efac; }
.cv-pf-btn-following .cv-pf-hover { display: none; }
.cv-pf-btn-following:hover { background: var(--c-danger-soft); color: #b91c1c !important; border-color: #fecaca; }
.cv-pf-btn-following:hover .cv-pf-rest { display: none; }
.cv-pf-btn-following:hover .cv-pf-hover { display: inline; }
@media (max-width: 600px) {
.cv-pf-head { justify-content: center; text-align: center; padding: 0 16px 16px; }
.cv-pf-meta, .cv-pf-actions { justify-content: center; }
.cv-pf-avatar { width: 112px; height: 112px; margin-top: -56px; }
}
/* --- Stats strip --- */
.cv-pf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); border-top: 1px solid var(--c-border-soft); }
.cv-pf-stat { padding: 12px 16px; text-align: center; border-right: 1px solid var(--c-border-soft); }
.cv-pf-stat:last-child { border-right: 0; }
.cv-pf-stat strong { display: block; font-size: 20px; font-weight: 800; color: var(--cv-dark); }
.cv-pf-stat span { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--c-muted); }
/* --- Two-column body --- */
.cv-pf-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 991px) { .cv-pf-grid { grid-template-columns: 1fr; } }
.cv-pf-about { font-size: 14px; line-height: 1.6; color: #334155; max-height: 240px; overflow: hidden; position: relative; }
.cv-pf-about.is-open { max-height: none; }
.cv-pf-about:not(.is-open).is-long::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(transparent, #fff); }
.cv-pf-more { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--c-brand); font-weight: 700; cursor: pointer; }
.cv-pf-social { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-pf-social a {
display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
background: var(--c-surface-2); border: 1px solid var(--cv-panel-border); color: var(--cv-mid); font-size: 16px; text-decoration: none;
transition: background var(--t), color var(--t), transform var(--t);
}
.cv-pf-social a:hover, .cv-pf-social a:focus { background: var(--cv-mid); color: #fff; transform: translateY(-2px); outline: none; }
.cv-pf-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.cv-pf-badges a { display: flex; align-items: center; justify-content: center; padding: 8px; background: var(--c-surface-2); border: 1px solid var(--c-border-soft); border-radius: var(--radius-md); transition: box-shadow var(--t), transform var(--t); }
.cv-pf-badges a:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cv-pf-badges img { max-width: 100%; max-height: 72px; }
/* --- Courses --- */
.cv-pf-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 16px; }
.cv-pf-course { display: flex; gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); transition: box-shadow var(--t), border-color var(--t); }
.cv-pf-course:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; }
.cv-pf-course img { flex: 0 0 auto; width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-md); background: var(--c-surface-2); }
.cv-pf-course-body { flex: 1 1 auto; min-width: 0; }
.cv-pf-course-title { display: block; font-weight: 700; color: var(--cv-dark); text-decoration: none; }
.cv-pf-course-title:hover { color: var(--c-brand); }
.cv-pf-course-desc { margin: 4px 0 6px; font-size: 12.5px; line-height: 1.4; color: var(--c-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cv-ui-badge--info { background: var(--c-info-soft); color: #075985; }
/* --- Board timeline --- */
.cv-pf-board { list-style: none; margin: 0; padding: 16px 16px 16px 60px; position: relative; }
.cv-pf-board::before { content: ""; position: absolute; left: 35px; top: 16px; bottom: 16px; width: 2px; background: var(--cv-panel-border); }
.cv-pf-post { position: relative; margin-bottom: 14px; }
.cv-pf-post:last-child { margin-bottom: 0; }
.cv-pf-post-av { position: absolute; left: -44px; top: 4px; width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; object-fit: cover; background: #fff; box-shadow: var(--shadow-sm); }
.cv-pf-post-card { background: var(--c-surface-2); border: 1px solid var(--c-border-soft); border-radius: var(--radius-md); padding: 10px 14px; }
.cv-pf-post-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 12.5px; color: var(--c-muted); }
.cv-pf-post-body { color: #1e293b; line-height: 1.5; word-wrap: break-word; }
.cv-pf-post-body p:last-child { margin-bottom: 0; }
.cv-pf-composer { background: #fff; border-color: var(--cv-panel-border); }
.cv-pf-composer textarea { min-height: 70px; resize: vertical; margin-bottom: 8px; }
/* --- Settings (profile.jsp): sticky section nav + stacked section cards --- */
.cv-set { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
.cv-set-nav { position: sticky; top: var(--cv-sticky-top); display: flex; flex-direction: column; gap: 2px; padding: 8px; background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.cv-set-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); color: #475569; font-weight: 600; text-decoration: none; transition: background var(--t), color var(--t); }
.cv-set-nav a .fa { width: 18px; text-align: center; opacity: .75; }
.cv-set-nav a:hover { background: var(--cv-item-hover); color: var(--cv-dark); }
.cv-set-nav a.is-active { background: var(--c-brand-softer); color: var(--cv-dark); box-shadow: inset 3px 0 0 var(--cv-mid); }
.cv-set-nav a.cv-set-nav-danger { color: var(--c-danger); }
.cv-set-sec { scroll-margin-top: calc(var(--cv-sticky-top) + 8px); }
.cv-set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.cv-set-grid .cv-ui-field--full { grid-column: 1 / -1; }
@media (max-width: 767px) {
.cv-set { grid-template-columns: 1fr; }
.cv-set-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 6px; }
.cv-set-nav a { white-space: nowrap; }
.cv-set-nav a.is-active { box-shadow: inset 0 -3px 0 var(--cv-mid); }
.cv-set-grid { grid-template-columns: 1fr; }
}
.cv-set-avatar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-bottom: 18px; }
.cv-set-avatar img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--cv-panel-border), var(--shadow-sm); background: var(--c-surface-2); }
.cv-set-avatar-ctl { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cv-set-file { position: relative; overflow: hidden; }
.cv-set-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cv-ui-inputicon { position: relative; }
.cv-ui-inputicon > .fa, .cv-ui-inputicon > .fab { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-muted); pointer-events: none; }
.cv-ui-inputicon > .cv-ui-input { padding-left: 36px; }
.cv-ui-inputicon > .cv-set-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: none; color: var(--c-muted); cursor: pointer; }
.cv-ui-inputicon:has(.cv-set-eye) > .cv-ui-input { padding-right: 40px; }
.cv-set-match { margin-top: 4px; font-size: 12.5px; font-weight: 600; }
.cv-set-match.is-ok { color: var(--c-success); }
.cv-set-match.is-bad { color: var(--c-danger); }
.cv-set-opt { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--c-border-soft); }
.cv-set-opt:last-child { border-bottom: 0; }
.cv-set-opt-txt strong { display: block; color: var(--cv-dark); }
.cv-set-opt-txt span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--c-muted); }
.cv-set-opt .cv-ui-toggle { flex: 0 0 auto; margin-top: 2px; }
.cv-set-subhead { margin: 18px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--c-muted); }
.cv-set-subhead:first-child { margin-top: 0; }
.cv-ui-alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius-md); border: 1px solid; }
.cv-ui-alert .fa { margin-top: 3px; }
.cv-ui-alert--ok { background: var(--c-success-soft); border-color: #86efac; color: #166534; }
.cv-ui-alert--error { background: var(--c-danger-soft); border-color: #fecaca; color: #991b1b; }
.cv-ui-alert--warn { background: var(--c-warning-soft); border-color: #fde68a; color: #92400e; }
.cv-ui-alert--info { background: var(--c-info-soft); border-color: #bae6fd; color: #075985; }
/* --- cv-ui: centred modal (document-link picker in mng_site_news.jsp; shown via MM_showHideLayers,
which toggles style.visibility, so the layout must not depend on display) --- */
.cv-ui-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.5); }
.cv-ui-modal-card { width: min(92vw, 460px); max-height: 86vh; overflow: auto; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.cv-ui-modal-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--c-surface-2); border-bottom: 1px solid var(--cv-panel-border); }
.cv-ui-modal-head h2 { flex: 1 1 auto; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--cv-dark); }
.cv-ui-modal-head h2 .fa { color: var(--cv-mid); }
/* --- cv-ui: announcement rows (mng_site_news.jsp list) --- */
.cv-ui-newsrow { padding: 14px 16px; border-bottom: 1px solid var(--c-border-soft); }
.cv-ui-newsrow:last-child { border-bottom: 0; }
.cv-ui-newsrow-head { display: flex; align-items: flex-start; gap: 12px; }
.cv-ui-newsrow-head h3 { flex: 1 1 auto; margin: 0; font-size: 16px; font-weight: 700; color: var(--cv-dark); }
.cv-ui-newsrow-act { display: flex; gap: 6px; flex: 0 0 auto; }
.cv-ui-newsrow .cv-news-meta { margin: 6px 0 8px; }
.cv-ui-newsrow-body { color: #334155; line-height: 1.6; word-wrap: break-word; }
.cv-ui-newsrow-body img { max-width: 100%; height: auto; }
.cv-ui-newsrow-body p:last-child { margin-bottom: 0; }
/* The announcement FEEDS (site_news.jsp, course_news.jsp) use the full main column; a single
announcement (announcement.jsp) keeps .cv-news at a readable 920px. Overrides the max-width
in both normal and rail (wide) mode. */
.cv-news--wide { max-width: none; }
@media (min-width: 768px) { body.cv-rail .cv-news--wide { max-width: none; } }
/* =======================================================================
Personal messages (messages.jsp) — cv-msg-*
Mail-client presentation: avatar rows, unread accent, read/reply dialog,
compose + tips two-column.
======================================================================= */
.cv-msg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 16px; background: var(--c-surface-2); border-bottom: 1px solid var(--cv-panel-border); }
.cv-msg-selall { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; }
.cv-msg-toolbar .cv-ui-btn { margin-left: auto; }
.cv-msg-list { list-style: none; margin: 0; padding: 0; }
.cv-msg-row { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--c-border-soft); border-left: 3px solid transparent; transition: background var(--t); }
.cv-msg-row:last-child { border-bottom: 0; }
.cv-msg-row:hover { background: var(--c-brand-softer); }
.cv-msg-row.is-unread { background: #f4f9ff; border-left-color: var(--c-brand); }
.cv-msg-open { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 0; color: inherit; text-decoration: none !important; }
.cv-msg-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--c-surface-2); border: 1px solid var(--cv-panel-border); }
.cv-msg-main { flex: 1 1 auto; min-width: 0; }
.cv-msg-line { display: flex; align-items: baseline; gap: 10px; }
.cv-msg-who { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--cv-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-msg-date { flex: 0 0 auto; font-size: 12px; color: var(--c-muted); white-space: nowrap; }
.cv-msg-subject { display: block; margin-top: 1px; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-msg-row.is-unread .cv-msg-subject { font-weight: 700; color: var(--cv-dark); }
.cv-msg-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--c-brand); vertical-align: middle; }
.cv-msg-user { display: block; font-size: 12px; color: var(--c-muted); }
@media (max-width: 600px) { .cv-msg-user { display: none; } }
/* Read / reply dialog */
.cv-msg-modal .modal-header { background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%); color: #fff; border: 0; border-radius: 0; }
.cv-msg-modal .modal-header .close { color: #fff; opacity: .85; text-shadow: none; }
.cv-msg-modal .modal-title { display: flex; align-items: center; gap: 8px; font-weight: 700; }
/* overflow:hidden clips the header to the card: Bootstrap rounds .modal-content by 6px, so a
10px header radius left white corners showing through. */
.cv-msg-modal .modal-content { border: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.cv-msg-modal .modal-footer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cv-msg-from { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--c-border-soft); }
.cv-msg-from-id { flex: 1 1 auto; min-width: 0; }
.cv-msg-from-id strong { display: block; color: var(--cv-dark); }
.cv-msg-from-id span { font-size: 12.5px; color: var(--c-muted); }
.cv-msg-body { color: #1e293b; line-height: 1.65; word-wrap: break-word; }
.cv-msg-body img { max-width: 100%; height: auto; }
#reply { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--cv-panel-border); }
/* Compose */
.cv-msg-compose { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .cv-msg-compose { grid-template-columns: 1fr; } }
.cv-msg-tips { list-style: none; margin: 0; padding: 0; }
.cv-msg-tips li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--c-border-soft); font-size: 13px; line-height: 1.5; color: #475569; }
.cv-msg-tips li:last-child { border-bottom: 0; }
.cv-msg-tips .fa { flex: 0 0 auto; width: 18px; margin-top: 2px; text-align: center; color: var(--cv-mid); }
/* =======================================================================
Community directory (directory.jsp) — cv-dir-*
Two modes from one page: member cards (standalone) and compact rows when
the page is embedded as a user chooser (body gets .cv-dir--picker).
======================================================================= */
.cv-dir-search { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cv-dir-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.cv-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; padding: 16px; }
.cv-dir-card {
display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 14px 12px;
background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.cv-dir-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #8fb8de; }
.cv-dir-av { display: block; }
.cv-dir-av img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--cv-panel-border); background: var(--c-surface-2); }
.cv-dir-name { margin: 10px 0 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.cv-dir-name a { color: var(--cv-dark); text-decoration: none; }
.cv-dir-name a:hover { color: var(--c-brand); }
.cv-dir-user { font-size: 12.5px; color: var(--c-muted); }
.cv-dir-headline { margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: #475569; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cv-dir-quote {
position: relative; margin-top: 10px; padding: 8px 10px 8px 26px; text-align: left; font-size: 12.5px; line-height: 1.45; color: #475569;
background: var(--c-surface-2); border-radius: var(--radius-md); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.cv-dir-quote .fa { position: absolute; left: 9px; top: 9px; color: var(--cv-panel-border); }
.cv-dir-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: auto; padding-top: 12px; }
.cv-dir-act { display: flex; gap: 6px; }
.cv-dir-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--c-border-soft); }
.cv-dir-row:last-child { border-bottom: 0; }
.cv-dir-row:hover { background: var(--c-brand-softer); }
.cv-dir--picker .cv-ui-page, .cv-dir--picker { padding: 0; }
/* =======================================================================
Personal drive (user_drive.jsp) — cv-dr-*
Folder rail + file tiles, replacing the legacy fm.css file-manager blocks.
======================================================================= */
.cv-dr { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 767px) { .cv-dr { grid-template-columns: 1fr; } }
.cv-dr-folders { list-style: none; margin: 0; padding: 0; }
.cv-dr-folder { display: flex; align-items: center; gap: 6px; padding: 2px 10px; border-bottom: 1px solid var(--c-border-soft); }
.cv-dr-folder:last-child { border-bottom: 0; }
.cv-dr-folder.is-current { background: var(--c-brand-softer); box-shadow: inset 3px 0 0 var(--cv-mid); }
.cv-dr-folder-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 9px 2px; color: #334155; text-decoration: none !important; }
.cv-dr-folder-link .fa { color: var(--cv-mid); }
.cv-dr-folder-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-dr-folder.is-current .cv-dr-folder-link { color: var(--cv-dark); font-weight: 700; }
.cv-dr-folder-act { display: flex; gap: 4px; flex: 0 0 auto; }
.cv-dr-rename { display: flex; align-items: center; gap: 6px; width: 100%; margin: 6px 0; }
.cv-dr-add { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-dr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 16px; background: var(--c-surface-2); border-bottom: 1px solid var(--cv-panel-border); }
.cv-dr-count { font-size: 12px; font-weight: 700; color: var(--c-brand); }
.cv-dr-count:not(:empty)::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 5px; }
.cv-dr-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.cv-dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 16px; }
.cv-dr-file {
position: relative; background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); overflow: hidden;
transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.cv-dr-file:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cv-dr-file.is-picked { border-color: var(--cv-mid); box-shadow: 0 0 0 2px rgba(45,90,142,.18); }
.cv-dr-file.is-buffered { border-color: var(--cv-edit); background: var(--cv-edit-soft); }
.cv-dr-pick { position: absolute; top: 6px; left: 6px; z-index: 1; margin: 0; padding: 4px; background: rgba(255,255,255,.9); border-radius: var(--radius-sm); cursor: pointer; }
.cv-dr-open { display: block; color: inherit; text-decoration: none !important; }
.cv-dr-thumb { display: flex; align-items: center; justify-content: center; height: 108px; background: var(--c-surface-2); overflow: hidden; }
.cv-dr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cv-dr-thumb--icon .fa { font-size: 34px; color: #9fb3c8; }
.cv-dr-name { display: block; padding: 8px 10px 0; font-size: 13px; font-weight: 600; color: var(--cv-dark); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.cv-dr-date { display: block; padding: 2px 10px 10px; font-size: 11.5px; color: var(--c-muted); }
.cv-dr-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; padding: 22px; text-align: center; color: var(--c-muted); background: var(--c-surface-2); border: 2px dashed var(--cv-panel-border); border-radius: var(--radius-md); }
.cv-dr-drop .fa { font-size: 26px; color: var(--cv-mid); }
.cv-dr-drop.drop { background: var(--c-brand-softer); border-color: var(--cv-mid); color: var(--cv-dark); }
/* Drive preview dialog: image / video / pdf inline, icon card for everything else. */
.cv-dr-preview { padding: 0; background: #0f172a; min-height: 200px; display: flex; align-items: center; justify-content: center; }
.cv-dr-pv-img { max-width: 100%; max-height: 70vh; display: block; }
.cv-dr-pv-video { width: 100%; max-height: 70vh; background: #000; }
.cv-dr-pv-frame { width: 100%; height: 70vh; border: 0; background: #fff; }
.cv-dr-pv-none { padding: 40px 20px; text-align: center; color: #cbd5e1; }
.cv-dr-pv-none .fa { font-size: 54px; opacity: .7; }
.cv-dr-pv-none p { margin: 12px 0 0; font-weight: 600; word-break: break-word; }
/* =======================================================================
Certificates & badges (certificates.jsp) — cv-cert-*
One achievement card per training program: artwork, status, criteria
progress, and a collapsible breakdown per course.
======================================================================= */
.cv-cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; padding: 16px; }
.cv-cert { display: flex; flex-direction: column; padding: 16px; background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--t), border-color var(--t); }
.cv-cert:hover { box-shadow: var(--shadow-md); }
.cv-cert.is-earned { border-color: #86efac; background: linear-gradient(180deg, var(--c-success-soft) 0%, #fff 90px); }
.cv-cert-head { display: flex; align-items: flex-start; gap: 14px; }
.cv-cert-art { position: relative; flex: 0 0 auto; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; background: var(--c-surface-2); border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); overflow: hidden; }
.cv-cert-art img { max-width: 100%; max-height: 100%; }
.cv-cert-art .fa { font-size: 32px; color: #9fb3c8; }
.cv-cert.is-earned .cv-cert-art { background: #fff; border-color: #86efac; }
.cv-cert.is-earned .cv-cert-art .fa { color: var(--c-success); }
.cv-cert-tick { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-success); color: #fff; font-size: 11px; border: 2px solid #fff; }
.cv-cert-id { flex: 1 1 auto; min-width: 0; }
.cv-cert-id h3 { margin: 0 0 2px; font-size: 16px; font-weight: 700; color: var(--cv-dark); line-height: 1.3; }
.cv-cert-code { margin-bottom: 6px; font-size: 12px; color: var(--c-muted); }
.cv-cert-prog { margin-top: 14px; }
.cv-cert-bar { height: 8px; border-radius: var(--radius-pill); background: #e5ebf3; overflow: hidden; }
.cv-cert-bar > span { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--cv-mid), var(--c-brand)); transition: width var(--t); }
.cv-cert.is-earned .cv-cert-bar > span { background: var(--c-success); }
.cv-cert-bar--sm { height: 5px; margin: 6px 0 8px; }
.cv-cert-prog-lbl { display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: var(--c-muted); }
.cv-cert-prog-lbl strong { color: var(--cv-dark); }
.cv-cert-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cv-cert-detail { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--cv-panel-border); }
.cv-cert-detail h4 { margin: 10px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--c-muted); }
.cv-cert-detail h4:first-child { margin-top: 0; }
.cv-cert-txt { font-size: 13px; line-height: 1.55; color: #475569; }
.cv-cert-course { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-border-soft); }
.cv-cert-course-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cv-cert-course-head a { font-weight: 700; color: var(--cv-dark); text-decoration: none; }
.cv-cert-course-head a:hover { color: var(--c-brand); }
.cv-cert-crit { list-style: none; margin: 0; padding: 0; }
.cv-cert-crit li { display: flex; gap: 8px; padding: 4px 0; font-size: 13px; color: #475569; }
.cv-cert-crit li .fa { flex: 0 0 auto; margin-top: 3px; font-size: 12px; }
.cv-cert-crit li.is-ok .fa { color: var(--c-success); }
.cv-cert-crit li.is-pending .fa { color: #cbd5e1; }
/* Cards keep their own height (the grid would otherwise stretch a whole row to the tallest card). */
.cv-cert-grid { align-items: start; }
/* The criteria block is a hidden source in the card and is shown inside the dialog. */
#crit_area .cv-cert-detail { display: block !important; margin: 0; padding: 0; border-top: 0; }
/* =======================================================================
Home / my activity spaces (myCourses.jsp) — cv-home-*
Greeting strip, waiting-for-me counters, two-column body: course cards on
the left, deadlines / programme filter / timeline on the right.
======================================================================= */
.cv-home-hero {
display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 14px; padding: 16px 20px;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 65%, var(--c-brand) 100%);
border-radius: var(--radius-lg); color: #fff; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.cv-home-hero::after { content: ""; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 18px 18px; pointer-events: none; }
.cv-home-hello { flex: 1 1 260px; position: relative; z-index: 1; }
.cv-home-hello h1 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; }
.cv-home-date { margin-top: 4px; font-size: 13px; opacity: .85; }
.cv-home-quick { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; }
.cv-home-quick .cv-ui-btn--ghost { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: #fff !important; }
.cv-home-quick .cv-ui-btn--ghost:hover { background: rgba(255,255,255,.26); }
.cv-home-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
@media (max-width: 767px) { .cv-home-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cv-home-kpi {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px;
background: #fff; border: 1px solid var(--cv-panel-border); border-left: 3px solid var(--cv-panel-border);
border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none !important;
transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.cv-home-kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; }
.cv-home-kpi > .fa { font-size: 15px; color: var(--cv-mid); }
.cv-home-kpi strong { font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--cv-dark); }
.cv-home-kpi span { font-size: 12px; line-height: 1.3; color: var(--c-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cv-home-kpi.is-hot { border-left-color: var(--c-danger); }
.cv-home-kpi.is-hot strong, .cv-home-kpi.is-hot > .fa { color: var(--c-danger); }
.cv-home-kpi.is-warn { border-left-color: var(--cv-edit); }
.cv-home-kpi.is-warn strong, .cv-home-kpi.is-warn > .fa { color: var(--cv-edit); }
.cv-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 991px) { .cv-home-grid { grid-template-columns: 1fr; } }
.cv-home-tabs { margin: 0; padding: 0 16px; border-bottom: 1px solid var(--cv-panel-border); }
.cv-home-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; padding: 16px; }
.cv-home-course { display: flex; gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); transition: box-shadow var(--t), border-color var(--t); }
.cv-home-course:hover { box-shadow: var(--shadow-md); border-color: #8fb8de; }
.cv-home-course-img { flex: 0 0 auto; }
.cv-home-course-img img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-md); background: var(--c-surface-2); }
.cv-home-course-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cv-home-course-top { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.cv-home-code { background: var(--c-brand-softer); color: var(--cv-dark); }
.cv-home-course-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.cv-home-course-title a { color: var(--cv-dark); text-decoration: none; }
.cv-home-course-title a:hover { color: var(--c-brand); }
.cv-home-course-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--c-muted); }
.cv-home-course-meta .fa { margin-right: 4px; color: var(--cv-mid); }
.cv-home-course-desc { margin: 6px 0 8px; font-size: 12.5px; line-height: 1.45; color: #475569; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cv-home-course-act { display: flex; align-items: center; gap: 6px; margin-top: auto; }
.cv-home-svc {
position: relative; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
background: var(--c-surface-2); border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); color: var(--cv-mid); cursor: pointer;
transition: background var(--t), color var(--t);
}
.cv-home-svc:hover { background: var(--cv-mid); color: #fff; }
.cv-home-svc.is-new { border-color: var(--cv-edit); }
.cv-home-dot { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--cv-edit); color: #fff; font-size: 10px; font-weight: 700; }
.cv-home-enter { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--c-brand); text-decoration: none !important; white-space: nowrap; }
.cv-home-prev { margin: 0 16px 16px; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); overflow: hidden; }
.cv-home-prev-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--c-surface-2); color: var(--cv-dark); font-weight: 700; text-decoration: none !important; }
.cv-home-prev-head .cv-chevron { margin-left: auto; transition: transform var(--t); }
.cv-home-prev-head[aria-expanded="true"] .cv-chevron { transform: rotate(180deg); }
.cv-home-prev-row { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--c-border-soft); }
.cv-home-prev-row:last-child { border-bottom: 0; }
.cv-home-prev-row img { width: 46px; height: 46px; object-fit: cover; border-radius: var(--radius-sm); background: var(--c-surface-2); }
.cv-home-prev-row > .fa { color: var(--c-muted); }
.cv-home-dl a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 16px; border-bottom: 1px solid var(--c-border-soft); color: inherit; text-decoration: none !important; }
.cv-home-dl:last-child a { border-bottom: 0; }
.cv-home-dl a:hover { background: var(--c-brand-softer); }
.cv-home-dl-date { font-size: 12px; font-weight: 700; color: var(--cv-edit); }
.cv-home-dl-title { flex: 1 1 100%; font-size: 13px; color: var(--cv-dark); }
.cv-home-progs { display: flex; flex-direction: column; gap: 4px; }
.cv-home-prog { display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 10px; border-radius: var(--radius-md); font-weight: 500; cursor: pointer; transition: background var(--t); }
.cv-home-prog:hover { background: var(--cv-item-hover); }
.cv-home-prog.is-on { background: var(--c-brand-softer); }
.cv-home-prog input { margin: 0; accent-color: var(--cv-mid); }
.cv-home-prog > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.cv-home-tl-head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.cv-home-tl-head .cv-chevron { margin-left: auto; transition: transform var(--t); }
.cv-home-tl-head[aria-expanded="true"] .cv-chevron { transform: rotate(180deg); }
.cv-home-tl { max-height: 320px; overflow: auto; }
.cv-home-feedback a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; text-decoration: none !important; }
.cv-home-feedback a:hover { background: var(--c-brand-softer); }
.cv-home-feedback img { width: 40px; height: 40px; border-radius: 50%; }
.cv-home-feedback span { flex: 1 1 auto; min-width: 0; }
.cv-home-feedback strong { display: block; font-size: 13.5px; color: var(--cv-dark); line-height: 1.3; }
.cv-home-feedback small { color: var(--c-muted); }
/* --- Home v2: slim counter strip replaces the four big KPI tiles ---------- */
.cv-home-kpis, .cv-home-kpi { display: none !important; }
.cv-home-bar {
display: flex; flex-wrap: wrap; align-items: stretch; margin-bottom: 16px;
background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.cv-home-stat {
flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px;
border-right: 1px solid var(--c-border-soft); color: #475569; text-decoration: none !important; transition: background var(--t);
}
.cv-home-stat:last-child { border-right: 0; }
.cv-home-stat:hover { background: var(--c-brand-softer); color: var(--cv-dark); }
.cv-home-stat .fa { flex: 0 0 auto; font-size: 14px; color: var(--cv-mid); }
.cv-home-stat strong { font-size: 16px; font-weight: 800; color: var(--cv-dark); }
.cv-home-stat span { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-home-stat.is-hot .fa, .cv-home-stat.is-hot strong { color: var(--c-danger); }
.cv-home-stat.is-warn .fa, .cv-home-stat.is-warn strong { color: var(--cv-edit); }
@media (max-width: 600px) { .cv-home-stat { flex: 1 1 50%; border-bottom: 1px solid var(--c-border-soft); } .cv-home-stat span { display: none; } }
/* --- Home v2: the cover fills the card height, so no dead space under it --- */
.cv-home-course { padding: 0; overflow: hidden; }
.cv-home-course-img { align-self: stretch; width: 104px; }
.cv-home-course-img img { width: 104px; height: 100%; min-height: 150px; border-radius: 0; }
.cv-home-course-body { padding: 12px 14px 12px 0; }
@media (max-width: 480px) {
.cv-home-course { flex-direction: column; }
.cv-home-course-img, .cv-home-course-img img { width: 100%; }
.cv-home-course-img img { height: 120px; min-height: 0; }
.cv-home-course-body { padding: 12px 14px; }
}
/* Activity-space artwork. The panel still fills the card height, but the image is contained inside it:
cover cut wide logos in half (the text became unreadable). A light panel + inner frame keeps images
with a lot of white from bleeding into the card. Sharpness comes from ditem_type=5 (the uploaded
image) instead of ditem_type=6, which is only an 80px thumbnail. */
.cv-home-course-img {
position: relative; display: flex; align-items: center; justify-content: center; padding: 3px; overflow: hidden;
background: var(--c-surface-2); border-right: 1px solid var(--cv-panel-border);
}
/* Two real ![]()
elements: a blurred, over-scaled copy fills the panel, the sharp one sits on top
uncropped. Done with elements rather than a CSS variable so nothing depends on inline styles. */
.cv-home-course-img .cv-home-course-bg {
position: absolute; top: 50%; left: 50%; width: 130%; height: 130%; transform: translate(-50%,-50%);
object-fit: cover; z-index: 0; filter: blur(16px) saturate(1.3); opacity: .95; border: 0; border-radius: 0; box-shadow: none; pointer-events: none;
}
.cv-home-course-img .cv-home-course-fg {
position: relative; z-index: 1;
object-fit: contain; width: auto; max-width: 98%; height: auto; max-height: 94%; min-height: 0;
background: #fff; border: 2px solid #fff; border-radius: var(--radius-sm); box-shadow: 0 2px 10px rgba(15,23,42,.28);
}
@media (max-width: 480px) { .cv-home-course-img { border-right: 0; border-bottom: 1px solid var(--cv-panel-border); } }
/* Catalogue artwork (programs.jsp): same two-layer treatment as the home cards — a blurred copy fills
the 130x90 box, the sharp one is contained on top so square logos are not cropped. */
.cv-catalog-thumb {
position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
width: 130px; height: 90px; background: var(--c-surface-2);
border: 1px solid var(--c-border-soft); border-radius: var(--radius-sm);
}
.cv-catalog-thumb .cv-catalog-thumb-bg {
position: absolute; top: 50%; left: 50%; width: 130%; height: 130%; transform: translate(-50%,-50%);
object-fit: cover; z-index: 0; filter: blur(16px) saturate(1.3); opacity: .95; border: 0; border-radius: 0; pointer-events: none;
}
.cv-catalog-thumb .cv-catalog-thumb-fg {
position: relative; z-index: 1; width: auto; height: auto; max-width: 97%; max-height: 93%;
object-fit: contain; background: #fff; border: 2px solid #fff; border-radius: var(--radius-sm); box-shadow: 0 2px 8px rgba(15,23,42,.25);
}
@media (max-width: 600px) {
.cv-catalog-thumb { width: 100%; height: 130px; }
.cv-catalog-thumb .cv-catalog-thumb-fg { max-height: 92%; }
}
/* =======================================================================
Course FAQ (course_faq.jsp) — cv-faq-*
Category tabs, filterable accordion, helpful/not-helpful voting.
======================================================================= */
.cv-faq-tabs { margin: 0; padding: 0 16px; border-bottom: 1px solid var(--cv-panel-border); }
.cv-faq-search { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 4px; }
.cv-faq-list { padding: 10px 16px 16px; }
.cv-faq-item { border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); margin-bottom: 8px; background: #fff; overflow: hidden; transition: box-shadow var(--t), border-color var(--t); }
.cv-faq-item:last-child { margin-bottom: 0; }
.cv-faq-item:hover { box-shadow: var(--shadow-sm); }
.cv-faq-item.is-open { border-color: var(--cv-mid); box-shadow: var(--shadow-sm); }
.cv-faq-q { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; color: var(--cv-dark); font-weight: 700; text-decoration: none !important; cursor: pointer; }
.cv-faq-q:hover { background: var(--c-brand-softer); }
.cv-faq-item.is-open .cv-faq-q { background: var(--c-brand-softer); }
.cv-faq-caret { flex: 0 0 auto; margin-top: 3px; font-size: 12px; color: var(--cv-mid); transition: transform var(--t); }
.cv-faq-item.is-open .cv-faq-caret { transform: rotate(90deg); }
.cv-faq-q-txt { flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.cv-faq-score { flex: 0 0 auto; display: flex; gap: 4px; }
.cv-faq-a { padding: 4px 14px 12px 38px; }
.cv-faq-a-label { display: inline-block; margin-bottom: 6px; padding: 2px 10px; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.cv-faq-a-body { color: #334155; line-height: 1.65; word-wrap: break-word; }
.cv-faq-a-body img { max-width: 100%; height: auto; }
.cv-faq-a-body p:last-child { margin-bottom: 0; }
.cv-faq-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; background: var(--c-surface-2); border-top: 1px solid var(--c-border-soft); font-size: 13px; color: var(--c-muted); }
.cv-faq-vote {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill);
background: #fff; border: 1px solid var(--cv-panel-border); color: #475569 !important; font-size: 12.5px; font-weight: 600; text-decoration: none !important;
transition: background var(--t), border-color var(--t), color var(--t);
}
.cv-faq-vote:hover { border-color: #8fb8de; background: var(--c-brand-softer); }
.cv-faq-vote.is-yes { background: var(--c-success-soft); border-color: #86efac; color: #166534 !important; }
.cv-faq-vote.is-no { background: var(--c-danger-soft); border-color: #fecaca; color: #b91c1c !important; }
@media (max-width: 600px) {
.cv-faq-a { padding-left: 14px; }
.cv-faq-score { display: none; }
}
/* =======================================================================
Assessments list (course_assess.jsp) — cv-as-*
Replaces the old .ac-* table-ish list: one row per assessment, its state
carried by the icon disc, a badge and the call to action.
======================================================================= */
.cv-as-list { padding: 12px 16px 16px; }
.cv-as {
display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 8px;
background: #fff; border: 1px solid var(--cv-panel-border); border-left: 4px solid var(--cv-panel-border);
border-radius: var(--radius-md); color: inherit; text-decoration: none !important;
transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.cv-as:last-child { margin-bottom: 0; }
a.cv-as:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); color: inherit; }
.cv-as-ico { flex: 0 0 auto; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-surface-2); color: var(--c-muted); font-size: 16px; }
.cv-as-body { flex: 1 1 auto; min-width: 0; }
.cv-as-title { display: block; font-weight: 700; color: var(--cv-dark); line-height: 1.35; word-wrap: break-word; }
.cv-as-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--c-muted); }
.cv-as-dates .fa { margin-right: 4px; opacity: .8; }
.cv-as-arrow { opacity: .6; }
.cv-as-state { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.cv-as-go { font-size: 12.5px; font-weight: 700; color: var(--c-brand); white-space: nowrap; }
.cv-as.is-active { border-left-color: var(--c-success); }
.cv-as.is-active .cv-as-ico { background: var(--c-success-soft); color: var(--c-success); }
.cv-as.is-waiting { border-left-color: var(--cv-edit); background: #fffdf7; }
.cv-as.is-waiting .cv-as-ico { background: var(--c-warning-soft); color: var(--cv-edit); }
.cv-as.is-expired { border-left-color: #cbd5e1; background: var(--c-surface-2); }
.cv-as.is-expired .cv-as-title { color: #475569; }
@media (max-width: 600px) {
.cv-as { flex-wrap: wrap; gap: 10px; }
.cv-as-body { flex: 1 1 100%; order: 2; }
.cv-as-state { flex-direction: row; align-items: center; order: 3; flex: 1 1 100%; justify-content: space-between; }
}
/* =======================================================================
Workspaces (lab.jsp) — cv-wsp-*
A workspace is a private space inside a course where a team collaborates,
so the list page leads with that idea rather than with a bare panel list.
Two modes share one loop in lab.jsp:
lab_id == 0 list — hero + .cv-wsp-grid of .cv-wsp-card
lab_id > 0 detail — .cv-wsp-head + tool grid + deliverables + work plan
Replaces the legacy `colpos` layout, where the bootstrap column class
(col-md-12/18/6/5) was computed in Java from the number of enabled services.
The tool grid is a real auto-fill grid and needs no such arithmetic.
======================================================================= */
/* ---- Hero: see the shared cv-hero block (lab.jsp uses it) ---------------- */
/* ---- List: one card per workspace -------------------------------------- */
.cv-wsp-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 12px;
}
.cv-wsp-card {
display: flex; flex-direction: column;
padding: 14px 16px;
background: var(--c-surface);
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--t), transform var(--t);
}
.cv-wsp-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cv-wsp-card-top { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 8px; }
.cv-wsp-card-ico {
flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff; font-size: 17px;
}
.cv-wsp-card-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--cv-dark); }
.cv-wsp-card-desc {
margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--c-muted);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* The four facts that used to sit behind an "info" collapse (#dp). */
.cv-wsp-meta {
display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px 12px;
margin: 0 0 10px; padding: 0; list-style: none;
font-size: 12.5px; color: #475569;
}
.cv-wsp-meta li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cv-wsp-meta .fa { width: 14px; text-align: center; color: var(--cv-mid); opacity: .8; }
.cv-wsp-meta li.is-warn { color: var(--c-warning); font-weight: 600; }
.cv-wsp-meta li.is-warn .fa { color: var(--c-warning); }
.cv-wsp-meta a { color: var(--c-brand); }
.cv-wsp-card-status {
margin-bottom: 10px; padding: 6px 10px;
border-radius: var(--radius); border-left: 3px solid var(--cv-panel-border);
background: var(--c-surface-2);
font-size: 12px; color: #475569;
}
.cv-wsp-card-status.is-ok { background: var(--c-success-soft); border-left-color: var(--c-success); color: #166534; }
.cv-wsp-card-status.is-warn { background: var(--c-warning-soft); border-left-color: var(--c-warning); color: #92400e; }
.cv-wsp-card-status.is-danger { background: var(--c-danger-soft); border-left-color: var(--c-danger); color: #b91c1c; }
.cv-wsp-card-foot {
display: flex; align-items: center; gap: 8px;
margin-top: auto; padding-top: 10px;
border-top: 1px solid var(--c-border-soft);
}
.cv-wsp-card-foot .cv-ui-btn { margin-left: auto; }
.cv-wsp-unread {
position: relative; display: inline-flex; align-items: center;
padding: 5px 8px; border-radius: var(--radius);
background: var(--c-warning-soft); color: var(--c-warning) !important;
text-decoration: none !important;
}
.cv-wsp-dot {
display: inline-block; min-width: 17px; margin-left: 5px; padding: 0 5px;
border-radius: var(--radius-pill);
background: var(--c-warning); color: #fff;
font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}
/* ---- Detail: the workspace header -------------------------------------- */
.cv-wsp-head {
display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
margin-bottom: 12px; padding: 16px 20px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
box-shadow: var(--shadow-sm);
color: #fff;
}
.cv-wsp-head-main { flex: 1 1 320px; min-width: 0; }
.cv-wsp-head h1 { margin: 0; font-size: 22px; font-weight: 800; color: #fff !important; }
.cv-wsp-head-desc { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.88); }
.cv-wsp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-wsp-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: var(--radius-pill);
background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
font-size: 12px; color: #fff;
}
.cv-wsp-chip .fa { opacity: .85; }
/* Tinted states stay legible on the gradient, so they use solid soft backgrounds. */
.cv-wsp-chip.is-ok { background: var(--c-success-soft); border-color: transparent; color: #166534; }
.cv-wsp-chip.is-warn { background: var(--c-warning-soft); border-color: transparent; color: #92400e; }
.cv-wsp-chip.is-danger { background: var(--c-danger-soft); border-color: transparent; color: #b91c1c; }
/* ---- Detail: the tool grid --------------------------------------------- */
.cv-wsp-tools {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 10px;
padding: 14px 16px;
}
/* The widget's box. The border lives here, not on .cv-wsp-tool, so the instructor link can sit
INSIDE the same bordered card rather than as a separate button underneath it. */
.cv-wsp-tool-wrap {
display: flex; flex-direction: column;
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
background: var(--c-surface);
overflow: hidden;
transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
/* Only lift a widget whose main action is actually a link -- a locked one must not look clickable. */
.cv-wsp-tool-wrap:has(a.cv-wsp-tool):hover {
border-color: var(--c-brand); box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.cv-wsp-tool {
display: flex; align-items: center; gap: 11px;
flex: 1 1 auto;
padding: 12px 13px;
text-decoration: none !important;
}
a.cv-wsp-tool:hover { text-decoration: none !important; }
.cv-wsp-tool-ico {
position: relative;
flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-md);
display: inline-flex; align-items: center; justify-content: center;
background: var(--cv-panel-bg); color: var(--cv-mid); font-size: 16px;
}
.cv-wsp-tool-ico .cv-wsp-dot { position: absolute; top: -6px; right: -6px; margin: 0; }
.cv-wsp-tool-body { flex: 1 1 auto; min-width: 0; }
.cv-wsp-tool-name { display: block; font-size: 13.5px; font-weight: 700; color: var(--cv-dark); }
.cv-wsp-tool-desc {
display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--c-muted);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cv-wsp-tool-go { flex: 0 0 auto; color: var(--c-muted); }
/* Locked: rendered as a , never a disabled
— a disabled anchor is still
keyboard-focusable. It states the reason instead of just greying out. */
.cv-wsp-tool.is-locked { background: var(--c-surface-2); }
.cv-wsp-tool.is-locked .cv-wsp-tool-ico { background: #e9eef5; color: var(--c-muted); }
.cv-wsp-tool.is-locked .cv-wsp-tool-name { color: var(--c-muted); }
.cv-wsp-tool-lock { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: var(--c-warning); }
/* Instructor-only "all groups" shortcut, inside the widget as a tinted footer strip. Uses the
design system's edit/admin colour (--cv-edit), the same language as the edit-mode chrome, so it
reads as a teacher affordance rather than competing with the widget's own action. */
.cv-wsp-tool-admin {
display: flex; align-items: center; gap: 7px;
padding: 7px 13px;
border-top: 1px dashed var(--cv-edit-line);
background: var(--cv-edit-soft);
color: var(--cv-edit-dark) !important;
font-size: 12px; font-weight: 600;
text-decoration: none !important;
}
.cv-wsp-tool-admin:hover { background: #fdf1d6; text-decoration: none !important; }
.cv-wsp-tool-admin .fa { color: var(--cv-edit); }
/* ---- Detail: deliverables ---------------------------------------------- */
.cv-wsp-delivs { display: flex; flex-direction: column; }
.cv-wsp-deliv {
position: relative;
display: flex; align-items: flex-start; gap: 12px;
padding: 13px 16px;
border-top: 1px solid var(--c-border-soft);
border-left: 3px solid transparent;
}
.cv-wsp-deliv:first-child { border-top: none; }
.cv-wsp-deliv:hover { background: var(--c-surface-2); }
.cv-wsp-deliv.is-open { border-left-color: var(--c-success); }
.cv-wsp-deliv.is-soon { border-left-color: var(--c-warning); }
.cv-wsp-deliv.is-expired { border-left-color: var(--c-danger); }
.cv-wsp-deliv.is-off { border-left-color: var(--cv-panel-border); }
.cv-wsp-deliv.is-pointed { background: var(--c-success-soft); }
.cv-wsp-deliv-ico {
position: relative;
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--cv-panel-bg); color: var(--cv-mid);
}
.cv-wsp-deliv-pin { position: absolute; left: -16px; color: var(--c-success); font-size: 18px; }
.cv-wsp-deliv-body { flex: 1 1 auto; min-width: 0; }
.cv-wsp-deliv-title { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35; }
.cv-wsp-deliv-title a { color: var(--cv-dark); }
.cv-wsp-deliv-meta {
display: flex; flex-wrap: wrap; gap: 4px 14px;
margin-top: 4px; font-size: 12px; color: var(--c-muted);
}
.cv-wsp-deliv-meta .fa { margin-right: 4px; opacity: .7; }
.cv-wsp-deliv-more { display: inline-block; margin-top: 5px; font-size: 12px; color: var(--c-brand); }
.cv-wsp-deliv-desc {
margin-top: 7px; padding: 9px 11px;
background: var(--c-surface-2); border-radius: var(--radius);
font-size: 12.5px; line-height: 1.55; color: #475569;
}
.cv-wsp-deliv-state {
flex: 0 0 auto;
display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
/* ---- Detail: work plan panel ------------------------------------------- */
.cv-wsp-plan-head { display: flex; align-items: center; text-decoration: none !important; cursor: pointer; }
.cv-wsp-plan-head .cv-chevron { margin-left: auto; transition: transform var(--t); }
.cv-wsp-plan-head[aria-expanded="true"] .cv-chevron { transform: rotate(180deg); }
/* toggleTasks() in scripts/gantt.js does $('#allt').attr('class','active') — a wholesale class
replacement — so these can carry no class of ours. Style by descendant only. */
.cv-wsp-ganttabs { display: flex; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.cv-wsp-ganttabs li a {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px; border-radius: var(--radius-pill);
background: var(--c-surface-2); border: 1px solid var(--cv-panel-border);
font-size: 12.5px; color: var(--cv-dark) !important; text-decoration: none !important;
}
.cv-wsp-ganttabs li.active a {
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
border-color: transparent; color: #fff !important;
}
/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 991px) {
.cv-wsp-tools { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 767px) {
.cv-wsp-head { padding: 14px 16px; }
.cv-wsp-head h1 { font-size: 19px; }
}
@media (max-width: 600px) {
.cv-wsp-grid,
.cv-wsp-tools { grid-template-columns: 1fr; }
.cv-wsp-meta { grid-template-columns: 1fr; }
/* The deliverable row wraps instead of scrolling sideways. */
.cv-wsp-deliv { flex-wrap: wrap; }
.cv-wsp-deliv-body { flex: 1 1 100%; }
.cv-wsp-deliv-state {
flex: 1 1 100%; flex-direction: row; align-items: center;
justify-content: space-between; margin-top: 8px;
}
.cv-wsp-deliv-ico { display: none; }
.cv-wsp-deliv-pin { position: static; margin-right: 6px; }
}
/* ---- Working group: membership, kept apart from the tool grid ----------- */
/*
Who you are in this workspace is a different kind of thing from the tools you use, so it gets its
own section. It was previously the first tile in .cv-wsp-tools with a "view working groups" button
hanging underneath, which made that grid column taller than the rest and left the row ragged.
*/
.cv-wsp-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px 14px;
padding: 14px 16px;
}
.cv-wsp-group-ico {
flex: 0 0 auto;
width: 44px; height: 44px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff; font-size: 18px;
}
.cv-wsp-group-body { flex: 1 1 240px; min-width: 0; }
.cv-wsp-group-name { font-size: 15px; font-weight: 700; color: var(--cv-dark); }
.cv-wsp-group-sub { margin-top: 2px; font-size: 12.5px; color: var(--c-muted); }
.cv-wsp-group-acts { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 600px) {
.cv-wsp-group-acts { flex: 1 1 100%; }
.cv-wsp-group-acts .cv-ui-btn { flex: 1 1 auto; justify-content: center; }
}
/* ---- Workspace sub-pages: shared back link ----------------------------- */
.cv-wsp-back { margin-bottom: 10px; }
/* ---- labteams.jsp: browse the working groups --------------------------- */
/*
One card per group. The original laid members out in a table with a rowspan on the group cell,
which is precisely what could not reflow on a narrow screen.
*/
.cv-wsp-teamgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 10px;
padding: 14px 16px;
}
.cv-wsp-teamcard {
border: 1px solid var(--cv-panel-border);
border-radius: var(--radius-md);
background: var(--c-surface);
overflow: hidden;
}
.cv-wsp-teamcard > header {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
padding: 9px 12px;
background: var(--c-surface-2);
border-bottom: 1px solid var(--c-border-soft);
}
.cv-wsp-teamcode {
padding: 2px 9px; border-radius: var(--radius-pill);
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff; font-size: 12px; font-weight: 700;
}
.cv-wsp-teamname { font-size: 13px; font-weight: 600; color: var(--cv-dark); }
.cv-wsp-member {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
padding: 7px 12px;
border-top: 1px solid var(--c-border-soft);
}
.cv-wsp-member:first-child { border-top: none; }
.cv-wsp-member .cv-ui-avatar { width: 26px; height: 26px; font-size: 11px; }
.cv-wsp-member-name { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--cv-dark); }
@media (max-width: 600px) {
.cv-wsp-teamgrid { grid-template-columns: 1fr; }
/* Secondary column: first names are droppable before the layout has to scroll sideways. */
.cv-wsp-col-opt { display: none; }
}
/* ---- labnotes.jsp: the team's shared file space ------------------------ */
.cv-wsp-crumbs {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
padding: 10px 16px;
border-bottom: 1px solid var(--c-border-soft);
font-size: 13px; color: var(--c-muted);
}
.cv-wsp-crumbs a { color: var(--cv-mid); }
.cv-wsp-crumb-sep { opacity: .45; }
.cv-wsp-crumb-cur { font-weight: 600; color: var(--cv-dark); }
/* Sub-folders as tiles you open, rather than the filter pills they used to be. */
.cv-wsp-folders {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid var(--c-border-soft);
}
.cv-wsp-folder {
display: flex; align-items: center; gap: 9px;
padding: 9px 11px;
border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md);
background: var(--c-surface);
text-decoration: none !important;
transition: border-color var(--t), box-shadow var(--t);
}
.cv-wsp-folder:hover { border-color: var(--c-brand); box-shadow: var(--shadow-sm); }
.cv-wsp-folder-ico {
flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--radius);
display: inline-flex; align-items: center; justify-content: center;
background: var(--cv-panel-bg); color: var(--cv-mid);
}
.cv-wsp-folder-name {
flex: 1 1 auto; min-width: 0;
font-size: 13px; font-weight: 600; color: var(--cv-dark);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-wsp-file-title { display: block; font-weight: 600; color: var(--cv-dark); }
.cv-wsp-file-acts { white-space: nowrap; }
.cv-wsp-file-acts .cv-ui-iconbtn + .cv-ui-iconbtn { margin-left: 4px; }
@media (max-width: 600px) {
.cv-wsp-folders { grid-template-columns: 1fr; }
}
/* Title column takes the slack so the date and action columns stay tight. */
.cv-wsp-files td:first-child,
.cv-wsp-files th:first-child { width: 100%; }
/* ---- labteam.jsp: the group mail alias field --------------------------- */
/* The @coursevo.com suffix used to be an , which mainss.css paints blue. */
.cv-wsp-alias { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cv-wsp-alias .cv-ui-input { flex: 1 1 200px; min-width: 0; }
.cv-wsp-alias-suffix { flex: 0 0 auto; font-size: 13px; color: var(--c-muted); }
/* ---- labupload.jsp: the side column -------------------------------------- */
.cv-wsp-upside { display: flex; flex-direction: column; gap: 12px; }
/* The deliverable currently selected in the submit form. The old markup put two class
attributes on this cell, so the highlight had never actually rendered. */
.cv-ui-table tr.is-current > td { background: var(--c-brand-softer); font-weight: 600; }
/* =======================================================================
Mobile PDF viewer (viewResource.jsp / scripts/viewResource.js) — cv-pdfm-*
Replaces the old touchpdf plugin; rendered by the shared pdf.js core (ldpdf.js).
======================================================================= */
.cv-pdfm { background: var(--c-surface); border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.cv-pdfm-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--c-surface-2); border-bottom: 1px solid var(--cv-panel-border); }
.cv-pdfm-btn { min-width: 40px; height: 40px; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); background: #fff; color: var(--c-brand); font-size: 16px; }
.cv-pdfm-btn:disabled { opacity: .4; }
.cv-pdfm-count { min-width: 64px; text-align: center; font-weight: 600; color: var(--cv-dark); }
.cv-pdfm-sep { flex: 1 1 auto; }
.cv-pdfm-view { overflow-x: auto; overflow-y: scroll; -webkit-overflow-scrolling: touch; background: #e5e7eb; padding: 1px; max-height: 85vh; }
.cv-pdfm-page { position: relative; margin: 0 auto; background: #fff; }
.cv-pdfm-page canvas { display: block; }
.cv-pdfm-links { position: absolute; inset: 0; }
.cv-pdfm-link { position: absolute; display: block; }
.cv-pdfm-link:hover, .cv-pdfm-link:focus { background: rgba(60,132,189,.15); outline: none; }
/* =======================================================================
Course calendar (course_events.jsp / mng_course_events.jsp) — cv-ev-*
Agenda timeline with a date rail, plus a month/year picker beside it.
======================================================================= */
.cv-ev-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .cv-ev-grid { grid-template-columns: 1fr; } }
.cv-ev-list { list-style: none; margin: 0; padding: 14px 16px 16px; }
.cv-ev-item { display: flex; gap: 14px; }
.cv-ev-date { flex: 0 0 auto; width: 62px; text-align: center; position: relative; }
.cv-ev-date::after { content: ""; position: absolute; left: 50%; top: 0; bottom: -10px; width: 2px; margin-left: -1px; background: var(--cv-panel-border); z-index: 0; }
.cv-ev-item:last-child .cv-ev-date::after { bottom: 10px; }
.cv-ev-day {
position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px; margin: 0 auto; border-radius: 50%;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%);
color: #fff; font-size: 17px; font-weight: 800;
}
.cv-ev-mon { position: relative; z-index: 1; display: block; margin-top: 4px; padding: 0 2px; font-size: 11px; line-height: 1.25; color: var(--c-muted); background: #fff; }
.cv-ev-card { flex: 1 1 auto; min-width: 0; margin-bottom: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.cv-ev-item:last-child .cv-ev-card { margin-bottom: 0; }
.cv-ev-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.cv-ev-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15px; font-weight: 700; color: var(--cv-dark); line-height: 1.35; }
.cv-ev-meta { flex: 0 0 auto; display: flex; gap: 5px; }
.cv-ev-details { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--c-border-soft); color: #475569; font-size: 13.5px; line-height: 1.6; word-wrap: break-word; }
.cv-ev-details img { max-width: 100%; height: auto; }
.cv-ev-details p:last-child { margin-bottom: 0; }
.cv-ev-year { justify-content: space-between; }
.cv-ev-year h2 { flex: 0 0 auto; font-size: 17px; }
.cv-ev-months { display: flex; flex-direction: column; padding: 8px; }
.cv-ev-month { display: block; padding: 7px 12px; border-radius: var(--radius-md); color: #475569; font-size: 13.5px; text-decoration: none !important; transition: background var(--t), color var(--t); }
a.cv-ev-month:hover { background: var(--cv-item-hover); color: var(--cv-dark); }
.cv-ev-month.is-active { background: var(--c-brand-softer); color: var(--cv-dark); font-weight: 700; box-shadow: inset 3px 0 0 var(--cv-mid); }
.cv-ev-month.is-empty { color: #cbd5e1; cursor: default; }
/* Management form + list */
.cv-ev-dur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--c-muted); }
.cv-ev-cell { max-width: 460px; }
.cv-ev-cell img { max-width: 100%; height: auto; }
.cv-ev-cell p:last-child { margin-bottom: 0; }
/* =======================================================================
Reservations (course_sched.jsp / course_schedule.jsp / mng_course_schedules.jsp) — cv-rsv-*
Programme cards, the weekly booking grid, and the management forms.
======================================================================= */
/* --- Programme list (course_sched.jsp) --- */
.cv-rsv-progs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; padding: 16px; }
.cv-rsv-prog { padding: 14px 16px; background: #fff; border: 1px solid var(--cv-panel-border); border-left: 4px solid var(--cv-panel-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.cv-rsv-prog.is-open { border-left-color: var(--c-success); }
.cv-rsv-prog.is-waiting { border-left-color: var(--cv-edit); }
.cv-rsv-prog.is-ended { border-left-color: #cbd5e1; background: var(--c-surface-2); }
.cv-rsv-prog-head { display: flex; align-items: flex-start; gap: 10px; }
.cv-rsv-prog-head h3 { flex: 1 1 auto; margin: 0; font-size: 15.5px; font-weight: 700; color: var(--cv-dark); line-height: 1.35; }
.cv-rsv-period { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font-size: 12.5px; color: var(--c-muted); }
.cv-rsv-period .fa { margin-right: 4px; opacity: .75; }
.cv-rsv-arrow { opacity: .6; }
.cv-rsv-desc { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--c-border-soft); font-size: 13px; line-height: 1.55; color: #475569; }
.cv-rsv-res { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cv-rsv-resbtn {
display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--radius-pill);
background: var(--c-brand-softer); border: 1px solid var(--cv-panel-border); color: var(--cv-dark) !important;
font-size: 13px; font-weight: 600; text-decoration: none !important; transition: background var(--t), border-color var(--t);
}
.cv-rsv-resbtn:hover { background: var(--cv-item-hover); border-color: #8fb8de; }
.cv-rsv-resbtn.is-off { background: var(--c-surface-2); color: var(--c-muted) !important; cursor: default; }
/* --- Weekly booking grid (course_schedule.jsp) --- */
.cv-rsv-note { display: flex; gap: 10px; align-items: flex-start; margin: 14px 16px 0; padding: 10px 14px; background: var(--c-info-soft); border: 1px solid #bae6fd; border-radius: var(--radius-md); font-size: 13px; color: #075985; }
.cv-rsv-week { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 0; }
.cv-rsv-weeklbl { font-weight: 700; color: var(--cv-dark); }
.cv-rsv-gridwrap { padding: 14px 16px; overflow-x: auto; }
.cv-rsv-grid { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 4px; }
.cv-rsv-grid th { padding: 8px 6px; background: var(--c-surface-2); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--cv-dark); }
.cv-rsv-dayname { display: block; font-weight: 700; }
.cv-rsv-daydate { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--c-muted); }
.cv-rsv-hcol { width: 62px; padding: 6px; text-align: center; font-size: 12px; font-weight: 700; color: var(--c-muted); background: var(--c-surface-2); border-radius: var(--radius-sm); white-space: nowrap; }
.cv-rsv-empty { background: #fbfdff; border: 1px dashed var(--c-border-soft); border-radius: var(--radius-sm); }
.cv-rsv-gap td { padding: 2px; color: #cbd5e1; text-align: center; }
.cv-rsv-slot {
padding: 6px 8px; text-align: center; vertical-align: middle; border-radius: var(--radius-md);
background: var(--c-surface-2); border: 1px solid var(--cv-panel-border); transition: box-shadow var(--t);
}
.cv-rsv-slot:hover { box-shadow: var(--shadow-sm); }
.cv-rsv-slot.is-free { background: var(--c-success-soft); border-color: #86efac; }
.cv-rsv-slot.is-mine { background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%); border-color: var(--cv-mid); box-shadow: inset 0 0 0 1px var(--cv-mid); }
.cv-rsv-slot.is-full { background: var(--c-danger-soft); border-color: #fecaca; }
.cv-rsv-slot.is-locked { background: var(--c-surface-2); border-color: var(--cv-panel-border); }
.cv-rsv-slot-no { display: block; font-size: 11px; font-weight: 700; color: var(--c-muted); }
.cv-rsv-slot.is-mine .cv-rsv-slot-no { color: var(--cv-dark); }
.cv-rsv-slot-act { display: inline-flex; gap: 4px; margin-top: 4px; }
.cv-rsv-act {
display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
background: #fff; border: 1px solid var(--cv-panel-border); color: #475569 !important; font-size: 11px; text-decoration: none !important;
transition: background var(--t), color var(--t), transform var(--t);
}
.cv-rsv-act:hover { transform: translateY(-1px); }
.cv-rsv-act--book { background: var(--c-success); border-color: var(--c-success); color: #fff !important; }
.cv-rsv-act--cancel { background: var(--c-danger); border-color: var(--c-danger); color: #fff !important; }
.cv-rsv-act.is-off { opacity: .5; cursor: default; }
.cv-rsv-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 16px 16px; font-size: 12.5px; color: var(--c-muted); }
.cv-rsv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cv-rsv-key { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--cv-panel-border); }
.cv-rsv-key.is-free { background: var(--c-success-soft); border-color: #86efac; }
.cv-rsv-key.is-mine { background: #dbeafe; border-color: var(--cv-mid); }
.cv-rsv-key.is-full { background: var(--c-danger-soft); border-color: #fecaca; }
/* --- Management --- */
.cv-rsv-resource { margin: 0 16px 14px; border: 1px solid var(--cv-panel-border); border-radius: var(--radius-md); overflow: hidden; }
.cv-rsv-resource-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; background: var(--c-surface-2); border-bottom: 1px solid var(--cv-panel-border); }
.cv-rsv-resource-head h3 { flex: 1 1 auto; margin: 0; font-size: 14.5px; font-weight: 700; color: var(--cv-dark); }
.cv-rsv-resource-head h3 .fa { color: var(--cv-mid); margin-right: 6px; }
.cv-rsv-resource-act { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-rsv-time { display: flex; align-items: center; gap: 6px; }
.cv-rsv-time .cv-ui-select { min-width: 72px; }
/* --- Reservations of one slot (course_schedule_reservations.jsp), shown inside the floating
window: a panel, not a page. --- */
.cv-rsv-panel { padding: 4px; font-size: 13px; }
.cv-rsv-panel-head {
display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px;
background: linear-gradient(135deg, var(--cv-dark) 0%, var(--cv-mid) 100%); color: #fff; border-radius: var(--radius-md);
}
.cv-rsv-panel-no { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 8px; border-radius: var(--radius-md); background: rgba(255,255,255,.18); font-weight: 800; }
.cv-rsv-panel-when { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.cv-rsv-panel-when strong { display: block; }
.cv-rsv-panel-when span { font-size: 12px; opacity: .9; }
.cv-rsv-panel-head .cv-ui-badge { background: rgba(255,255,255,.2); color: #fff; }
.cv-rsv-panel-head .cv-ui-badge--danger { background: var(--c-danger); color: #fff; }
.cv-rsv-panel-head .cv-ui-badge--ok { background: var(--c-success); color: #fff; }
.cv-rsv-people { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
.cv-rsv-person { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--c-border-soft); }
.cv-rsv-person:last-child { border-bottom: 0; }
.cv-rsv-person:hover { background: var(--c-brand-softer); }
.cv-rsv-person-n { flex: 0 0 auto; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-surface-2); color: var(--c-muted); font-size: 11px; font-weight: 700; }
.cv-rsv-person-id { flex: 1 1 auto; min-width: 0; }
.cv-rsv-person-id strong { display: block; color: var(--cv-dark); font-weight: 600; }
.cv-rsv-person-id span { font-size: 11.5px; color: var(--c-muted); }
.cv-rsv-panel-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px; margin-top: 8px; background: var(--c-surface-2); border-radius: var(--radius-md); }
.cv-rsv-panel-dir:not(:empty) { margin-top: 10px; }
/* =======================================================================
Floating windows (scripts/window.js + Styles/window.css) — modern skin.
window.js writes inline colours on the frame / title bar when a window goes
inactive, so the visual properties here need !important to survive that.
The buttons are real