/* ==========================================================================
   OPATIX UI/UX LAYER
   Re-skins the application with the Opatix admin design language
   (Montserrat, indigo primary, floating white topbar, white sidenav with
   tinted active state, soft shadowed cards). Loaded after the theme and
   custom.css so it wins on equal specificity. Tokens mirror
   Opatix resources/css/config.css.
   ========================================================================== */

:root {
    --ox-primary: #6366f1;
    --ox-primary-600: #4f46e5;
    --ox-primary-700: #4338ca;
    --ox-primary-50: #eef2ff;
    --ox-btn: #d2a34b;
    --ox-btn-hover: #b8893a;
    --ox-secondary: #747a80;
    --ox-success: #20b799;
    --ox-info: #3cbade;
    --ox-warning: #efb540;
    --ox-danger: #fa5944;
    --ox-light: #e9edf3;
    --ox-dark: #222a3e;
    --ox-body-bg: #f5f5f4;
    --ox-body-color: #57534e;
    --ox-heading: #292524;
    --ox-border: #e7e5e4;
    --ox-muted: #a8a29e;
    --ox-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    --ox-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    --ox-sidenav: 265px;
    --ox-topbar: 70px;

    /* remap the app's own design tokens (custom.css) onto Opatix */
    --gc-green: var(--ox-primary-700);
    --gc-green-light: var(--ox-primary-600);
    --gc-gold: var(--ox-warning);
    --gc-gold-dark: #d99a1e;
    --gc-sidebar-accent: var(--ox-primary);
    --gc-sidebar-accent-dark: var(--ox-primary-600);
    --gc-r2: 6px;
    --gc-r3: 6px;
    --gc-sh2: var(--ox-shadow-md);
}

/* ---------- Base ---------- */
html, body, #main-body {
    font-family: "Montserrat", sans-serif;
}
body,
#main-body,
.page-wrapper {
    background-color: var(--ox-body-bg) !important;
    color: var(--ox-body-color);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Montserrat", sans-serif;
    color: var(--ox-heading);
    font-weight: 600;
}
a { color: var(--ox-primary); }
a:hover { color: var(--ox-primary-600); }
.text-muted { color: var(--ox-muted) !important; }
code { color: var(--ox-primary); }

/* ---------- Layout shell (desktop) ---------- */
@media (min-width: 768px) {

    /* SIDENAV: white panel, full height, logo block on top */
    .left-sidebar {
        width: var(--ox-sidenav) !important;
        background: #fff !important;
        box-shadow: var(--ox-shadow);
        padding-top: var(--ox-topbar) !important;
        z-index: 60;
    }
    .left-sidebar .scroll-sidebar,
    .left-sidebar .sidebar-nav {
        background: transparent !important;
    }
    .sidebar-nav { padding: 16px !important; }

    .topbar {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        height: auto !important;
        padding: 16px 16px 0 calc(var(--ox-sidenav) + 16px);
        pointer-events: none;
        z-index: 61 !important;
    }
    .topbar > .navbar { padding: 0 !important; background: transparent !important; }

    /* logo block sits in the sidenav column */
    .topbar .navbar-header {
        position: fixed !important;
        top: 0; left: 0;
        width: var(--ox-sidenav) !important;
        height: var(--ox-topbar);
        background: #fff !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        z-index: 70;
        pointer-events: auto;
        border: 0 !important;
    }
    .topbar .navbar-header .navbar-brand { padding: 0; display: flex; align-items: center; }
    .topbar .navbar-header img { max-height: 40px; width: auto; }

    /* topbar = floating white card */
    .topbar .navbar-collapse {
        pointer-events: auto;
        background: #fff !important;
        border-radius: 6px;
        box-shadow: var(--ox-shadow);
        min-height: var(--ox-topbar);
        padding: 0 24px !important;
        margin: 0 !important;
        align-items: center;
    }

    .page-wrapper {
        margin-left: var(--ox-sidenav) !important;
        padding-top: calc(var(--ox-topbar) + 16px) !important;
    }
    .page-wrapper > .container-fluid { padding: 24px !important; }
}

