/* =======================================================================
   modern.css v3 — component refresh for Coursevo
   Loaded LAST in index.jsp.

   What this targets:
     - Bootstrap 3 components used heavily by myCourses.jsp, lesson.jsp,
       and userLeftPanel.jspf: panels, list-groups, nav-pills, labels,
       badges, alerts, buttons, inputs.
     - Course cards (.whiteBlock.container-fluid pattern).
     - The page header (.view_title) — soft brand accent.
     - Boxlink hover transition.

   What this DELIBERATELY does NOT touch (preserved from the original):
     - Navbar (brand blue #3C84BD stays as-is)
     - All body/heading fonts and colors
     - The compact stats panel and legacy table menus
       (.darkBlock, .paleBlock, .whiteBlock, .titleBox, .boxLink colors,
       .statUser, .imgBlock) — only the *container card* variant of
       .whiteBlock gets a lift.
     - Chat panels and modal-overlay popups

   To disable: comment out the <link> tag in index.jsp.
   ======================================================================= */

/* ===== Tokens =========================================================== */
:root {
    --c-brand:          #3C84BD;          /* matches the navbar */
    --c-brand-hover:    #2f6c9c;
    --c-brand-soft:     #eaf4fc;
    --c-brand-softer:   #f3f9fd;

    --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;

    --c-border:         #e5e7eb;
    --c-border-soft:    #f1f5f9;
    --c-surface:        #ffffff;
    --c-surface-2:      #f8fafc;
    --c-muted:          #6b7280;

    --radius-sm:        4px;
    --radius:           6px;
    --radius-md:        8px;
    --radius-lg:        10px;
    --radius-pill:      999px;

    --shadow-sm:        0 1px 2px rgba(15, 23, 42, .06);
    --shadow:           0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --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);
    --shadow-focus:     0 0 0 3px rgba(60, 132, 189, .22);

    --t:                .15s ease;
}

/* ===== Body font smoothing only (no font change) ======================== */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== Page header (.view_title) — left accent bar ====================== */
#PageTitle .row,
#pTitle .row { display: block; }

.view_title {
    padding: 6px 0 8px 0;
    margin: 4px 0 6px 0;
    border-bottom: 1px solid var(--c-border-soft);
}

/* ===== Buttons — radius + focus ring + smoother hover =================== */
.btn {
    border-radius: var(--radius);
    transition: background-color var(--t),
                border-color var(--t),
                box-shadow var(--t),
                color var(--t);
}
.btn:focus,
.btn.focus      { outline: none; box-shadow: var(--shadow-focus); }
.btn-xs         { border-radius: var(--radius-sm); }
.btn-lg         { border-radius: var(--radius-lg); }
.btn-group > .btn { box-shadow: none; }

/* Icon-only action buttons (e.g. the news/content/forum row in myCourses) */
.btn-group-justified .btn-xs {
    padding: 6px 4px;
}
.btn-group-justified .btn-xs:hover {
    background-color: var(--c-brand-soft);
    border-color: var(--c-brand-soft);
}

/* ===== Form inputs — modern focus glow ================================== */
.form-control {
    border-radius: var(--radius);
    transition: border-color var(--t), box-shadow var(--t);
}
.form-control:focus {
    border-color: var(--c-brand);
    box-shadow: var(--shadow-focus);
    outline: none;
}
.input-group-addon { border-radius: var(--radius); }

.input-group > .form-control:not(:first-child),
.input-group > .input-group-addon:not(:first-child),
.input-group > .input-group-btn:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group > .form-control:not(:last-child),
.input-group > .input-group-addon:not(:last-child),
.input-group > .input-group-btn:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ===== Panels — soft card with brand-accent heading ===================== */
.panel {
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background: var(--c-surface);
    margin-bottom: 12px;
    overflow: hidden;
}

.panel-default {
    border-color: transparent;
}
.panel-default > .panel-heading {
    /*background: var(--c-surface);*/
    border-bottom: 1px solid var(--c-border-soft);
    color: #1f2937;
    padding: 10px 14px;
}

.panel-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #1f2937;
}
.panel-title > a,
.panel-title > a:hover,
.panel-title > a:focus {
    color: inherit;
    text-decoration: none;
}
.panel-title > a[data-toggle="collapse"] i.fa-bars {
    color: var(--c-brand);
    margin-right: 6px;
}

/* Success panel — used for "Back" return-action card.
   Switch from filled-green to white card with green accent. */
