:root {
    --theme-page: #fffdf7;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f6f8fb;
    --theme-text: #172033;
    --theme-muted: #5c6676;
    --theme-heading: #0575e5;
    --theme-border: #dfe7ef;
    --theme-primary: #0575e5;
    --theme-accent: #2acc9b;
    --theme-shadow: 0 12px 34px rgba(18, 35, 55, 0.12);
}

html[data-theme="dark"] {
    --theme-page: #0b1220;
    --theme-surface: #111b2e;
    --theme-surface-soft: #162238;
    --theme-text: #e8eef8;
    --theme-muted: #a9b6c8;
    --theme-heading: #7fc5ff;
    --theme-border: #2b3950;
    --theme-primary: #3d9dff;
    --theme-accent: #42d6aa;
    --theme-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
}

html,
body {
    background: var(--theme-page);
    color: var(--theme-text);
    transition: background-color 0.25s ease, color 0.25s ease;
}

.theme-switch {
    display: flex;
    align-items: center;
    margin-inline-start: 12px;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 30px;
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover,
.theme-toggle:focus {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.75);
    color: #ffffff;
    outline: none;
}

.theme-toggle i {
    font-size: 13px;
}

.theme-toggle-text {
    white-space: nowrap;
}

html[data-theme="dark"] .top_header {
    background: #0b5eaa;
    background: linear-gradient(90deg, #0b5eaa 0%, #118267 42%, #118267 58%, #0b5eaa 100%);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .page,
html[data-theme="dark"] .details-card {
    background: var(--theme-page) !important;
    color: var(--theme-text);
}

html[data-theme="dark"] .purple_b,
html[data-theme="dark"] footer,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .block,
html[data-theme="dark"] .card-content,
html[data-theme="dark"] .courses .block,
html[data-theme="dark"] .registeredcourses .row,
html[data-theme="dark"] .page .row.border,
html[data-theme="dark"] .profile .block,
html[data-theme="dark"] .profile .tab-content,
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .table,
html[data-theme="dark"] .cert,
html[data-theme="dark"] .login .nav-pills,
html[data-theme="dark"] .login .tab-content,
html[data-theme="dark"] .course-essentials.bg-white,
html[data-theme="dark"] .course-essentials,
html[data-theme="dark"] .chat-container,
html[data-theme="dark"] .chat-footer {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border);
}

html[data-theme="dark"] .chat-body,
html[data-theme="dark"] .outgoing,
html[data-theme="dark"] .message.outgoing,
html[data-theme="dark"] #chat,
html[data-theme="dark"] #messages li {
    background: var(--theme-surface-soft) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .newcourses {
    background: #123246;
}

html[data-theme="dark"] .courses .block form,
html[data-theme="dark"] .page-header.profile-header,
html[data-theme="dark"] .course-essentials .title,
html[data-theme="dark"] .course-essentials .register,
html[data-theme="dark"] .register {
    background: #0f6fa8 !important;
}

html[data-theme="dark"] .newcourses .block .cat,
html[data-theme="dark"] .courses .block .badge-primary,
html[data-theme="dark"] .registeredcourses .cat .btn,
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .nav-pills .nav-link.active,
html[data-theme="dark"] .nav-pills .show > .nav-link,
html[data-theme="dark"] .page-item.active .page-link {
    background: var(--theme-accent) !important;
    border-color: var(--theme-accent) !important;
    color: #07111d !important;
}

html[data-theme="dark"] .card-content,
html[data-theme="dark"] .courses .block,
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .modal-content {
    box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] a,
html[data-theme="dark"] a:hover,
html[data-theme="dark"] .title,
html[data-theme="dark"] .navbar-dark .navbar-nav .nav-link,
html[data-theme="dark"] footer p,
html[data-theme="dark"] .footer_block ul li a,
html[data-theme="dark"] .footer_block .contact span,
html[data-theme="dark"] .courses .block a,
html[data-theme="dark"] .nav-pills .nav-link,
html[data-theme="dark"] .pagination .page-link,
html[data-theme="dark"] .colorGreen {
    color: var(--theme-heading) !important;
}

html[data-theme="dark"] .navbar .nav-item:hover .nav-link,
html[data-theme="dark"] .newcourses header h4,
html[data-theme="dark"] .newcourses .btn,
html[data-theme="dark"] .newcourses .block .cat a,
html[data-theme="dark"] .newcourses .block .wrap,
html[data-theme="dark"] .courses .block .des,
html[data-theme="dark"] .profile-header .page-header_title,
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before,
html[data-theme="dark"] .login a,
html[data-theme="dark"] .language-switch a {
    color: #ffffff !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] .text,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-white p,
html[data-theme="dark"] .bg-white span,
html[data-theme="dark"] .bg-white li,
html[data-theme="dark"] .bg-white strong,
html[data-theme="dark"] .bg-white div,
html[data-theme="dark"] .block,
html[data-theme="dark"] .block p,
html[data-theme="dark"] .block span,
html[data-theme="dark"] .block li,
html[data-theme="dark"] .block strong,
html[data-theme="dark"] .course-essentials,
html[data-theme="dark"] .course-essentials p,
html[data-theme="dark"] .course-essentials span,
html[data-theme="dark"] .card-desc p,
html[data-theme="dark"] .card-desc h3,
html[data-theme="dark"] .single-contact h5,
html[data-theme="dark"] .single-contact p,
html[data-theme="dark"] .course-essentials li,
html[data-theme="dark"] .afterName,
html[data-theme="dark"] .colorGrey,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] label,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .bg-white h1,
html[data-theme="dark"] .bg-white h2,
html[data-theme="dark"] .bg-white h3,
html[data-theme="dark"] .bg-white h4,
html[data-theme="dark"] .bg-white h5,
html[data-theme="dark"] .bg-white h6,
html[data-theme="dark"] .block h1,
html[data-theme="dark"] .block h2,
html[data-theme="dark"] .block h3,
html[data-theme="dark"] .block h4,
html[data-theme="dark"] .block h5,
html[data-theme="dark"] .block h6,
html[data-theme="dark"] .course-essentials h1,
html[data-theme="dark"] .course-essentials h2,
html[data-theme="dark"] .course-essentials h3,
html[data-theme="dark"] .course-essentials h4,
html[data-theme="dark"] .course-essentials h5,
html[data-theme="dark"] .course-essentials h6 {
    color: #ffffff !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-mute,
html[data-theme="dark"] small,
html[data-theme="dark"] .card-desc p {
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .footer_block input {
    background: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .footer_block input::placeholder {
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] .search input,
html[data-theme="dark"] .courses .block form input {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .search input::placeholder,
html[data-theme="dark"] .courses .block form input::placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
}

html[data-theme="dark"] .search button,
html[data-theme="dark"] .single-contact i.fa {
    background: var(--theme-primary) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .dropdown-item {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .page-link:hover {
    background: var(--theme-surface-soft) !important;
    color: var(--theme-heading) !important;
}

html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .course-essentials li,
html[data-theme="dark"] .footer_block ul li,
html[data-theme="dark"] hr {
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
html[data-theme="dark"] .table-hover tbody tr:hover {
    background: var(--theme-surface-soft) !important;
}

html[data-theme="dark"] .btn-card {
    background: var(--theme-surface-soft) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .btn-card:hover,
html[data-theme="dark"] .btn-default:hover {
    background: var(--theme-primary) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .alert,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .pagination .page-link {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] img {
    filter: brightness(0.95);
}

html[data-theme="dark"] .navbar-brand img,
html[data-theme="dark"] footer img,
html[data-theme="dark"] .crt_logo img {
    filter: none;
}

@media (max-width: 767.98px) {
    .theme-switch {
        margin-top: 6px;
        margin-inline-start: 0;
    }

    .theme-toggle {
        min-height: 28px;
        padding: 4px 10px;
        font-size: 12px;
    }
}