/*
 * E4 - eLearning theme
 * Colours and typography follow exact4.hu: white surfaces, red-orange accent, Montserrat headings, Open Sans text.
 * Loaded after AdminLTE and site.css, so it overrides the old skin.
 */
:root {
    --e4-accent: #d6422a;
    --e4-accent-dark: #b5341f;
    --e4-accent-soft: #fbece9;
    --e4-ink: #2b2b2b;
    --e4-muted: #6b6f76;
    --e4-line: #e6e6e6;
    --e4-surface: #ffffff;
    --e4-canvas: #f6f6f4;
    --e4-sidebar: #ffffff;
    --e4-blue: #2ea3f2;
    --e4-radius: 6px;
}

/* ---------- Typography ---------- */
body,
.main-header .navbar,
.form-control,
.btn {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.box-title,
.content-header > h1,
.main-header .logo,
.sidebar-menu > li.header,
.small-box h3 {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .01em;
}

body {
    color: var(--e4-ink);
}

a {
    color: var(--e4-accent);
}

a:hover,
a:focus {
    color: var(--e4-accent-dark);
}

/* ---------- Page canvas ---------- */
body,
.wrapper,
.content-wrapper {
    background-color: var(--e4-canvas) !important;
}

.content-header > h1 {
    font-weight: 700;
    font-size: 22px;
}

/* ---------- Top bar ---------- */
.main-header .navbar,
.skin-blue-light .main-header .navbar {
    background-color: var(--e4-surface) !important;
    border-bottom: 1px solid var(--e4-line);
    box-shadow: none;
}

.main-header .logo,
.skin-blue-light .main-header .logo {
    background-color: var(--e4-surface) !important;
    color: var(--e4-ink) !important;
    border-bottom: 1px solid var(--e4-line);
    border-right: 1px solid var(--e4-line);
    font-weight: 800;
}

.main-header .logo:hover {
    background-color: var(--e4-surface) !important;
}

.main-header .logo i {
    color: var(--e4-accent);
}

.main-header .navbar .nav > li > a,
.main-header .navbar .sidebar-toggle,
.skin-blue-light .main-header .navbar .nav > li > a,
.skin-blue-light .main-header .navbar .sidebar-toggle {
    color: var(--e4-ink) !important;
}

.main-header .navbar .nav > li > a:hover,
.main-header .navbar .sidebar-toggle:hover,
.skin-blue-light .main-header .navbar .nav > li > a:hover,
.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
    background-color: var(--e4-accent-soft) !important;
    color: var(--e4-accent) !important;
}

/* ---------- Sidebar ---------- */
.main-sidebar,
.left-side,
.skin-blue-light .main-sidebar,
.skin-blue-light .left-side,
.skin-blue-light .wrapper {
    background-color: var(--e4-sidebar) !important;
}

.main-sidebar {
    border-right: 1px solid var(--e4-line);
}

