/**
 * Modern visual layer for Claroline.
 * Safe overrides only: no functional changes.
 */

:root {
    --cl-bg: #eef3f7;
    --cl-surface: #ffffff;
    --cl-surface-soft: #f5f8fb;
    --cl-border: #ced8e3;
    --cl-text: #1f2933;
    --cl-text-soft: #4d6072;

    --cl-blue-900: #2e4355;
    --cl-blue-700: #3f566b;
    --cl-blue-600: #516b82;
    --cl-blue-100: #eaf0f5;

    --cl-wine-700: #5e273b;
    --cl-wine-600: #7b334c;

    --cl-yellow-700: #d8bd6a;
    --cl-yellow-100: #f8f2de;

    --cl-success: #2f7a4a;
    --cl-danger: #8b2f43;
    --cl-warning: #9c7d2c;

    --cl-shadow-sm: 0 1px 2px rgba(24, 39, 56, 0.08);
    --cl-shadow-md: 0 6px 14px rgba(24, 39, 56, 0.1);
    --cl-radius-sm: 6px;
    --cl-radius-md: 10px;
    --cl-radius-lg: 14px;
}

html,
body {
    background: linear-gradient(180deg, #f4f7fa 0%, #e9eff5 100%);
}

body {
    color: var(--cl-text);
    font-family: "Source Sans 3", "Trebuchet MS", Verdana, sans-serif;
    line-height: 1.45;
}

h1,
h2,
h3,
h4,
h5 {
    color: var(--cl-blue-900);
    font-family: "Merriweather", Georgia, serif;
    letter-spacing: 0.01em;
}

a:link,
a:visited {
    color: var(--cl-blue-700);
}

a:hover,
a:active {
    color: var(--cl-wine-600);
}

#topBanner {
    background: linear-gradient(120deg, var(--cl-blue-900), var(--cl-blue-700));
    box-shadow: var(--cl-shadow-md);
}

#platformBanner {
    padding: 14px 18px;
}

#platformBanner #siteName a,
#platformBanner #institution {
    letter-spacing: 0.08em;
    text-shadow: none;
}

#userBanner {
    height: auto;
    min-height: 36px;
    color: var(--cl-text-soft);
    background: var(--cl-blue-100);
    border-bottom: 1px solid var(--cl-border);
}

#userBanner ul.menu li {
    height: 36px;
    line-height: 2.9em;
    background: transparent;
}

#userBanner ul.menu li span {
    border-right: 1px solid var(--cl-border);
}

#userBanner ul.menu li.userName {
    color: var(--cl-blue-900);
    background: transparent;
    padding-right: 8px;
}

#breadcrumbLine {
    padding: 10px 18px 8px;
    color: var(--cl-text-soft);
    background: #f0f4f8;
    border-bottom: 1px solid var(--cl-border);
}

#claroBody {
    font-size: 0.9em;
    padding: 18px;
}

input,
textarea,
select {
    padding: 7px 9px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    background: var(--cl-surface);
    color: var(--cl-text);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--cl-blue-600);
    box-shadow: 0 0 0 3px rgba(81, 107, 130, 0.15);
    outline: none;
}

input[type=submit],
input[type=reset],
input[type=button],
button {
    margin-top: 6px;
    padding: 7px 12px;
    border: 1px solid var(--cl-blue-700);
    border-radius: var(--cl-radius-sm);
    background: linear-gradient(180deg, var(--cl-blue-700), var(--cl-blue-900));
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: var(--cl-shadow-sm);
}

input[type=submit]:hover,
input[type=button]:hover,
button:hover {
    background: linear-gradient(180deg, var(--cl-wine-600), var(--cl-wine-700));
    border-color: var(--cl-wine-700);
}

.toolTitleBlock .mainTitle {
    color: var(--cl-blue-900);
    letter-spacing: 0.03em;
    text-transform: none;
}

.toolTitleBlock .subTitle,
.toolTitleBlock .superTitle {
    color: var(--cl-text-soft);
    letter-spacing: 0.08em;
}

ul.commandList li a {
    border: 1px solid var(--cl-border);
    background: var(--cl-surface-soft);
    border-radius: var(--cl-radius-sm);
}

ul.commandList li a:hover {
    border-color: var(--cl-blue-600);
    background: var(--cl-blue-100);
}

#claroBody .claroCmd,
#claroBody a.claroCmd:link,
#claroBody a.claroCmd:visited {
    color: var(--cl-wine-600);
    font-weight: 700;
}

#claroBody a.claroCmd:hover,
#claroBody a.claroCmd:active {
    color: var(--cl-wine-700);
}

.portlet {
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    background: var(--cl-surface);
    box-shadow: var(--cl-shadow-sm);
}

