/*
 * Brand logo: always fits its slot. The image keeps its own proportions (no stretching, no
 * squashing, no blur from forced sizes), is never larger than the slot and scales down on phones.
 * Loaded by every layout (admin/instructor panel, student pages, login, course player).
 */
.brand-logo,
.topnav-logo img,
.navbar-brand.logo img,
a.logo img,
.navbar-brand img,
.footer-logo img,
.lms-login-logo img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain;
    object-position: left center;
    image-rendering: auto;
}

/* top bar of the instructor / admin panel */
.topnav-logo {
    display: inline-flex;
    align-items: center;
    height: 70px;
    line-height: 1;
}
.topnav-logo img {
    max-height: 42px;
    max-width: 180px !important;
}

/* student pages and login */
.navbar-brand.logo img,
a.logo img {
    max-height: 46px;
    max-width: 190px !important;
}

/* course player bar (dark, 65px high) */
.navbar.fixed-top .navbar-brand img {
    max-height: 40px;
    max-width: 170px !important;
}

@media (max-width: 767px) {
    .topnav-logo img { max-height: 34px; max-width: 130px !important; }
    .navbar-brand.logo img, a.logo img { max-height: 38px; max-width: 150px !important; }
}

/* ---------------------------------------------------------------------------------------------
 * Colour scheme: teal-green on white.
 *   brand #0d9488  dark #0f766e  light #14b8a6  soft tint #f0fdfa
 * The old purple / coral / grey-blue values were replaced inside the vendor stylesheets; this block
 * sets the white page backgrounds and the dark chrome (top bar, side menu) and is loaded last.
 * --------------------------------------------------------------------------------------------- */
:root {
    --brand: #0d9488;
    --brand-dark: #0f766e;
    --brand-light: #14b8a6;
    --brand-soft: #f0fdfa;
    --bs-primary: #0d9488;
    --bs-primary-rgb: 13, 148, 136;
}

