/* =======================================================================
   coursevo.css — new component styles for Coursevo
   Loaded after modern.css in index.jsp.

   Add all new UI improvements here.
   Uses the CSS custom properties defined in modern.css (:root).
   ======================================================================= */

/* ===== Assessment card list (.ac-*) ===================================== */
#pMain .ac-wrap { margin: 0 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; }