/*
    2026 admin redesign ("Option B — light workspace").

    Loaded after style.css and the Element UI stylesheet, so plain cascade order
    lets these rules win without touching the INSPINIA theme underneath. The
    palette comes from the current tprofile logo: gradient #c15589 -> #75336d,
    primary purple #8b3a77, charcoal #393939.
*/

:root {
    --tp-primary: #8b3a77;
    --tp-primary-dark: #75336d;
    --tp-primary-soft: #f3e9f1;
    --tp-gradient: linear-gradient(135deg, #c15589, #75336d);
    --tp-ink: #26222b;
    --tp-text: #3d3a40;
    --tp-text-soft: #6f6879;
    --tp-text-faint: #a49dad;
    --tp-border: #e9e6ec;
    --tp-border-input: #e2dee6;
    --tp-surface: #ffffff;
    --tp-surface-raised: #fbfafc;
    --tp-page-bg: #f7f6f8;
}

/* ------------------------------------------------------------------ */
/* Foundation                                                          */
/* ------------------------------------------------------------------ */

body {
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--tp-surface-raised); /* shows through as the sidebar */
    color: var(--tp-text);
}

a {
    color: var(--tp-primary);
}

    a:hover,
    a:focus {
        color: var(--tp-primary-dark);
    }

.text-navy {
    color: var(--tp-primary) !important;
}

#page-wrapper,
.gray-bg {
    background-color: var(--tp-page-bg);
}

/* ------------------------------------------------------------------ */
/* Sidebar                                                             */
/* ------------------------------------------------------------------ */

.navbar-static-side {
    background: var(--tp-surface-raised);
    border-right: 1px solid var(--tp-border);
    /* INSPINIA pins the sidebar at 2001 (several body-class variants), one above
       Element UI's dialog backdrop at 2000, so it stayed bright behind modals.
       1030 keeps it above page content but under every popup layer. */
    z-index: 1030 !important;
}

.nav-header,
body.mini-navbar .nav-header {
    background-color: var(--tp-surface-raised);
    background-image: none; /* INSPINIA paints a teal pattern here, teal again in mini mode */
}

.nav-header {
    padding: 20px 18px 10px 18px;
}

.tp-sidebar-logo img {
    width: 132px;
    display: block;
}

/* Light/dark logo variants (sidebar and top bar): img-scoped so they outrank
   the container img rule above */
img.tp-logo-ondark {
    display: none;
}

.tp-dark img.tp-logo-onlight {
    display: none;
}

.tp-dark img.tp-logo-ondark {
    display: block;
}

/* Section labels between nav groups */
.nav li.tp-nav-section {
    padding: 14px 20px 4px;
    color: var(--tp-text-faint);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.mini-navbar .tp-nav-section {
    display: none;
}

.mini-navbar .tp-sidebar-logo {
    display: none;
}

.nav > li > a {
    color: #56505e;
    font-weight: 500;
    padding: 7px 12px;
    margin: 1px 10px;
    border-radius: 6px;
    font-size: 13px;
}

    .nav > li > a i {
        width: 16px;
        text-align: center;
        color: var(--tp-text-faint);
        margin-right: 4px;
    }

.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus {
    background-color: #f1eff3;
    color: var(--tp-ink);
}

.nav > li.active {
    border-left: none;
    background: transparent;
}

    .nav > li.active > a {
        background: var(--tp-primary-soft);
        color: var(--tp-primary);
        font-weight: 600;
    }

        .nav > li.active > a i {
            color: var(--tp-primary);
        }

/* Collapsed (mini) sidebar keeps the mark visible */
.logo-element {
    background: var(--tp-surface-raised);
    padding: 14px 0;
}

    .logo-element img {
        width: 28px;
        display: block;
        margin: 0 auto;
    }

.mini-navbar .nav > li > a {
    margin: 1px 6px;
}

/* ------------------------------------------------------------------ */
/* Top navbar                                                          */
/* ------------------------------------------------------------------ */

.row.border-bottom {
    border-bottom: 1px solid var(--tp-border);
}

.navbar-static-top {
    background: var(--tp-surface);
}

/* The hamburger uses .btn-primary in markup; keep it a quiet ghost button */
.navbar-minimalize.btn-primary {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border-input);
    color: var(--tp-text-soft);
}

    .navbar-minimalize.btn-primary:hover,
    .navbar-minimalize.btn-primary:focus,
    .navbar-minimalize.btn-primary:active {
        background: var(--tp-surface-raised);
        border-color: var(--tp-border-input);
        color: var(--tp-ink);
    }