.portlet h1,
.blockHeader,
h1.blockHeader,
h2.blockHeader,
h3.blockHeader {
    color: var(--cl-blue-900);
}

.claroTable {
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--cl-surface);
    box-shadow: var(--cl-shadow-sm);
}

.claroTable td,
.claroTable th {
    padding: 8px 10px;
    border-bottom: 1px solid #dbe4ec;
}

.claroTable .superHeader th,
.claroTable th.superHeader,
.claroTable .headerY th,
.claroTable .headerX th,
.claroTable thead th {
    color: #fff;
    background: linear-gradient(180deg, var(--cl-blue-700), var(--cl-blue-900));
    border-bottom: 1px solid var(--cl-blue-900);
}

.emphaseLine tbody tr:hover {
    background-color: #f2f6fa;
}

.platformMessage {
    background-color: var(--cl-yellow-100);
}

.unreadMessage {
    background-color: #edf2f7;
}

.claroDialogBox,
.claroMessageBox,
.claroIntroSection,
.imInfoBlock,
.claroRightMenu {
    border: 1px solid var(--cl-border);
    border-left-width: 5px;
    border-radius: var(--cl-radius-md);
    background: var(--cl-surface);
    box-shadow: var(--cl-shadow-sm);
    color: var(--cl-text);
}

.boxInfo {
    border-left-color: var(--cl-blue-700);
    background: #f4f8fc;
}

.boxSuccess {
    border-left-color: var(--cl-success);
    background: #f3faf5;
}

.boxWarning {
    border-left-color: var(--cl-warning);
    background: var(--cl-yellow-100);
}

.boxError {
    border-left-color: var(--cl-danger);
    background: #fbf1f4;
}

.boxQuestion {
    border-left-color: var(--cl-wine-600);
    background: #faf4f7;
}

#navlist {
    border-bottom: 1px solid var(--cl-border);
}

#navlist li a:link,
#navlist li a:visited {
    border-radius: var(--cl-radius-sm) var(--cl-radius-sm) 0 0;
    margin: 0 3px;
    padding: 5px 10px;
}

#navlist li a:hover {
    background: var(--cl-blue-100);
    border-bottom: 4px solid var(--cl-blue-600);
}

#navlist li a.current {
    color: #fff;
    background: var(--cl-blue-700);
    border-bottom: 4px solid var(--cl-yellow-700);
}

#courseLeftSidebar {
    border-right: 1px solid var(--cl-border);
}

#courseRightContent {
    border-left: 1px solid var(--cl-border);
}

.highlight {
    color: var(--cl-warning);
}

.correct {
    color: var(--cl-success);
}

.error {
    color: var(--cl-danger);
}

/* Course modules */
ul.coursesTabs {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

ul.coursesTabs li {
    float: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-sm) var(--cl-radius-sm) 0 0;
    background: #f4f7fb;
}

ul.coursesTabs li a {
    width: auto;
    min-width: 110px;
    height: 34px;
    line-height: 2.2em;
    padding: 0 10px;
}

ul.coursesTabs li.more a {
    min-width: 42px;
    text-align: center;
}

ul.coursesTabs li.current,
ul.coursesTabs li:hover {
    border-top: 3px solid var(--cl-blue-700);
    background: var(--cl-surface);
}

div.tabbedCourse {
    border: 1px solid var(--cl-border);
    border-radius: 0 var(--cl-radius-md) var(--cl-radius-md) var(--cl-radius-md);
    overflow: hidden;
    background: var(--cl-surface);
}

.courseInfos {
    padding: 12px 14px;
    background: linear-gradient(180deg, #f6f9fc 0%, #edf3f8 100%);
    border-bottom: 1px solid var(--cl-border);
}

.courseInfos h2 {
    font-size: 1.7em;
    text-transform: none;
    border-right: 1px solid var(--cl-border);
}

.courseInfos p {
    color: var(--cl-text-soft);
    padding-top: 3px;
}

.courseContent {
    padding: 14px;
}

dl.courseList {
    display: block;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    background: var(--cl-surface);
}

dl.courseList dd {
    border-bottom-color: #dbe4ec;
}

dl.courseList .role,
dl.courseList .enrolment {
    color: var(--cl-text-soft);
    font-weight: 600;
}

/* Desktop "My course list" overflow guard */
#dekstopLeftSidebar,
#desktopRightContent {
    box-sizing: border-box;
}

#dekstopLeftSidebar .portlet,
#dekstopLeftSidebar .portlet .content,
#dekstopLeftSidebar .userCourseList,
#dekstopLeftSidebar .userCourseList dl,
#dekstopLeftSidebar .userCourseList dl.courseList {
    max-width: 100%;
    box-sizing: border-box;
}

#dekstopLeftSidebar .userCourseList dl.courseList {
    width: 100%;
    padding-right: 0;
    overflow-x: hidden;
}