html, body, .wrapper, .content-page, .content { background-color: #ffffff !important; }

.card {
    background-color: #ffffff;
    border: 1px solid #e2eeec;
    box-shadow: 0 1px 3px rgba(15, 118, 110, .06);
}

/* ---- instructor / admin panel chrome: white, airy, teal accents ---- */
.topnav-navbar-dark,
.navbar-custom.topnav-navbar-dark {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2eeec;
    box-shadow: 0 2px 14px rgba(15, 118, 110, .07) !important;
}
.topnav-navbar-dark .topbar-right-menu .nav-link,
.topnav-navbar-dark .nav-user,
.topnav-navbar-dark .nav-user span,
.topnav-navbar-dark .account-user-name,
.topnav-navbar-dark .account-position,
.topnav-navbar-dark .notification-list .nav-link i,
.topnav-navbar-dark .button-menu-mobile { color: #334155 !important; }
.topnav-navbar-dark .nav-user { background-color: #f0fdfa !important; border: 1px solid #ccebe6 !important; border-radius: 999px; }
.topnav-navbar-dark .topbar-right-menu .nav-link:hover { color: var(--brand) !important; }

.left-side-menu {
    background: #ffffff !important;
    border: 1px solid #e2eeec;
    border-radius: 16px;
    box-shadow: 0 6px 28px rgba(15, 118, 110, .08);
    padding-bottom: 12px;
}
.left-side-menu .leftbar-user,
.leftbar-user {
    background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%) !important;
    border-bottom: 1px solid #e2eeec;
    border-radius: 16px 16px 0 0;
}
.leftbar-user a, .leftbar-user .leftbar-user-name, .leftbar-user span { color: #0f172a !important; }

.side-nav .side-nav-title { color: #94a3b8 !important; }
.side-nav .side-nav-link,
.side-nav-light .side-nav-link,
.left-side-menu-detached .side-nav-light .side-nav-link {
    color: #334155 !important;
    margin: 3px 12px;
    padding: 11px 16px;
    border-radius: 10px;
    font-weight: 500;
    background: transparent;
    box-shadow: none;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.side-nav .side-nav-link i { color: var(--brand); transition: color .18s ease; }
.side-nav .side-nav-link .menu-arrow { color: #94a3b8; }
.side-nav .side-nav-link:hover,
.side-nav .side-nav-link:focus {
    background: var(--brand-soft) !important;
    color: var(--brand-dark) !important;
}
/* selected item: one solid teal pill, white text */
.side-nav .side-nav-link.active,
.side-nav .side-nav-item.active > .side-nav-link,
.side-nav-light .side-nav-link.active,
.left-side-menu-detached .side-nav-light .side-nav-link.active {
    background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(13, 148, 136, .30);
}
.side-nav .side-nav-link.active i,
.side-nav .side-nav-item.active > .side-nav-link i,
.side-nav .side-nav-link.active .menu-arrow,
.side-nav .side-nav-item.active > .side-nav-link .menu-arrow { color: #ffffff !important; }
.side-nav .side-nav-item.active { background: transparent !important; }

/* sub menu */
.side-nav-second-level, .side-nav-third-level { background: transparent !important; }
.side-nav-second-level li a,
.side-nav-third-level li a,
.side-nav-light .side-nav-second-level li a,
.left-side-menu-detached .side-nav-light .side-nav-second-level li a {
    color: #475569 !important;
    margin: 1px 12px;
    padding: 8px 14px 8px 52px;
    border-radius: 8px;
    font-size: .9rem;
}
.side-nav-second-level li a:hover,
.side-nav-third-level li a:hover { color: var(--brand-dark) !important; background: var(--brand-soft); }
.side-nav-second-level li.active > a,
.side-nav-third-level li.active > a,
.side-nav-light .side-nav-second-level li.active > a,
.left-side-menu-detached .side-nav-light .side-nav-second-level li.active > a {
    color: var(--brand-dark) !important;
    background: #e6f7f4;
    font-weight: 600;
}
.badge.badge-danger, .side-nav .badge { border-radius: 999px; }

/* ---- modern surfaces: rounded cards, soft shadows, teal focus ---- */
.card { border-radius: 14px; }
.card-body { padding: 1.5rem; }
.form-control, .custom-select, .select2-container--default .select2-selection--single {
    border-radius: 10px; border-color: #d5e4e2; min-height: 40px;
}
.form-control:focus, .custom-select:focus {
    border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13, 148, 136, .18);
}
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary, .btn-success { box-shadow: 0 4px 12px rgba(13, 148, 136, .22); }
.btn-success { background-color: var(--brand-light); border-color: var(--brand-light); }
.btn-success:hover { background-color: var(--brand); border-color: var(--brand); }
.page-title { font-weight: 700; color: #0f172a; }
.page-title .title_icon { color: var(--brand); }
.dropdown-menu { border-radius: 12px; border: 1px solid #e2eeec; box-shadow: 0 10px 30px rgba(15, 118, 110, .12); }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { color: var(--brand); border-color: var(--brand); }
.nav-pills .nav-link.active { background-color: var(--brand); color: #fff; }
/* tables, tabs, links */
.table-striped tbody tr:nth-of-type(odd) { background-color: #f7fcfb; }
.table thead th { background-color: var(--brand-soft); border-bottom-color: #cdebe6; }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
.page-title-box, .bg-light { background-color: var(--brand-soft) !important; }

/* student pages and login */
.bread-crumb,
.bread-crumb.courses-details {
    background-image: none !important;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
}
.btn-primary, .btn-fill { background-color: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-fill:hover { background-color: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background-color: var(--brand); color: #fff; }

/* course player */
.navbar.bg-dark, .navbar.fixed-top.bg-dark { background-color: var(--brand-dark) !important; }

/* logo tile in the panel top bar: rounded, never a hard black square */
.topnav-logo img { border-radius: 10px; background: transparent; }
.visit_website h4 { line-height: 70px; }

/* ---- panel top bar: one row, everything vertically centred ---- */
.navbar-custom.topnav-navbar > .container-fluid {
    display: flex; align-items: center; flex-wrap: nowrap; gap: 14px; min-height: 70px; padding-left: 20px; padding-right: 20px;
}
.navbar-custom .topnav-logo { order: 1; display: inline-flex; align-items: center; height: 70px; margin: 0; padding: 0; line-height: 1; }
.navbar-custom .topnav-logo .topnav-logo-lg, .navbar-custom .topnav-logo .topnav-logo-sm { display: inline-flex; align-items: center; height: 100%; }
.navbar-custom .topnav-logo-sm { display: none !important; }
.navbar-custom .visit_website { order: 2; display: flex; align-items: center; height: 70px; margin: 0; }
.navbar-custom .visit_website h4 { float: none !important; margin: 0 !important; line-height: 1.2 !important; font-size: 1.15rem; }
.navbar-custom .topbar-right-menu { order: 3; margin: 0 0 0 auto !important; float: none !important; display: flex; align-items: center; gap: 4px; height: 70px; }
.navbar-custom .topbar-right-menu > li { display: flex; align-items: center; height: 70px; float: none; }
.navbar-custom .topbar-right-menu .nav-link { display: inline-flex; align-items: center; height: 70px; line-height: 1; padding: 0 10px; }
.navbar-custom .topbar-right-menu .nav-user { height: auto; padding: 6px 14px 6px 8px; }
.navbar-custom .button-menu-mobile { order: 0; }
@media (max-width: 767px) { .navbar-custom .visit_website { display: none; } }