/* Compact, evenly spaced control cluster (INSPINIA pads each link 20px and
   adds a 40px margin after the last item, which reads as random gaps) */
.navbar-top-links {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* below 768px the ul is not floated, so keep controls right */
    min-height: 50px;
    margin: 0;
    gap: 2px;
    padding-right: 10px;
}

    .navbar-top-links li {
        display: flex;
        align-items: center;
    }

        .navbar-top-links li:last-child {
            margin-right: 0;
        }

        .navbar-top-links li a,
        .navbar-top-links li .btn-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 10px;
            border-radius: 7px;
            font-size: 12.5px;
            min-height: 0;
        }

            .navbar-top-links li a:hover,
            .navbar-top-links li .btn-link:hover {
                background: #f1eff3;
                text-decoration: none;
            }

.tp-dark .navbar-top-links li a:hover,
.tp-dark .navbar-top-links li .btn-link:hover {
    background: #2c2534;
}

.tp-topnav-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 6px;
    color: var(--tp-text);
    font-size: 12.5px;
}

    .tp-topnav-user .fa-angle-down {
        color: var(--tp-text-faint);
    }

/* User dropdown menu */
.tp-user-dropdown {
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(43, 36, 49, 0.14);
    padding: 6px;
    min-width: 180px;
    background: var(--tp-surface);
}

    .tp-user-dropdown > li > a,
    .tp-user-dropdown > li form .btn-link {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        text-align: left;
        padding: 8px 10px;
        border-radius: 6px;
        color: var(--tp-text);
        font-size: 13px;
    }

        .tp-user-dropdown > li > a:hover,
        .tp-user-dropdown > li form .btn-link:hover {
            background: #f1eff3;
            color: var(--tp-ink);
            text-decoration: none;
        }

        .tp-user-dropdown > li > a i,
        .tp-user-dropdown > li form .btn-link i {
            width: 16px;
            text-align: center;
            color: var(--tp-text-faint);
        }

    .tp-user-dropdown > li.divider {
        margin: 5px 4px;
        background-color: var(--tp-border);
    }

.tp-dark .tp-user-dropdown > li > a:hover,
.tp-dark .tp-user-dropdown > li form .btn-link:hover {
    background: #2c2534;
}

/* ------------------------------------------------------------------ */
/* Dashboard                                                           */
/* ------------------------------------------------------------------ */

.tp-dash-head {
    padding: 22px 0 4px;
}

    .tp-dash-head h1 {
        margin: 0 0 4px;
        font-size: 22px;
        font-weight: 650;
        color: var(--tp-ink);
        letter-spacing: -0.2px;
    }

    .tp-dash-head p {
        color: var(--tp-text-faint);
        margin: 0;
    }

.tp-dash-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.tp-dash-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    padding: 16px 18px;
    color: var(--tp-text);
}

    .tp-dash-tile:hover {
        border-color: #cfc9d5;
        text-decoration: none;
    }

.tp-dash-tile-label {
    color: var(--tp-text-soft);
    font-size: 12px;
    font-weight: 600;
}

.tp-dash-tile-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--tp-ink);
    letter-spacing: -0.5px;
}

.tp-dash-tile-hint {
    color: var(--tp-text-faint);
    font-size: 12px;
}

.tp-dash-columns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    margin-bottom: 24px;
}

.tp-dash-card {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    padding: 16px 18px;
}

    .tp-dash-card h4 {
        margin: 0 0 12px;
        font-size: 14px;
        font-weight: 650;
        color: var(--tp-ink);
    }

