/* =======================================================================
   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;

    /* Coursevo palette */
    --cv-dark:         #1a3558;
    --cv-mid:          #2d5a8e;
    --cv-panel-bg:     #dce8f5;
    --cv-panel-border: #c8daf0;
    --cv-item-hover:   #e8f2fb;
    --cv-item-active:  #ddeeff;
}

/* --- 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 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; }

/* --- 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;
    text-transform: uppercase;
}
.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: 10px;
    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;
}