#dekstopLeftSidebar .userCourseList dl.courseList dt,
#dekstopLeftSidebar .userCourseList dl.courseList dd,
#dekstopLeftSidebar .userCourseList dl.courseList dt a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

#dekstopLeftSidebar .userCourseList dl.courseList dt a {
    white-space: normal;
}

#dekstopLeftSidebar .userCourseList dl.courseList .role,
#dekstopLeftSidebar .userCourseList dl.courseList .enrolment {
    float: none;
    margin-left: 6px;
}

/* Messaging module */
.imInfoBlock {
    padding: 8px 12px;
    border-left-color: var(--cl-blue-700);
}

.im_context {
    color: #607487;
}

#im_message .header {
    border-bottom: 1px solid var(--cl-border);
    padding-bottom: 8px;
}

.imContent {
    line-height: 1.55;
}

.im_list_action a {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 5px;
    background: #f2f6fa;
}

.im_list_action a:hover {
    background: #e8f0f7;
}

/* Admin module */
ul.adminPanel {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 0;
}

ul.adminPanel li {
    float: none;
    width: 320px;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    background: var(--cl-surface);
}

ul.adminPanel li ul {
    width: auto;
    height: auto;
    margin: 8px 0 0;
    padding-left: 1em;
}

ul.adminPanel h2,
ul.adminPanel h3 {
    color: var(--cl-blue-900);
    margin-top: 0;
}

table.adminPanel input[type=text] {
    width: 120px;
}

form tr.admin td {
    background-color: #f4f8fc;
    border: 1px solid var(--cl-border);
}

dd.adminControl,
div.adminControl,
span.adminControl {
    border-left-color: var(--cl-wine-600);
    background: #faf3f6;
}

/* Forum module */
.threadPost {
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    margin: 8px 0;
    overflow: hidden;
    background: linear-gradient(90deg, #f5f8fc 0, #f5f8fc 220px, #fff 220px);
}

.threadPostInfo {
    width: 220px;
    padding: 10px;
    background: #f3f7fb;
    border-right: 1px solid var(--cl-border);
}

.threadPosterPicture img {
    border: 1px solid var(--cl-border);
    border-radius: 8px;
}

.threadPostContent {
    margin-left: 230px;
    padding: 10px 12px;
    min-height: 130px;
}

/* Global detail tuning */
fieldset {
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    background: var(--cl-surface);
}

fieldset legend {
    color: var(--cl-blue-900);
    padding: 0 6px;
}

.notice,
.comment,
.HelpText,
.HelpText ul {
    color: #607387;
}

.warning {
    color: #3a2f19;
    background: var(--cl-yellow-100);
    border-left: 4px solid var(--cl-yellow-700);
    padding: 6px 9px;
    border-radius: var(--cl-radius-sm);
}

.claroToolTitle {
    color: var(--cl-blue-900);
}

.claroTable tbody tr:nth-child(even):not(.platformMessage):not(.unreadMessage) td {
    background: #fbfdff;
}

.claroPager .pagerPages {
    padding: 4px 10px;
}

.claroPager a {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid var(--cl-border);
    border-radius: 5px;
    background: #f7fafd;
}

.claroPager a:hover {
    border-color: var(--cl-blue-600);
    background: #edf3f8;
}

.claroThemePicker {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.claroThemePicker label {
    color: var(--cl-text-soft);
    font-weight: 600;
}

.claroThemePicker select {
    min-width: 120px;
    height: 24px;
    padding: 2px 4px;
}

@media (max-width: 960px) {
    #claroBody {
        padding: 12px;
    }

    #courseLeftSidebar,
    #courseRightContent {
        float: none;
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
    }

    #userBannerRight,
    #userBannerLeft {
        float: none;
    }

    #userBanner ul.menu li {
        float: none;
        height: auto;
        line-height: 1.8em;
        text-align: left;
    }

    #breadcrumbLine .breadcrumbTrails,
    #breadcrumbLine #toolViewOption {
        float: none;
        text-align: left;
        margin-bottom: 6px;
    }

    .claroTable {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    ul.coursesTabs li a {
        min-width: 88px;
        padding: 0 8px;
    }

    .courseInfos h2,
    .courseInfos p,
    .groupInfos h3,
    .groupInfos p {
        float: none;
        display: block;
        border: 0;
        padding: 0;
        margin: 0 0 6px;
    }

    ul.adminPanel li {
        width: 100%;
    }

    .threadPost {
        background: #fff;
    }

    .threadPostInfo {
        float: none;
        width: auto;
        border-right: 0;
        border-bottom: 1px solid var(--cl-border);
    }

    .threadPostContent {
        margin-left: 0;
        min-height: 0;
    }
}