.tp-dash-table {
    margin-bottom: 0;
}

.tp-dash-empty {
    color: var(--tp-text-faint);
    margin: 0;
}

.tp-dash-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .tp-dash-links a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border-radius: 7px;
        color: var(--tp-text);
        font-weight: 550;
    }

        .tp-dash-links a:hover {
            background: #f1eff3;
            text-decoration: none;
            color: var(--tp-ink);
        }

        .tp-dash-links a i {
            width: 16px;
            text-align: center;
            color: var(--tp-text-faint);
        }

.tp-dark .tp-dash-links a:hover {
    background: #2c2534;
}

@media (max-width: 768px) {
    .tp-dash-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tp-dash-columns {
        grid-template-columns: 1fr;
    }
}

/* Mobile-only brand in the top bar (the sidebar logo is hidden on phones) */
.navbar-static-top {
    position: relative;
}

.tp-topnav-logo {
    display: none;
}

@media (max-width: 768px) {
    .tp-topnav-logo {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

        .tp-topnav-logo img {
            height: 26px;
        }
}

.tp-topnav-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tp-gradient);
    color: #ffffff;
    font-weight: 700;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.navbar-top-links li a,
.navbar-top-links li .btn-link {
    color: var(--tp-text-soft);
}

    .navbar-top-links li a:hover,
    .navbar-top-links li .btn-link:hover {
        color: var(--tp-ink);
        background: transparent;
    }

/* ------------------------------------------------------------------ */
/* Page heading and footer                                             */
/* ------------------------------------------------------------------ */

/* INSPINIA caps every page at a silly fixed minimum that forces short pages
   to scroll into empty space */
#page-wrapper {
    min-height: calc(100vh - 60px);
}

.page-heading,
.wrapper.border-bottom.white-bg.page-heading,
.row.wrapper.border-bottom.white-bg.page-heading {
    background: transparent;
    padding-top: 18px;
    padding-bottom: 14px;
}

/* Heading rows carry .border-bottom too; INSPINIA's .border-bottom is
   !important, so this needs !important to remove the stray full-width line
   under every page title */
.row.page-heading,
.wrapper.page-heading {
    border-bottom: none !important;
}

    .page-heading h2 {
        color: var(--tp-ink);
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -0.2px;
    }

.breadcrumb {
    background: transparent;
    font-size: 12px;
}

    .breadcrumb > li + li:before {
        color: #cfc9d5;
    }

    .breadcrumb > .active {
        color: var(--tp-text-soft);
    }

.footer {
    background: transparent;
    border-top: 1px solid var(--tp-border);
    color: var(--tp-text-faint);
}

/* ------------------------------------------------------------------ */
/* Cards (INSPINIA iboxes)                                             */
/* ------------------------------------------------------------------ */

.ibox {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 10px;
    overflow: hidden;
}

.ibox-title {
    background: var(--tp-surface);
    border: none;
    border-bottom: 1px solid #efedf1;
    border-radius: 10px 10px 0 0;
    color: var(--tp-ink);
}

    .ibox-title h5 {
        color: var(--tp-ink);
        font-weight: 600;
    }

.ibox-content {
    background: var(--tp-surface);
    border: none;
}

/* Grey filter blocks: retire the box-in-box banner look — toolbars and form
   groups sit flush inside their card instead */