.sidebar-menu > li.header,
.skin-blue-light .sidebar-menu > li.header {
    background: transparent !important;
    color: var(--e4-muted) !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sidebar-menu > li > a,
.skin-blue-light .sidebar-menu > li > a,
.skin-blue-light .sidebar-menu .treeview-menu > li > a {
    color: var(--e4-ink) !important;
    border-left: 3px solid transparent;
}

.skin-blue-light .sidebar-menu > li:hover > a,
.skin-blue-light .sidebar-menu > li.active > a,
.skin-blue-light .sidebar-menu > li.menu-open > a {
    background: var(--e4-accent-soft) !important;
    color: var(--e4-accent) !important;
    border-left-color: var(--e4-accent);
}

.skin-blue-light .sidebar-menu .treeview-menu,
.skin-blue-light .sidebar-menu > li > .treeview-menu {
    background: #fafafa !important;
}

.skin-blue-light .sidebar-menu .treeview-menu > li.active > a,
.skin-blue-light .sidebar-menu .treeview-menu > li > a:hover {
    color: var(--e4-accent) !important;
    font-weight: 600;
}

.sidebar-menu i {
    color: var(--e4-muted);
}

.sidebar-menu li.active > a i,
.sidebar-menu li > a:hover i {
    color: var(--e4-accent);
}

/* ---------- Boxes / cards ---------- */
.box,
.info-box,
.small-box,
.nav-tabs-custom {
    border-radius: var(--e4-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.box {
    border-top: 3px solid var(--e4-line);
}

.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger {
    border-top-color: var(--e4-accent);
}

.box-header.with-border {
    border-bottom-color: var(--e4-line);
}

/* Dashboard tiles: neutral white cards with an accent icon instead of loud gradients */
.small-box,
.small-box[class*="bg-"] {
    background: var(--e4-surface) !important;
    color: var(--e4-ink) !important;
    border: 1px solid var(--e4-line);
}

.small-box h3,
.small-box p {
    color: var(--e4-ink) !important;
}

.small-box .icon {
    color: var(--e4-accent) !important;
    opacity: .25;
}

.small-box > .small-box-footer {
    background: var(--e4-accent-soft) !important;
    color: var(--e4-accent) !important;
    font-weight: 600;
}

.small-box > .small-box-footer:hover {
    background: var(--e4-accent) !important;
    color: #fff !important;
}

/* Editor header tiles used on list and edit pages */
.info-box.info-box-editor,
.info-box[class*="bg-"] {
    background: var(--e4-surface) !important;
    color: var(--e4-ink) !important;
    border-left: 4px solid var(--e4-accent);
}

.info-box.info-box-editor .info-box-icon,
.info-box[class*="bg-"] .info-box-icon {
    background: var(--e4-accent-soft) !important;
    color: var(--e4-accent) !important;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--e4-radius);
    font-weight: 600;
    box-shadow: none;
}

.btn-primary,
.btn-info,
.btn-success,
.dt-button,
button.dt-button,
a.dt-button {
    background: var(--e4-accent) !important;
    border-color: var(--e4-accent) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.dt-button:hover {
    background: var(--e4-accent-dark) !important;
    border-color: var(--e4-accent-dark) !important;
    color: #fff !important;
}

.btn-default {
    background: var(--e4-surface);
    border-color: #cfcfcf;
    color: var(--e4-ink);
}

.btn-default:hover,
.btn-default:focus {
    background: var(--e4-accent-soft);
    border-color: var(--e4-accent);
    color: var(--e4-accent);
}

.btn-warning {
    background: #fff;
    border-color: #cfcfcf;
    color: var(--e4-ink);
}

.btn-warning:hover,
.btn-warning:focus {
    background: #f3f3f3;
    border-color: #b9b9b9;
    color: var(--e4-ink);
}

/* ---------- Forms, tables, misc ---------- */
.form-control {
    border-radius: var(--e4-radius);
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--e4-accent) !important;
    box-shadow: 0 0 0 2px var(--e4-accent-soft);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--e4-accent) !important;
    border-color: var(--e4-accent) !important;
    color: #fff !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
    background-color: var(--e4-accent) !important;
    border-color: var(--e4-accent) !important;
}

.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--e4-accent);
}

.label-primary,
.bg-light-blue,
.bg-aqua,
.bg-blue {
    background-color: var(--e4-accent) !important;
}

.main-footer {
    background: var(--e4-surface);
    border-top: 1px solid var(--e4-line);
    color: var(--e4-muted);
}

/* ---------- Login / register ---------- */
.login-page,
.register-page {
    background: var(--e4-canvas) !important;
}

.login-logo a,
.register-logo a {
    color: var(--e4-ink) !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}

.login-box-body,
.register-box-body {
    border-radius: var(--e4-radius);
    border-top: 4px solid var(--e4-accent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

/* ---------- Landing page ---------- */
.e4-landing {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--e4-surface);
    color: var(--e4-ink);
    font-family: 'Open Sans', Arial, sans-serif;
}

.e4-landing-header {
    padding: 20px 32px;
    border-bottom: 1px solid var(--e4-line);
}

.e4-logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
}

.e4-logo-mark {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 4px;
    border: 2px solid var(--e4-accent);
    color: var(--e4-accent);
    font-weight: 800;
}

.e4-landing-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 16px;
    background: linear-gradient(180deg, #fff 0%, var(--e4-canvas) 100%);
}

.e4-landing-title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 8vw, 88px);
    line-height: 1.05;
}

.e4-landing-title span {
    color: var(--e4-accent);
}

.e4-landing-subtitle {
    max-width: 640px;
    margin: 20px auto 32px;
    color: var(--e4-muted);
    font-size: 18px;
}

.e4-landing-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.e4-landing .btn {
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid var(--e4-accent);
    border-radius: var(--e4-radius);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 14px;
}

.e4-landing .btn-primary {
    background: var(--e4-accent);
    color: #fff;
}

.e4-landing .btn-primary:hover {
    background: var(--e4-accent-dark);
}

.e4-landing .btn-default {
    background: #fff;
    color: var(--e4-accent);
}

.e4-landing .btn-default:hover {
    background: var(--e4-accent-soft);
}

.e4-landing-footer {
    padding: 16px 32px;
    color: var(--e4-muted);
    font-size: 13px;
    border-top: 1px solid var(--e4-line);
}

/* ---------- Finder pages header (replaces the old stock photo) ---------- */
.course-finder-header {
    background: linear-gradient(120deg, var(--e4-accent) 0%, var(--e4-accent-dark) 100%) !important;
    color: #fff;
}