.panel-success {
    background: var(--c-surface);
    border: 0;
    box-shadow: var(--shadow-sm);
}
.panel-success > .panel-heading {
    background: var(--c-success-soft);
    color: #14532d;
    border-color: transparent;
}
.panel-success a { color: #14532d; }
.panel-success a:hover { color: #166534; }

/* ===== List groups ====================================================== */
.list-group {
    border-radius: 0;
    margin-bottom: 0;
}
.list-group-item {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--c-border-soft);
    background: transparent;
    padding: 10px 14px;
    transition: background-color var(--t), color var(--t);
}
.list-group-item:first-child,
.list-group-item:last-child { border-radius: 0; }
.list-group-item:last-child { border-bottom: 0; }
.list-group-item:hover {
    background: var(--c-brand-softer);
}
.list-group-item:hover a.boxLink { color: var(--c-brand-hover); }

/* Active menu item (server adds .titleBox to li) */
.list-group-item.titleBox,
.list-group-item.title5 {
    background: var(--c-brand-soft) !important;
    border-left: 3px solid var(--c-brand);
    padding-left: 11px;
    font-weight: 500;
}
.list-group-item.titleBox a.boxLink,
.list-group-item.title5  a.boxLink { color: var(--c-brand-hover); }

.list-group-item-heading {
    color: #1f2937;
    font-weight: 600;
    margin: 0 0 4px 0;
}
.list-group-item-text { color: var(--c-muted); }

/* The "no services" warning rows use inline yellow bg — leave alone but
   give a slight rounded feel via the parent panel overflow:hidden. */

/* ===== Tabs (.nav-pills) ================================================ */
.nav-pills > li > a {
    border-radius: var(--radius);
    color: var(--c-muted);
    font-weight: 500;
    padding: 8px 14px;
    transition: background-color var(--t), color var(--t);
}
.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
    background: var(--c-brand-softer);
    color: var(--c-brand-hover);
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background: var(--c-brand);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

/* ===== Labels (chip pills) ============================================== */
.label {
    display: inline-block;
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.4;
}
.label-default { background: #e5e7eb; color: #374151; }
.label-primary { background: var(--c-brand); color: #fff; }
.label-info    { background: var(--c-info);  color: #fff; }
.label-success { background: var(--c-success); color: #fff; }
.label-warning { background: var(--c-warning); color: #fff; }
.label-danger  { background: var(--c-danger); color: #fff; }

/* ===== Badges =========================================================== */
.badge {
    border-radius: var(--radius-pill);
    padding: 3px 8px;
    min-width: 18px;
    font-size: 11px;
    font-weight: 600;
    background: var(--c-muted);
}
.badge.alert-danger { background: var(--c-danger); color: #fff; }
.badge.alert-warning { background: var(--c-warning); color: #fff; }

/* ===== Alerts =========================================================== */
.alert {
    border: 0;
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    padding: 12px 14px;
}
.alert-info    { background: var(--c-info-soft);    color: #1e3a8a; border-left-color: var(--c-info); }
.alert-success { background: var(--c-success-soft); color: #14532d; border-left-color: var(--c-success); }
.alert-warning { background: var(--c-warning-soft); color: #78350f; border-left-color: var(--c-warning); }
.alert-danger  { background: var(--c-danger-soft);  color: #7f1d1d; border-left-color: var(--c-danger); }

/* ===== Course cards — .whiteBlock used as a container =================== */
/* Only target the card pattern (container-fluid). Standalone .whiteBlock
   (e.g. inside left-menu actions) keeps its original look. */
.whiteBlock.container-fluid {
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    transition: box-shadow var(--t), transform var(--t);
}
.whiteBlock.container-fluid:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Course image inside a card */
.course-image .img-thumbnail,
.course-image-inn {
    padding: 0;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-md);
}

/* "Run course" button block in left menu (whiteBlock wrapper) */
.list-group .whiteBlock,
.panel-body .whiteBlock {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* ===== boxLink — keep colors, add smooth transition ===================== */
a.boxLink {
    transition: color var(--t);
}

/* ===== Dropdowns ======================================================== */
.dropdown-menu {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 4px;
}
.dropdown-menu > li > a {
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    transition: background-color var(--t), color var(--t);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--c-brand-softer);
    color: var(--c-brand-hover);
}

/* ===== Modal ============================================================ */
.modal-content {
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--c-border-soft);
    padding: 14px 18px;
}
.modal-header .modal-title { font-weight: 600; color: #1f2937; }
.modal-footer {
    border-top: 1px solid var(--c-border-soft);
    padding: 12px 18px;
}

/* ===== Pagination ======================================================= */
.pagination > li > a,
.pagination > li > span {
    border: 1px solid var(--c-border);
    margin: 0 2px;
    border-radius: var(--radius-sm) !important;
    color: var(--c-muted);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: #fff;
}

/* ===== Webkit scrollbar polish ========================================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
::-webkit-scrollbar-track { background: transparent; }

/* =======================================================================
   v4 — First-page hero, logo plaque, tab menu, course-list cards
   ======================================================================= */

/* ===== Logo plaque (#introDiv.imgBlock) ================================= */
#introDiv.imgBlock {
    float: left;
    background-color: var(--c-surface);
    background-origin: content-box;
    background-clip: padding-box;
    padding: 16px;
    margin: 4px 26px 16px 0;
    border: 1px solid var(--c-border-soft);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
    transition: box-shadow var(--t), transform var(--t);
}
#introDiv.imgBlock:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

/* Welcome heading next to the floated logo */
#introDiv.imgBlock + h1 {
    margin-top: 10px;
    position: relative;
    display: inline-block;
}
#introDiv.imgBlock + h1::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: var(--c-brand);
    border-radius: 2px;
    margin: 10px 0 4px 0;
}

/* Welcome message body: better readability after the logo */
#introDiv.imgBlock ~ p,
#introDiv.imgBlock + h1 ~ p,
#introDiv.imgBlock + h1 ~ div {
    line-height: 1.65;
}

/* Clear the float once we hit the course list */
#ce_pview { clear: both; padding-top: 8px; }

/* Narrow viewports: drop the float so logo stacks above the heading */
@media (max-width: 600px) {
    #introDiv.imgBlock {
        float: none;
        margin: 4px auto 16px;
    }
    #introDiv.imgBlock + h1 { display: block; text-align: center; }
    #introDiv.imgBlock + h1::after { margin-left: auto; margin-right: auto; }
}

/* ===== First-page tab menu (#tabmenu) — modern underlined tabs ========== */
/* Override mainss.css's old light-blue button-style tabs. */
#tabmenu {
    border-bottom: 1px solid var(--c-border-soft);
    padding: 0 0 0 4px;
    margin: 0 0 14px 0;
    font-size: 100%;
}
#tabmenu li {
    margin: 0 2px 0 0;
}
#tabmenu a:link,
#tabmenu a:visited {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--c-muted);
    float: left;
    font-weight: 500;
    line-height: 1.4;
    padding: 10px 18px;
    margin-bottom: -1px;
    border-radius: 0;
    transition: color var(--t), background-color var(--t), border-color var(--t);
}
#tabmenu a:hover {
    color: var(--c-brand-hover);
    background: var(--c-brand-softer);
    border-bottom-color: var(--c-brand-soft);
}
.section-1 #tabmenu li#nav-1 a,
.section-2 #tabmenu li#nav-2 a,
.section-3 #tabmenu li#nav-3 a,
.section-4 #tabmenu li#nav-4 a,
.section-5 #tabmenu li#nav-5 a,
.section-6 #tabmenu li#nav-6 a,
.section-7 #tabmenu li#nav-7 a,
.section-8 #tabmenu li#nav-8 a,
.section-9 #tabmenu li#nav-9 a,
.section-10 #tabmenu li#nav-10 a {
    background: transparent;
    border-bottom: 3px solid var(--c-brand);
    color: var(--c-brand);
    font-weight: 600;
}

/* Override the outer whiteBlock table that wraps the tab menu on the
   first page (`<table class="whiteBlock">` in courses.jspf) — let the
   underline of #tabmenu carry the visual weight. */
#ce_pview > table.whiteBlock,
#main_info > table.whiteBlock,
#main_info_site > table.whiteBlock {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}
#ce_pview > table.whiteBlock > tbody > tr > td.section-1,
#ce_pview > table.whiteBlock > tbody > tr > td.section-2,
#ce_pview > table.whiteBlock > tbody > tr > td[class^="section-"] {
    padding: 0;
}

/* ===== Course list cards — scoped to the first-page list only =========== */
#ce_pview table.darkBlock {
    border-collapse: separate;
    border: 0;
    background: var(--c-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 14px;
    transition: box-shadow var(--t), transform var(--t);
}
#ce_pview table.darkBlock:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}
#ce_pview table.darkBlock > tbody > tr > td.title4 {
    font-weight: 600;
    color: #1f2937;
    padding: 10px 14px;
    background: transparent;
    border-bottom: 1px solid var(--c-border-soft);
}
#ce_pview table.darkBlock > tbody > tr > td.paleBlock {
    padding: 10px 14px;
    background: transparent;
    border-color: var(--c-border-soft);
}
#ce_pview table.darkBlock .course-image img,
#ce_pview table.darkBlock img.img-thumbnail {
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border-soft);
    padding: 0;
}