.gray-light-block,
.padding-block.gray-light-block {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.el-alert {
    border-radius: 8px;
}

/* INSPINIA's decorative card tools: the collapse chevron and the hide-card
   cross serve no purpose here — keep only functional tools (e.g. dropdowns) */
.ibox-tools .collapse-link,
.ibox-tools .close-link {
    display: none;
}

/* Standard list-page toolbar: search grows, actions stay inline, wraps
   cleanly on small screens */
.tp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.tp-toolbar-search {
    flex: 1 1 220px;
    max-width: 320px;
    width: auto;
}

/* Inputs and buttons in a toolbar share one height and no stray margins,
   so their tops always line up */
.tp-toolbar > .form-control,
.tp-toolbar > .btn {
    margin-top: 0;
    margin-bottom: 0;
    height: 34px;
}

.tp-toolbar-spacer {
    flex: 1;
}

    .tp-toolbar-spacer + .btn {
        margin-left: auto;
    }

/* ------------------------------------------------------------------ */
/* Bootstrap controls                                                  */
/* ------------------------------------------------------------------ */

.btn {
    border-radius: 7px;
}

.btn-primary {
    background-color: var(--tp-primary);
    border-color: var(--tp-primary);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .btn-primary:active:focus,
    .btn-primary:active:hover,
    .open .dropdown-toggle.btn-primary {
        background-color: var(--tp-primary-dark);
        border-color: var(--tp-primary-dark);
    }

    .btn-primary.disabled,
    .btn-primary.disabled:hover,
    .btn-primary[disabled],
    .btn-primary[disabled]:hover {
        background-color: #b989ad;
        border-color: #b989ad;
    }

.btn-white,
.btn-default {
    border-color: var(--tp-border-input);
    color: var(--tp-text);
}

    .btn-white:hover,
    .btn-default:hover {
        border-color: #cfc9d5;
        color: var(--tp-ink);
    }

.btn-link {
    color: var(--tp-primary);
}

    .btn-link:hover {
        color: var(--tp-primary-dark);
    }

.label-primary,
.badge-primary {
    background-color: var(--tp-primary);
}

.form-control {
    border-color: var(--tp-border-input);
    border-radius: 7px;
}

    .form-control:focus {
        border-color: var(--tp-primary);
        box-shadow: 0 0 0 2px rgba(139, 58, 119, 0.12);
    }

/* Views put .form-control on Element component WRAPPERS, drawing a bordered
   box around the component's own bordered input — neutralise the wrapper */
.el-input.form-control,
.el-select.form-control,
.el-autocomplete.form-control,
.el-date-editor.form-control {
    padding: 0;
    border: none;
    background: transparent;
    height: auto;
    box-shadow: none;
}

/* Bootstrap tables */
.table > thead > tr > th {
    border-bottom: 1px solid var(--tp-border);
    color: var(--tp-text-faint);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.table > tbody > tr > td {
    border-top: 1px solid #f4f2f6;
    padding: 10px 8px;
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--tp-surface-raised);
}

/* ------------------------------------------------------------------ */
/* Tabs (Bootstrap nav-tabs, INSPINIA tabs-container)                  */
/* ------------------------------------------------------------------ */

.nav-tabs {
    border-bottom: 1px solid var(--tp-border);
}

    .nav-tabs > li > a,
    .tabs-container .nav-tabs > li > a {
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        background: transparent;
        color: var(--tp-text-soft);
        font-weight: 500;
        padding: 9px 4px;
        margin: 0 18px 0 0;
    }

    .nav-tabs > li > a:hover,
    .nav-tabs > li > a:focus,
    .tabs-container .nav-tabs > li > a:hover,
    .tabs-container .nav-tabs > li > a:focus {
        background: transparent;
        border-color: transparent;
        border-bottom-color: var(--tp-border-input);
        color: var(--tp-ink);
    }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus,
    .tabs-container .nav-tabs > li.active > a,
    .tabs-container .nav-tabs > li.active > a:hover,
    .tabs-container .nav-tabs > li.active > a:focus {
        border: none;
        border-bottom: 2px solid var(--tp-primary);
        background: transparent;
        color: var(--tp-primary);
        font-weight: 600;
    }

    .nav-tabs > li.disabled > a,
    .nav-tabs > li.disabled > a:hover {
        color: #c9c3d0;
        border-bottom-color: transparent;
    }

.tabs-container .panel-body {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 20px;
}

/* Bootstrap modals */
.modal-content {
    border-radius: 12px;
}

/* ------------------------------------------------------------------ */
/* Element UI                                                          */
/* ------------------------------------------------------------------ */

/* Dialogs */
.el-dialog {
    max-width: 94vw;
    border-radius: 12px;
}

.el-dialog__header {
    padding: 18px 24px 12px;
}

.el-dialog__title {
    font-size: 16px;
    font-weight: 650;
    color: var(--tp-ink);
}

.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
    color: var(--tp-primary);
}

.el-dialog__body {
    padding: 12px 24px 20px;
}

.el-dialog__footer {
    padding: 12px 24px 20px;
}

/* Dialog backdrop: plum-tinted, dims everything including the sidebar */
.v-modal {
    background: #2b2431;
    opacity: 0.55;
}

.el-button--primary {
    background-color: var(--tp-primary);
    border-color: var(--tp-primary);
}

    .el-button--primary:hover,
    .el-button--primary:focus {
        background-color: var(--tp-primary-dark);
        border-color: var(--tp-primary-dark);
    }

    .el-button--primary.is-disabled,
    .el-button--primary.is-disabled:hover {
        background-color: #b989ad;
        border-color: #b989ad;
    }

.el-button--text {
    color: var(--tp-primary);
}

    .el-button--text:hover,
    .el-button--text:focus {
        color: var(--tp-primary-dark);
    }

.el-button:hover,
.el-button:focus {
    color: var(--tp-primary);
    border-color: #d8bcd0;
    background-color: var(--tp-primary-soft);
}

.el-button--primary:hover,
.el-button--primary:focus {
    color: #ffffff;
}

.el-button--danger:hover,
.el-button--danger:focus {
    color: #ffffff;
    background-color: #f78989;
    border-color: #f78989;
}

.el-input__inner:focus,
.el-textarea__inner:focus,
.el-select .el-input.is-focus .el-input__inner {
    border-color: var(--tp-primary);
}

.el-select-dropdown__item.selected {
    color: var(--tp-primary);
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner {
    background-color: var(--tp-primary);
    border-color: var(--tp-primary);
}

.el-checkbox__input.is-checked + .el-checkbox__label,
.el-radio__input.is-checked + .el-radio__label {
    color: var(--tp-primary);
}

.el-switch.is-checked .el-switch__core {
    background-color: var(--tp-primary);
    border-color: var(--tp-primary);
}

.el-tabs__item.is-active,
.el-tabs__item:hover {
    color: var(--tp-primary);
}

.el-tabs__active-bar {
    background-color: var(--tp-primary);
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: var(--tp-primary);
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: var(--tp-primary);
}

.el-table th,
.el-table thead {
    background-color: var(--tp-surface-raised);
    color: var(--tp-text-faint);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.el-table td {
    color: var(--tp-text);
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #faf8fb;
}

.el-tag {
    border-radius: 10px;
}

.el-progress-bar__inner {
    background-color: var(--tp-primary);
}

.el-loading-spinner .path {
    stroke: var(--tp-primary);
}

.el-date-table td.today span {
    color: var(--tp-primary);
}

.el-date-table td.current:not(.disabled) span {
    background-color: var(--tp-primary);
}

/* ------------------------------------------------------------------ */
/* Collapsed sidebar (desktop): centred icons with name tooltips       */
/* ------------------------------------------------------------------ */

body.mini-navbar:not(.body-small) #side-menu > li > a {
    text-align: center;
    padding: 11px 0;
    margin: 1px 8px;
}

    body.mini-navbar:not(.body-small) #side-menu > li > a i {
        margin-right: 0;
        width: auto;
        font-size: 15px;
    }

/* The hidden nav-label doubles as a hover tooltip beside the rail */
body.mini-navbar:not(.body-small) #side-menu > li {
    position: relative;
}