/* ---------- Sidenav menu ---------- */
.sidebar-nav ul li.nav-small-cap {
    color: #78716c;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 8px 12px;
}
.sidebar-nav ul li a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px !important;
    margin-bottom: 4px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #57534e !important;
    background: transparent;
    border: 0 !important;
    transition: all .2s ease;
    -webkit-text-fill-color: currentColor;
}
.sidebar-nav ul li a .hide-menu { color: inherit; }
.sidebar-nav ul li a:not(.active):hover,
.sidebar-nav ul li a:not(.active):hover .hide-menu,
.sidebar-nav ul li a:not(.active):hover i {
    background: rgba(99, 102, 241, .05);
    color: #57534e !important;
    -webkit-text-fill-color: #57534e !important;
}
/* icon: plain 20px glyph, no tinted box */
.gc-ico {
    width: 20px; height: 20px; min-width: 20px;
    margin: 0 !important;
    background: transparent !important;
    color: inherit !important;
    border-radius: 0;
}
.gc-ico i,
.sidenav-menu-item .gc-ico .tb { font-size: 18px !important; }
.sidebar-nav ul li a:hover .gc-ico { background: transparent !important; }

/* active item: indigo text, 5% tint, left accent bar */
.sidebar-nav > ul > li.active > a,
.sidebar-nav > ul > li > a.active,
.sidebar-nav ul li.active > a,
.sidebar-nav ul li a.active {
    position: relative;
    background: rgba(99, 102, 241, .05) !important;
    color: var(--ox-primary) !important;
    border: 0 !important;
    border-radius: 6px;
}
.sidebar-nav > ul > li.active > a::before,
.sidebar-nav > ul > li > a.active::before {
    content: "";
    position: absolute;
    top: 8px; bottom: 8px; left: 0;
    border-left: 2px solid var(--ox-primary);
}
.sidebar-nav > ul > li > a.active .hide-menu,
.sidebar-nav > ul > li.active > a .hide-menu {
    background: none !important;
    -webkit-text-fill-color: var(--ox-primary) !important;
    color: var(--ox-primary) !important;
    font-weight: 500;
}
.sidebar-nav > ul > li.active > a .gc-ico,
.sidebar-nav > ul > li > a.active .gc-ico {
    background: transparent !important;
    color: var(--ox-primary) !important;
}
.sidebar-nav .has-arrow::after { border-color: #a8a29e; }
.sidebar-nav ul ul a { padding-left: 24px !important; font-size: 13px; }
.left-sidebar .ps__thumb-y,
#main-scroll-sidebar .ps__thumb-y { background-color: #d6d3d1 !important; }

/* ---------- Topbar items ---------- */
.topbar .navbar-nav > .nav-item > .nav-link {
    color: #57534e;
}
.topbar .navbar-nav > .nav-item > .nav-link:hover { color: var(--ox-primary); }
.topbar .navbar-nav > .nav-item > a.nav-link > i,
.topbar .navbar-nav .nav-link i { color: #78716c; }
.topbar .app-search .form-control,
.topbar .form-control {
    background: rgba(120, 113, 108, .1);
    border-color: transparent;
    border-radius: 8px;
}

/* ---------- Cards ---------- */
.card {
    background: #fff;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: var(--ox-shadow) !important;
    margin-bottom: 24px;
}
.card-header {
    padding: 12px 20px;
    background: transparent;
    border-bottom: 1px solid var(--ox-border);
}
.card-footer {
    padding: 12px 24px;
    background: transparent;
    border-top: 1px solid var(--ox-border);
}
.card-body { padding: 20px; }
.card-title {
    font-size: 16px;
    font-weight: 600;
    color: #292524;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    padding: 6px 12px;
    transition: all .2s ease;
}
.btn-sm { font-size: 12px; padding: 6px 14px; }
.btn-lg { font-size: 16px; padding: 12px 20px; }
.btn-primary, .btn-info, .btn-themecolor, .btn-rounded.btn-info {
    background-color: var(--ox-btn) !important;
    border-color: var(--ox-btn) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-info:hover, .btn-themecolor:hover,
.btn-primary:focus, .btn-info:focus {
    background-color: var(--ox-btn-hover) !important;
    border-color: var(--ox-btn-hover) !important;
}
.btn-success { background-color: var(--ox-success) !important; border-color: var(--ox-success) !important; }
.btn-warning { background-color: var(--ox-warning) !important; border-color: var(--ox-warning) !important; color: #fff !important; }
.btn-danger  { background-color: var(--ox-danger)  !important; border-color: var(--ox-danger)  !important; }
.btn-secondary { background-color: var(--ox-secondary) !important; border-color: var(--ox-secondary) !important; color: #fff !important; }
.btn-default, .btn-light {
    background: #fff; border: 1px solid #e7e5e4; color: #57534e;
}
.btn-default:hover, .btn-light:hover { background: #f5f5f4; }
.btn-outline-primary { color: var(--ox-btn-hover); border-color: var(--ox-btn); }
.btn-outline-primary:hover { background: var(--ox-btn); color: #fff; }
.btn:focus, .btn:active:focus { box-shadow: 0 0 0 3px rgba(210, 163, 75, .3) !important; }

/* ---------- Forms ---------- */
label, .control-label { font-weight: 600; font-size: 14px; color: #57534e; }
.form-control,
.custom-select,
select.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #e7e5e4;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    font-weight: 400;
    color: #44403c;
    box-shadow: none;
}
.form-control:focus,
.custom-select:focus {
    border-color: #d6d3d1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .12) !important;
    outline: 0;
}
input[type=checkbox]:checked,
input[type=radio]:checked { accent-color: var(--ox-primary); }

/* ---------- Tables ---------- */
.table thead th {
    background: #fafaf9;
    border-bottom: 1px solid var(--ox-border);
    color: #44403c;
    font-weight: 600;
    font-size: 13px;
}
.table td, .table th { border-color: var(--ox-border); vertical-align: middle; }
.table-hover tbody tr:hover { background: rgba(99, 102, 241, .04); }

/* ---------- Badges / labels ---------- */
.badge, .label {
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
}
.badge-primary, .label-info, .label-primary, .badge-info { background-color: var(--ox-primary) !important; }
.badge-success, .label-success { background-color: var(--ox-success) !important; }
.badge-warning, .label-warning { background-color: var(--ox-warning) !important; }
.badge-danger,  .label-danger  { background-color: var(--ox-danger)  !important; }

/* ---------- Tabs / pagination / dropdowns / modals ---------- */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--ox-primary);
    border-color: transparent transparent var(--ox-primary);
}
.page-item.active .page-link {
    background-color: var(--ox-primary);
    border-color: var(--ox-primary);
}
.page-link { color: var(--ox-primary); }
.dropdown-menu {
    border: 1px solid var(--ox-border);
    border-radius: 8px;
    box-shadow: var(--ox-shadow-md);
    padding: 8px;
}
.dropdown-item { border-radius: 6px; padding: 8px 12px; color: #292524; }
.dropdown-item:hover, .dropdown-item:focus { background: #f5f5f4; color: #292524; }
.modal-content { border: 0; border-radius: 8px; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.modal-header { border-bottom: 1px solid var(--ox-border); }
.modal-footer { border-top: 1px solid var(--ox-border); }
.progress { border-radius: 9999px; background: #e7e5e4; }
.progress-bar { background-color: var(--ox-primary); }

/* ---------- Dashboard quick actions + stat cards: always white ---------- */
.gc-quick {
    background: #fff !important;
    border-radius: 4px;
    box-shadow: var(--ox-shadow);
}
.gc-quick-label { color: #78716c; }
.gc-qa-btn { border-radius: 4px; }
.gc-qa-primary { background: var(--ox-btn); color: #fff; box-shadow: none; }
.gc-qa-primary:hover { color: #fff; background: var(--ox-btn-hover); filter: none; }
.gc-qa-gold { background: #fff; color: #57534e; border-color: var(--ox-border); box-shadow: none; }
.gc-qa-gold:hover { background: #f5f5f4; color: #57534e; filter: none; }
.gc-qa-outline { background: #fff; color: #57534e; border-color: var(--ox-border); }
.gc-qa-outline:hover { background: #f5f5f4; color: #57534e; }

.gc-stat,
.gc-stat-grey, .gc-stat-green, .gc-stat-blue, .gc-stat-red, .gc-stat-gold, .gc-stat-purple {
    background: #fff !important;
    color: var(--ox-heading) !important;
    border-radius: 4px;
    box-shadow: var(--ox-shadow);
}
.gc-stat:hover { color: var(--ox-heading) !important; }
.gc-stat::after { display: none; }
.gc-stat .stat-label { color: #78716c; opacity: 1; }
.gc-stat .stat-val { color: var(--ox-heading); }
.gc-stat .stat-sub { color: #a8a29e; opacity: 1; }
.gc-stat .stat-icon { color: #57534e !important; opacity: 1 !important; }

.gc-stat-pink { background: #fff !important; color: var(--ox-heading) !important; }

/* detail-page hero cards: white too */
.gc-hero {
    background: #fff !important;
    color: var(--ox-body-color);
    border-radius: 4px;
    box-shadow: var(--ox-shadow);
}
.gc-hero-name { color: var(--ox-heading); }
.gc-hero-badge { background: #f5f5f4; border-color: var(--ox-border); color: #57534e; }
.gc-hero-since, .gc-hero-stat-label { color: #a8a29e; }
.gc-hero-stats { border-top-color: var(--ox-border); }
.gc-hero-stat-val, .gc-hero-stat-val.gold { color: var(--ox-heading); }
.gc-hero-avatar { background: var(--ox-primary-50); color: var(--ox-primary); }
.gc-hero .btn-default, .gc-hero .btn-light { background: #fff; color: #57534e; border: 1px solid var(--ox-border); }
.gc-panel { border-radius: 4px; box-shadow: var(--ox-shadow); }

/* ---------- Login: indigo canvas + centred white card (Opatix auth) ---------- */
.login-split-wrapper {
    background: #1c1917 !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* blurred photo backdrop + dark overlay */
.login-split-wrapper::before {
    content: "";
    position: absolute;
    inset: -30px;
    background: url('/public/images/login pi.jpeg') center / cover no-repeat;
    filter: blur(14px);
    z-index: 0;
}
.login-split-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 16, 10, .55);
    z-index: 0;
}
/* landscape card: photo panel left, form right */
.login-split-card, .login-split-wrapper > * { position: relative; z-index: 1; }
.login-split-wrapper { gap: 0; }
.login-split-left {
    display: block !important;
    flex: 0 0 380px !important;
    align-self: center;
    height: min(540px, 94vh);
    margin: 0;
    border-radius: 6px 0 0 6px;
    box-shadow: var(--ox-shadow-md);
}
.login-split-overlay { padding: 32px 28px; }
.login-split-tagline h1 { font-size: 22px; font-weight: 900; font-family: 'Montserrat', sans-serif; line-height: 1.2; margin-bottom: 10px; }
.login-split-tagline h1 span { color: var(--ee-primary-400) !important; font-weight: 900; }
.login-split-tagline p { font-size: 12px; }
.login-split-right {
    flex: 0 1 460px !important;
    background: #fff !important;
    border-radius: 0 6px 6px 0;
    box-shadow: var(--ox-shadow-md);
    width: 100%;
    max-width: 460px;
    height: min(540px, 94vh);
    padding: 20px 0 !important;
    margin: 0;
    overflow: hidden !important;
}
.login-split-logo { margin-bottom: 18px !important; }
.login-split-subtitle { margin-bottom: 20px !important; }
.login-split-field { margin-bottom: 14px !important; }
.login-split-meta { margin-bottom: 18px !important; }
.login-split-btn { margin-bottom: 14px !important; }
@media (max-width: 860px) {
    .login-split-left { display: none !important; }
    .login-split-right { border-radius: 6px; margin: 24px; height: auto; }
}
.login-split-form-wrap { width: 100% !important; padding: 0 24px !important; }
.login-split-title { color: var(--ee-primary-600) !important; font-size: 20px; font-weight: 900 !important; font-family: 'Montserrat', sans-serif; text-align: center; }
.login-split-subtitle { text-align: center; }
.login-split-subtitle,
.login-split-copyright { color: var(--ox-muted) !important; }
.login-split-label { color: #57534e !important; }
.login-split-input-wrap {
    background: #fff !important;
    border: 1px solid #e7e5e4 !important;
    border-radius: 4px !important;
}
.login-split-input-wrap:focus-within { border-color: #d6d3d1 !important; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.login-split-input { color: #44403c !important; background: transparent !important; }
.login-split-icon, .login-split-eye { color: #a8a29e !important; }
.login-split-remember, .login-split-remember span { color: #57534e !important; }
.login-split-forgot, .login-split-signup-link a { color: var(--ox-primary) !important; }
.login-split-signup-link { color: #78716c !important; }
.login-split-btn {
    background: var(--ox-btn) !important;
    color: #fff !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    font-weight: 600;
}
.login-split-btn:hover { background: var(--ox-btn-hover) !important; }

/* ---------- Vehicle type icons (side-view silhouettes) ---------- */
.gc-vtype { display: inline-flex; align-items: center; justify-content: center; color: var(--ox-primary); }
.gc-vtype-svg { width: 100%; height: auto; display: block; }
.gc-vtype-win { fill: #fff; opacity: .92; }
.gc-vtype-tyre { fill: #292524; stroke: #fff; stroke-width: 2; }
/* card tile */
.gc-vcard-photo, .gc-vcard-photo-placeholder { background: #f5f5ff; }
.gc-vcard-photo-placeholder { display: flex; align-items: center; justify-content: center; }
.gc-vcard-photo-placeholder .gc-vtype { width: 62%; }
/* type picker (add/edit form) */
.gc-typepick { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.gc-typepick-item { display: block; text-decoration: none !important; cursor: pointer; }
.gc-typepick .gc-typepick-tile {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 6px; border: 1px solid var(--ox-border); border-radius: 6px; background: #fff;
    font-size: 12px; font-weight: 600; color: #57534e; transition: all .15s ease;
}
.gc-typepick .gc-vtype { width: 64px; color: #a8a29e; }
.gc-typepick-item:hover .gc-typepick-tile { border-color: #d6d3d1; background: #fafaf9; }
.gc-typepick-item.is-selected .gc-typepick-tile { border-color: var(--ox-primary); background: var(--ox-primary-50); color: var(--ox-primary-700); box-shadow: 0 0 0 2px rgba(99,102,241,.18); }
.gc-typepick-item.is-selected .gc-typepick-tile .gc-vtype { color: var(--ox-primary); }

/* ---------- Vehicle cards (list page) ---------- */
.gc-vc {
    background: #fff; border: 1px solid var(--ox-border); border-radius: 8px;
    height: 100%; display: flex; flex-direction: column; padding: 16px 18px 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.gc-vc:hover { border-color: #d6d3d1; box-shadow: 0 4px 14px rgba(28,25,23,.07); }
.gc-vc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.gc-vc-plate {
    font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #1c1917; white-space: nowrap;
    background: #fafaf9; border: 1px solid #d6d3d1; border-radius: 4px; padding: 3px 9px;
}
.gc-vc-status {
    font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 10px 3px 8px;
    display: inline-flex; align-items: center; gap: 6px; background: #f5f5f4; color: #57534e;
}
.gc-vc-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gc-vc-status.badge-success   { background: #ecfdf5; color: #047857; }
.gc-vc-status.badge-info      { background: #f5f3ff; color: #6d28d9; }
.gc-vc-status.badge-primary   { background: #eff6ff; color: #1d4ed8; }
.gc-vc-status.badge-warning   { background: #fffbeb; color: #b8893a; }
.gc-vc-status.badge-secondary { background: #f5f5f4; color: #78716c; }
.gc-vc-head { margin-bottom: 14px; }
.gc-vc-title { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; color: #1c1917; }
.gc-vc-title:hover { color: var(--ox-btn-hover); text-decoration: none; }
.gc-vc-sub { margin-top: 2px; font-size: 12.5px; color: #78716c; }
.gc-vc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid #f5f5f4; }
.gc-vc-grid strong { display: block; font-size: 14px; font-weight: 700; color: #292524; }
.gc-vc-grid .gc-vc-rate { color: var(--ox-btn-hover); }
.gc-vc-label { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #a8a29e; margin-bottom: 2px; }
.gc-vc-owner { padding: 12px 0; border-top: 1px solid #f5f5f4; font-size: 13px; color: #44403c; }
.gc-vc-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid #f5f5f4; }
.gc-vc-foot .gc-vcard-actions { border: 0; padding: 0; margin: 0; display: flex; justify-content: flex-end; gap: 6px; }

/* ---------- Login: sign-in font + remember-me toggle ---------- */
.login-split-btn { font-family: 'Montserrat', sans-serif; font-weight: 900 !important; }
.login-split-remember input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    left: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    width: 38px !important;
    height: 22px !important;
    border-radius: 11px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(134,118,79,.45);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.12);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: background .2s;
    flex-shrink: 0;
    margin: 0;
}
.login-split-remember input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
    transition: transform .2s;
}
.login-split-remember input[type="checkbox"]:checked { background: var(--ee-primary-600); }
.login-split-remember input[type="checkbox"]:checked::before { transform: translateX(16px); }
.login-split-remember input[type="checkbox"]::after { content: none !important; }

/* ---------- Login: water ripple layer ---------- */
#loginRipples {
    position: absolute !important;
    inset: 0;
    z-index: 0 !important;
    pointer-events: none;
    background: url('/public/images/login-blur.jpg') center / cover no-repeat;
}
.login-split-wrapper::after { pointer-events: none; }

/* ---------- Login: readable inputs + eye toggle ---------- */
.login-split-input-wrap { min-height: 46px; }
.login-split-input {
    color: #1c1917 !important;
    -webkit-text-fill-color: #1c1917 !important;
    caret-color: #1c1917;
    font-size: 15px !important;
    height: 44px !important;
    min-width: 0;
    padding: 0 4px 0 0 !important;
}
.login-split-input::placeholder { color: #a8a29e !important; -webkit-text-fill-color: #a8a29e !important; opacity: 1; }
.login-split-input:-webkit-autofill,
.login-split-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #1c1917 !important;
}
.login-split-icon, .login-split-eye {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 44px;
    color: #a8a29e !important;
}
.login-split-eye { cursor: pointer; }
.login-split-eye:hover { color: var(--ee-primary-600) !important; }
.login-split-eye span { display: inline-flex; }

/* ---------- Topbar: keep the right-hand icons (profile) on screen ---------- */
@media (min-width: 992px) {
    .topbar .navbar-collapse { flex-wrap: nowrap !important; min-width: 0; }
    .topbar .navbar-nav.mr-auto { flex: 1 1 0; min-width: 0; overflow: hidden; }
    .topbar .navbar-top-right { flex: 0 0 auto; flex-wrap: nowrap; margin-left: auto; }
    .topbar .navbar-top-right > .nav-item > .nav-link { padding-left: 10px !important; padding-right: 10px !important; }
    .topbar .navbar-top-right .u-pro > .nav-link { padding-left: 10px !important; padding-right: 0 !important; }
}
@media (max-width: 1400px) {
    #topnav-language-icon, #topnav-record-time-icon { display: none !important; }
}