body.mini-navbar:not(.body-small) #side-menu > li:hover > a .nav-label {
    display: block;
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: #2b2431;
    color: #ffffff;
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(43, 36, 49, 0.25);
    pointer-events: none;
    z-index: 1050;
}

/* ------------------------------------------------------------------ */
/* Small screens                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
    /* The sidebar becomes a drawer: hidden until the hamburger opens it,
       then a full-width labelled panel over the content (INSPINIA's default
       leaves the 220px sidebar overlapping the page on phones). */
    body.body-small .navbar-static-side {
        display: none;
    }

    body.body-small.mini-navbar .navbar-static-side {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 248px;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 0 40px rgba(43, 36, 49, 0.35);
    }

    body.body-small.mini-navbar .nav-label,
    body.body-small.mini-navbar .navbar-default .nav li a span {
        display: inline;
    }

    body.body-small.mini-navbar .tp-nav-section {
        display: block;
    }

    body.body-small.mini-navbar .tp-sidebar-logo {
        display: block;
    }

    body.body-small.mini-navbar .logo-element {
        display: none;
    }

    /* INSPINIA zeroes the header padding in mini mode; the drawer needs it back */
    body.body-small.mini-navbar .nav-header {
        padding: 20px 18px 10px 18px;
    }

    body.body-small #page-wrapper {
        margin: 0;
        padding: 0 10px;
    }

    /* Bootstrap rows pull -15px each side; with the 10px page padding above
       the header bands hung 5px off both viewport edges */
    body.body-small #page-wrapper > .row.border-bottom,
    body.body-small .row.page-heading {
        margin-left: -10px;
        margin-right: -10px;
    }

    /* Keep the title aligned with the cards below after the margin change */
    body.body-small .row.page-heading {
        padding-left: 0;
        padding-right: 0;
    }

    .wrapper {
        padding: 0 6px;
    }

    /* Wide tables scroll inside their card instead of stretching the page */
    .ibox-content,
    .tabs-container .panel-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tab strips scroll horizontally instead of wrapping */
    .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .nav-tabs > li,
        .tabs-container .nav-tabs > li {
            float: none;
            flex: 0 0 auto;
        }

            .nav-tabs > li > a {
                white-space: nowrap;
            }

    /* Keep the avatar, drop the long email text */
    .tp-topnav-name {
        display: none;
    }

    /* Element dialogs become full-screen sheets on phones (width is set
       inline per dialog, hence the important) */
    .el-dialog {
        width: 100vw !important;
        max-width: none;
        margin: 0 !important;
        min-height: 100vh;
        border-radius: 0;
    }

    .el-dialog__wrapper {
        -webkit-overflow-scrolling: touch;
    }

    .el-dialog__footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    /* Left-railed tab sets (e.g. the brand editor) flip to a horizontal,
       scrollable tab strip — a vertical rail has no room at phone width */
    .el-dialog .el-tabs--left > .el-tabs__header.is-left {
        float: none;
        width: 100%;
        margin: 0 0 14px;
        border-bottom: 1px solid var(--tp-border);
    }

    .el-dialog .el-tabs--left .el-tabs__nav-wrap.is-left {
        margin-right: 0;
        padding: 0;
    }

    .el-dialog .el-tabs--left .el-tabs__nav-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .el-dialog .el-tabs--left .el-tabs__nav.is-left {
        float: none;
        display: flex;
        width: max-content;
    }

    .el-dialog .el-tabs--left .el-tabs__item.is-left {
        text-align: center;
        padding: 0 14px;
        white-space: nowrap;
    }

    .el-dialog .el-tabs--left .el-tabs__active-bar.is-left {
        display: none;
    }

    .footer {
        position: static;
    }
}

/* ------------------------------------------------------------------ */
/* Dark theme (html.tp-dark, toggled from the top navbar)              */
/* ------------------------------------------------------------------ */

.tp-dark {
    --tp-primary: #9d4a86;
    --tp-primary-dark: #b25f9b; /* hover lightens on a dark ground */
    --tp-primary-soft: #372030;
    --tp-ink: #f2eef5;
    --tp-text: #d9d4de;
    --tp-text-soft: #a79fb0;
    --tp-text-faint: #7d7488;
    --tp-border: #363040;
    --tp-border-input: #423a4d;
    --tp-surface: #221d27;
    --tp-surface-raised: #282230;
    --tp-page-bg: #1a161e;
}

    /* Theme toggle icon: moon in light mode, sun in dark mode */
    .tp-theme-icon-light {
        display: none;
    }

    .tp-dark .tp-theme-icon-dark {
        display: none;
    }

    .tp-dark .tp-theme-icon-light {
        display: inline;
    }

    .tp-dark .nav > li.active > a {
        color: #d8a2c6;
    }

        .tp-dark .nav > li.active > a i {
            color: #d8a2c6;
        }

    .tp-dark .navbar-default .nav > li > a:hover,
    .tp-dark .navbar-default .nav > li > a:focus {
        background-color: #2c2534;
    }

    .tp-dark .form-control {
        background: #1c1821;
        color: var(--tp-text);
    }

    .tp-dark .table > tbody > tr > td {
        border-top-color: #2e2837;
    }

    .tp-dark .btn-white,
    .tp-dark .btn-default {
        background: #2a2432;
        color: var(--tp-text);
    }

    .tp-dark .modal-content,
    .tp-dark .el-dialog,
    .tp-dark .el-message-box,
    .tp-dark .el-select-dropdown,
    .tp-dark .el-dropdown-menu,
    .tp-dark .el-picker-panel {
        background: var(--tp-surface);
        border-color: var(--tp-border);
        color: var(--tp-text);
    }

    .tp-dark .el-input__inner,
    .tp-dark .el-textarea__inner,
    .tp-dark .el-checkbox__inner,
    .tp-dark .el-radio__inner {
        background: #1c1821;
        border-color: var(--tp-border-input);
        color: var(--tp-text);
    }

    .tp-dark .el-checkbox__input.is-checked .el-checkbox__inner,
    .tp-dark .el-radio__input.is-checked .el-radio__inner {
        background-color: var(--tp-primary);
        border-color: var(--tp-primary);
    }

    .tp-dark .el-select-dropdown__item {
        color: var(--tp-text-soft);
    }

        .tp-dark .el-select-dropdown__item.hover,
        .tp-dark .el-select-dropdown__item:hover {
            background: var(--tp-surface-raised);
        }

    .tp-dark .el-table,
    .tp-dark .el-table__expanded-cell,
    .tp-dark .el-table tr {
        background: var(--tp-surface);
    }

    .tp-dark .el-table td,
    .tp-dark .el-table th.is-leaf {
        border-bottom-color: #2e2837;
    }

    .tp-dark .el-table::before {
        background: #2e2837;
    }

    .tp-dark .el-table--enable-row-hover .el-table__body tr:hover > td {
        background: #2c2534;
    }

    .tp-dark .el-tabs__item {
        color: var(--tp-text-soft);
    }

        .tp-dark .el-tabs__item.is-active {
            color: var(--tp-primary-dark);
        }

    .tp-dark .el-tabs__nav-wrap::after {
        background-color: var(--tp-border);
    }

    .tp-dark .el-pagination.is-background .el-pager li {
        background: #2a2432;
        color: var(--tp-text-soft);
    }

        .tp-dark .el-pagination.is-background .el-pager li:not(.disabled).active {
            background: var(--tp-primary);
            color: #ffffff;
        }

    .tp-dark .el-pagination.is-background .btn-prev,
    .tp-dark .el-pagination.is-background .btn-next {
        background: #2a2432;
        color: var(--tp-text-soft);
    }

    .tp-dark .el-loading-mask {
        background: rgba(26, 22, 30, 0.8);
    }

    /* Alerts: Element and Bootstrap ship light-only banner colours */
    .tp-dark .el-alert--info.is-light {
        background: #2a2432;
        color: var(--tp-text-soft);
    }

    .tp-dark .el-alert--warning.is-light {
        background: #38301c;
        color: #d9a94a;
    }

    .tp-dark .el-alert--success.is-light {
        background: #1e3428;
        color: #58b985;
    }

    .tp-dark .el-alert--error.is-light {
        background: #3a2226;
        color: #e07878;
    }

    .tp-dark .el-alert .el-alert__description {
        color: inherit;
    }

    .tp-dark .alert-info {
        background: #2a2432;
        border-color: var(--tp-border);
        color: var(--tp-text-soft);
    }

    .tp-dark .alert-warning {
        background: #38301c;
        border-color: #4d411f;
        color: #d9a94a;
    }

    .tp-dark .alert-success {
        background: #1e3428;
        border-color: #2a4a37;
        color: #58b985;
    }

    .tp-dark .alert-danger {
        background: #3a2226;
        border-color: #552f35;
        color: #e07878;
    }

    .tp-dark .close {
        color: var(--tp-ink);
        text-shadow: none;
    }

    /* Training admin cards (styled outside this file with fixed colours) */
    .tp-dark .tr-module,
    .tp-dark .tr-side-card {
        background: var(--tp-surface);
        border-color: var(--tp-border);
    }

    .tp-dark .tr-module-head {
        background: var(--tp-surface-raised);
    }

    .tp-dark .tr-module-title {
        color: var(--tp-ink);
    }

    .tp-dark .tr-lesson {
        border-top-color: #2e2837;
    }

        .tp-dark .tr-lesson:hover {
            background: #2c2534;
        }

    .tp-dark .tr-lesson-title {
        color: var(--tp-text);
    }

/* ------------------------------------------------------------------ */
/* Login (split-screen)                                                */
/* ------------------------------------------------------------------ */

.tp-login2 {
    display: flex;
    min-height: 100vh;
    background: var(--tp-surface);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

.tp-login2-brand {
    flex: 0 0 43%;
    background: linear-gradient(160deg, #c15589 0%, #8b3a77 55%, #75336d 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 56px 60px;
    position: relative;
    overflow: hidden;
}

    .tp-login2-brand::before,
    .tp-login2-brand::after {
        content: "";
        position: absolute;
        border-radius: 50%;
    }

    .tp-login2-brand::before {
        right: -120px;
        top: -80px;
        width: 420px;
        height: 420px;
        background: rgba(255, 255, 255, 0.06);
    }

    .tp-login2-brand::after {
        right: -40px;
        bottom: -160px;
        width: 360px;
        height: 360px;
        background: rgba(43, 36, 49, 0.12);
    }

    .tp-login2-brand img {
        width: 200px;
        position: relative;
    }

.tp-login2-strap {
    position: relative;
}

    .tp-login2-strap h1 {
        color: #ffffff;
        font-size: 32px;
        font-weight: 700;
        letter-spacing: -0.5px;
        line-height: 1.25;
        margin: 0;
        max-width: 420px;
    }

    .tp-login2-strap p {
        color: rgba(255, 255, 255, 0.75);
        font-size: 15px;
        margin: 14px 0 0;
        max-width: 400px;
        line-height: 1.6;
    }

.tp-login2-copyright {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12.5px;
    position: relative;
}

.tp-login2-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tp-page-bg);
    padding: 24px;
}

.tp-login2-card {
    width: 100%;
    max-width: 400px;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    padding: 40px 40px 36px;
    box-shadow: 0 8px 28px rgba(43, 36, 49, 0.07);
}

    .tp-login2-card h1 {
        margin: 0 0 6px;
        font-size: 22px;
        font-weight: 650;
        color: var(--tp-ink);
        letter-spacing: -0.2px;
    }

.tp-login2-cardlogo {
    width: 150px;
    display: block;
    margin-bottom: 20px;
}

.tp-login2-sub {
    color: #8b8494;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0 0 18px;
}

.tp-login2-card .btn-ms-signin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    height: 44px;
    width: 100%;
    border: 1px solid var(--tp-border-input);
    border-radius: 8px;
    background: var(--tp-surface);
    font-weight: 600;
    font-size: 14px;
    color: var(--tp-text);
    text-decoration: none;
}

    .tp-login2-card .btn-ms-signin:hover {
        background: var(--tp-surface-raised);
        border-color: #cfc9d5;
        color: var(--tp-ink);
    }

.tp-login2-note {
    display: flex;
    gap: 8px;
    color: var(--tp-text-faint);
    font-size: 12px;
    line-height: 1.5;
    margin-top: 18px;
}

@media (max-width: 900px) {
    .tp-login2-brand {
        display: none;
    }
}