/* Mobile responsive fix for downloads page */
@media (max-width: 767px) {
    /* Downloads page layout fix */
    .filemanager-sidebar {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
    }

    /* Ensure content doesn't overlap */
    .d-flex {
        flex-direction: column !important;
    }

    /* Make table scrollable on mobile */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Fix page title and breadcrumb alignment on mobile */
    .page-title-box {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .page-title-box .page-title {
        text-align: left !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }

    .page-title-box .breadcrumb {
        justify-content: flex-end !important;
        margin: 0 !important;
        text-align: right !important;
        flex-shrink: 0 !important;
    }

    /* Fix header overflow on mobile */
    #page-topbar .navbar-header {
        padding: 0 0.5rem !important;
    }

    #page-topbar .d-flex {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* Prevent login button overflow */
    #page-topbar .header-item {
        font-size: 0.875rem !important;
        padding: 0.25rem 0.5rem !important;
        white-space: nowrap !important;
    }

    /* Fix dropdown menu positioning */
    .dropdown-menu {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
    }

    /* Fix mobile page title layout - left align title, right align breadcrumb */
    .page-title-box {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding: 0.5rem 0 !important;
    }

    .page-title-box .page-title-left {
        flex: 0 0 auto !important;
        text-align: left !important;
        margin-right: auto !important;
    }

    .page-title-box .page-title-left h4 {
        font-size: 16px !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .page-title-box .page-title-right {
        flex: 0 0 auto !important;
        text-align: right !important;
        margin-left: auto !important;
    }

    .page-title-box .breadcrumb {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        font-size: 12px !important;
        flex-wrap: nowrap !important;
    }

    .page-title-box .breadcrumb-item {
        font-size: 12px !important;
    }

    /* Fix mobile header - language and user dropdown in one row */
    #page-topbar .navbar-header > .d-flex {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }

    /* Language dropdown button - smaller on mobile */
    #page-topbar .dropdown.d-inline-block .btn.header-item {
        padding: 0.25rem 0.5rem !important;
        min-width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Language flag image - make it same size as user avatar (30px) */
    #page-topbar .dropdown.d-inline-block img#header-lang-img,
    #page-topbar .dropdown.d-inline-block .btn.header-item img {
        height: 30px !important;
        width: 30px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    /* User dropdown button - compact on mobile */
    #page-topbar .dropdown.d-inline-block .btn.header-item {
        padding: 0.25rem 0.5rem !important;
    }

    #page-topbar .dropdown.d-inline-block .user-center_header {
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
    }

    /* Fix dropdown z-index and positioning on mobile */
    #page-topbar .dropdown-menu {
        z-index: 99999 !important;
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        margin-top: 0.5rem !important;
    }

    /* Ensure dropdown parent has proper positioning */
    #page-topbar .dropdown {
        position: relative !important;
        z-index: 1000 !important;
    }

    #page-topbar .dropdown.show {
        z-index: 99998 !important;
    }

    /* Fix navbar z-index to not cover dropdowns */
    #page-topbar {
        z-index: 1002 !important;
    }

    #page-topbar .navbar-header {
        z-index: 1001 !important;
        position: relative !important;
    }

    /* Hide username text on mobile, keep icon only */
    #page-topbar .d-none.d-xl-inline-block {
        display: none !important;
    }

    /* Cart and notification icons - smaller on mobile */
    #page-topbar .header-item.noti-icon i {
        font-size: 18px !important;
    }

    /* Ensure all header items stay in one row */
    #page-topbar .navbar-header {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Hide search on mobile if needed */
    #page-topbar .phonehide {
        display: none !important;
    }

    /* Ensure dropdowns are not clipped by overflow */
    #page-topbar,
    #page-topbar .navbar-header,
    #page-topbar .navbar-header > .d-flex {
        overflow: visible !important;
    }

    /* Language and user dropdown menus on mobile */
    @media (max-width: 767px) {
        .dropdown-menu {
            min-width: 200px !important;
            max-width: 90vw !important;
        }

        /* Ensure dropdown is visible above all content */
        #page-topbar .dropdown-menu {
            position: fixed !important;
            z-index: 999999 !important;
        }

        /* Position language dropdown */
        #page-topbar .dropdown:first-of-type .dropdown-menu {
            right: 60px !important;
        }

        /* Position user dropdown */
        #page-topbar .dropdown:last-of-type .dropdown-menu {
            right: 10px !important;
        }
    }
}

@media (min-width: 768px){
.yunyoo-login {
    padding: 3rem 18% !important;
}
}
.yunyoo-login {
    padding: 0 12% ;
}
@media (min-width: 1200px){
.yunyoo-login {
    padding: 0 12% !important;
}
}
.icon-sm {
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    font-size: 75%;
}
#page-topbar {
    background-color: #ffffffbd !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
#avatar {
    opacity: 0;
}
.link {
    cursor: pointer;
}
.login-info-icon {
    color: var(--blue) !important;
}
.yunyoo-num {
    font-family: DINCondensed-Bold;
}
.yunyoo-num small {
    font-size: 12px;
    margin-left: 5px;
}
.fs-6 {
    font-size: 1rem !important;
}
.me-2 {
    margin-right: 0.5rem !important;
}
.main-content * {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.shadow {
    -webkit-box-shadow: 0px 0px 40px rgb(29 58 83 / 10%) !important;
    box-shadow: 0px 0px 40px rgb(29 58 83 / 10%) !important;
}
select {
    word-wrap: normal;
    color: var(--bs-global);
    padding: 0.15em;
    line-height: var(--bs-btn-line-height);
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: 100em;
}
.server_header_box {
    background-image: linear-gradient(87deg, var(--bs-btn-bg) 0%, var(--bs-btn-active-border-color) 100%) !important;
}
.car-num {
    font-family: DINCondensed-Bold;
    font-size: 22px;
}
.row.align-items-center.server_header_box .custom-button, .row.align-items-center.server_header_box .left_wrap_btn {
    background-color: var(--blue) !important;
    box-shadow: 0px 6px 14px 2px rgb(131 21 191 / 50%) !important;
}
.powerimg {
    width: 48px !important;
    height: 48px !important;
    box-shadow: 0px 6px 14px 2px rgb(131 21 191 / 50%) !important;
    border-radius: 50% !important;
}
.left_wrap_btn {
    box-shadow: inherit  !important;
}
.dc {
    color: var(--primary) !important;
}
.configuration-btn-down {
    color: var(--primary) !important;
}
.configuration-btn-down::after {
    border: 1px solid var(--primary) !important;
}
.left_wrap_btn {
    background-color: var(--primary) !important;
}
.c-red {
    color: red;
}
.tips {
    border-left: 5px solid var(--primary);
    background-color: var(--bs-global-1);
    border-radius: var(--bs-btn-border-radius);
    padding: 0.5em 12px !important;
}
.modal.fade.show {
    -webkit-backdrop-filter: brightness(0.5)blur(6px);
    backdrop-filter: brightness(0.5)blur(6px);
}
.modal-content {
    -webkit-box-shadow: 0px 0px 40px rgb(29 58 83 / 10%) !important;
    box-shadow: 0px 0px 40px rgb(29 58 83 / 10%) !important;
}
.wspace::before {
  content: "\00a0"; /* 使用不断行的空格 */
}
.wspace::after {
  content: "\00a0"; /* 使用不断行的空格 */
}
.yunyoo-c-primary {
    color: var(--primary);
}
.yunyoo-br-primary {
  border-radius: var(--bs-btn-border-radius);
}
.badge-soft-yunyoo {
    color: var(--bs-global);
    background-color: rgba(176, 116, 209, 0.18);
}
.bl-hover:hover, .bl-hov:hover {
    border-width: 8px;
}
.bl-active:active, .bl-hov:active {
    border-width: 3px;
}
.bl-global {
    border-left: 5px solid var(--bs-global);
    border-radius: var(--bs-btn-border-radius);
}
.bl-blue {
  border-left: 5px solid #228cfc;
  border-radius: var(--bs-btn-border-radius);
}
.bl-indigo {
  border-left: 5px solid var(--indigo);
  border-radius: var(--bs-btn-border-radius);
}

.bl-purple {
  border-left: 5px solid var(--purple);
  border-radius: var(--bs-btn-border-radius);
}

.bl-pink {
  border-left: 5px solid var(--pink);
  border-radius: var(--bs-btn-border-radius);
}

.bl-red {
  border-left: 5px solid var(--red);
  border-radius: var(--bs-btn-border-radius);
}

.bl-orange {
  border-left: 5px solid var(--orange);
  border-radius: var(--bs-btn-border-radius);
}

.bl-yellow {
  border-left: 5px solid var(--yellow);
  border-radius: var(--bs-btn-border-radius);
}

.bl-green {
  border-left: 5px solid var(--green);
  border-radius: var(--bs-btn-border-radius);
}

.bl-teal {
  border-left: 5px solid var(--teal);
  border-radius: var(--bs-btn-border-radius);
}

.bl-cyan {
  border-left: 5px solid var(--cyan);
  border-radius: var(--bs-btn-border-radius);
}

.bl-white {
  border-left: 5px solid var(--white);
  border-radius: var(--bs-btn-border-radius);
}

.bl-gray {
  border-left: 5px solid var(--gray);
  border-radius: var(--bs-btn-border-radius);
}

.bl-gray-dark {
  border-left: 5px solid var(--gray-dark);
  border-radius: var(--bs-btn-border-radius);
}

.bl-primary {
  border-left: 5px solid var(--primary);
  border-radius: var(--bs-btn-border-radius);
}

.bl-secondary {
  border-left: 5px solid var(--secondary);
  border-radius: var(--bs-btn-border-radius);
}

.bl-success {
  border-left: 5px solid var(--success);
  border-radius: var(--bs-btn-border-radius);
}

.bl-info {
  border-left: 5px solid var(--info);
  border-radius: var(--bs-btn-border-radius);
}

.bl-warning {
  border-left: 5px solid var(--warning);
  border-radius: var(--bs-btn-border-radius);
}

.bl-danger {
  border-left: 5px solid var(--danger);
  border-radius: var(--bs-btn-border-radius);
}

.bl-light {
  border-left: 5px solid var(--light);
  border-radius: var(--bs-btn-border-radius);
}

.bl-dark {
  border-left: 5px solid var(--dark);
  border-radius: var(--bs-btn-border-radius);
}

pre.newscontent {
    line-height: 2em;
}

:root {
    --bs-global: #b074d1;
    --bs-global-1: #f2e9f8;
    --bs-global-2: #f8f3fb;
    --bs-global-3: #d7b9e8;
    --bs-global-o-1: rgba(176, 116, 209, 0.1);
    --bs-global-o-2: rgba(176, 116, 209, 0.2);
    --bs-global-o-3: rgba(176, 116, 209, 0.3);
    --bs-global-o-4: rgba(176, 116, 209, 0.4);
    --bs-global-o-5: rgba(176, 116, 209, 0.5);
    --bs-global-o-0: rgba(176, 116, 209, 0);
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-global);
    --bs-btn-border-color: var(--bs-global);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9e40d1;
    --bs-btn-hover-border-color: #8536b0;
    --bs-btn-focus-shadow-rgb: 107, 95, 223;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8536b0;
    --bs-btn-active-border-color: #7c33a3;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-global);
    --bs-btn-disabled-border-color: var(--bs-global);
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 700;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-width: 1px;
    --bs-btn-border-radius: 0.5rem;
    --bs-btn-box-shadow: none;
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0 rgba(var(--bs-btn-focus-shadow-rgb), .5);
}

/* Dark glass overrides for user center */
:root {
    --bs-global: #0ea5e9;
    --bs-global-1: rgba(14, 165, 233, 0.12);
    --bs-global-2: rgba(14, 165, 233, 0.08);
    --bs-global-3: rgba(14, 165, 233, 0.35);
    --bs-global-o-1: rgba(14, 165, 233, 0.1);
    --bs-global-o-2: rgba(14, 165, 233, 0.2);
    --bs-global-o-3: rgba(14, 165, 233, 0.3);
    --bs-global-o-4: rgba(14, 165, 233, 0.4);
    --bs-global-o-5: rgba(14, 165, 233, 0.5);
    --bs-global-o-0: rgba(14, 165, 233, 0);
    --bs-btn-bg: #0ea5e9;
    --bs-btn-border-color: #0ea5e9;
    --bs-btn-hover-bg: #3b82f6;
    --bs-btn-hover-border-color: #2563eb;
    --bs-btn-active-bg: #2563eb;
    --bs-btn-active-border-color: #1d4ed8;
}

body {
    background-color: #0b0f1a !important;
    background-image:
        linear-gradient(rgba(7, 10, 16, 0.78), rgba(7, 10, 16, 0.6)),
        url("/themes/web/yunyoo/BG.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    color: #d7dbe4 !important;
}

/* Glass chrome - Enhanced transparency for top bar and sidebar */
#page-topbar,
.navbar-header,
.vertical-menu,
.vertical-menu .simplebar-content-wrapper,
.vertical-menu .simplebar-content,
.modal-content {
    background-color: rgba(18, 22, 34, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 12px 30px rgba(7, 10, 18, 0.35);
}

/* Cards - only apply glass effect to direct content cards, not wrapper cards */
.card {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Inner card content with glass effect */
.card .card-body,
.card .card-header,
.card .card-footer {
    background-color: rgba(18, 22, 34, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 12px 30px rgba(7, 10, 18, 0.35);
    border-radius: 12px !important;
    margin-bottom: 1rem;
}

/* Dashboard specific cards - single layer only */
.clientarea .card,
.dashboard .card,
.home-card {
    background-color: rgba(18, 22, 34, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 12px 30px rgba(7, 10, 18, 0.35);
    border-radius: 12px !important;
}

/* Dashboard card body - no extra background */
.clientarea .card .card-body,
.dashboard .card .card-body,
.home-card .card-body {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Remove duplicate borders between card parts */
.card .card-header + .card-body {
    border-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    margin-top: -1rem;
}

.card .card-body + .card-footer {
    border-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    margin-top: -1rem;
}

/* Card headers with subtle background */
.card-header {
    background-color: rgba(14, 165, 233, 0.12) !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* Force transparent glass on sidebar even with dark mode */
body[data-sidebar="dark"] .vertical-menu {
    background: rgba(18, 22, 34, 0.55) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

/* Ensure sidebar menu items are visible on glass background */
body[data-sidebar="dark"] #sidebar-menu ul li a {
    color: #d7dbe4 !important;
}

body[data-sidebar="dark"] #sidebar-menu ul li a i {
    color: #a6b0cf !important;
}

/* Sidebar active and hover states - blue color */
body[data-sidebar="dark"] #sidebar-menu ul li.mm-active > a,
body[data-sidebar="dark"] #sidebar-menu ul li a:hover,
body[data-sidebar="dark"] #sidebar-menu ul li a:focus,
body[data-sidebar="dark"] #sidebar-menu ul li a.active {
    color: #0ea5e9 !important;
}

body[data-sidebar="dark"] #sidebar-menu ul li.mm-active > a i,
body[data-sidebar="dark"] #sidebar-menu ul li a:hover i,
body[data-sidebar="dark"] #sidebar-menu ul li a:focus i,
body[data-sidebar="dark"] #sidebar-menu ul li a.active i {
    color: #0ea5e9 !important;
}

/* Sidebar submenu/collapse menu - dark glass effect */
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu,
body[data-sidebar="dark"] #sidebar-menu .mm-collapse,
body[data-sidebar="dark"] #sidebar-menu ul ul,
.vertical-menu #sidebar-menu ul li ul.sub-menu,
.vertical-menu #sidebar-menu .mm-collapse,
.vertical-menu #sidebar-menu ul ul {
    background-color: rgba(18, 22, 34, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 12px 30px rgba(7, 10, 18, 0.35) !important;
    border-radius: 12px !important;
    padding: 8px !important;
}

/* Sidebar submenu items */
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a,
body[data-sidebar="dark"] #sidebar-menu .mm-collapse li a,
.vertical-menu #sidebar-menu ul li ul.sub-menu li a,
.vertical-menu #sidebar-menu .mm-collapse li a {
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    margin: 2px 0 !important;
}

/* Sidebar submenu items hover */
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a:hover,
body[data-sidebar="dark"] #sidebar-menu .mm-collapse li a:hover,
.vertical-menu #sidebar-menu ul li ul.sub-menu li a:hover,
.vertical-menu #sidebar-menu .mm-collapse li a:hover {
    background-color: rgba(14, 165, 233, 0.25) !important;
    color: #ffffff !important;
}


/* Breadcrumb text color - change from gray to white */
.breadcrumb,
.breadcrumb a,
.breadcrumb-item,
.breadcrumb-item a {
    color: #ffffff !important;
}

.breadcrumb-item.active {
    color: #38bdf8 !important;
}

.navbar-brand-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Avoid large container glass overlays */
.page-content,
.page-content .container-fluid,
.container-fluid,
.col-12 {
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
}

/* Tables with glass effect and rounded corners */
.table,
.table-responsive,
table {
    background-color: rgba(18, 22, 34, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 12px 30px rgba(7, 10, 18, 0.35);
    border-radius: 12px !important;
    overflow: hidden;
}

.table thead th {
    background-color: rgba(14, 165, 233, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    font-weight: 600;
}

.table tbody td {
    color: #d7dbe4 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.table tbody tr:hover {
    background-color: rgba(14, 165, 233, 0.08) !important;
}

/* Dropdown menu glass effect - default for all dropdowns */
.dropdown-menu {
    background-color: rgba(18, 22, 34, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 12px 30px rgba(7, 10, 18, 0.35) !important;
    border-radius: 12px !important;
    padding: 8px !important;
}

/* Bootstrap select dropdown menu - dark theme */
.bootstrap-select .dropdown-menu {
    background-color: rgba(18, 22, 34, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 12px 30px rgba(7, 10, 18, 0.35) !important;
    border-radius: 12px !important;
}

/* Bootstrap select dropdown toggle button - dark theme */
.bootstrap-select > .dropdown-toggle {
    background-color: rgba(18, 22, 34, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.dropdown-item {
    color: #ffffff !important;
    transition: all 0.3s ease;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    margin: 2px 0 !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(14, 165, 233, 0.25) !important;
    color: #ffffff !important;
}

.dropdown-divider {
    border-color: rgba(255, 255, 255, 0.12) !important;
    margin: 8px 0 !important;
}

/* User dropdown menu with split design */
#page-topbar .dropdown-menu,
.header-item .dropdown-menu {
    background-color: rgba(18, 22, 34, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    padding: 0 !important;
}

/* User dropdown header with blue background */
#page-topbar .dropdown-menu .dropdown-header,
.header-item .dropdown-menu .dropdown-header,
#page-topbar .dropdown-menu > div:first-child,
.header-item .dropdown-menu > div:first-child {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #2563eb 100%) !important;
    color: #ffffff !important;
    padding: 1rem !important;
    border-radius: 12px 12px 0 0 !important;
    margin: 0 !important;
}

/* Menu items area with dark glass background */
#page-topbar .dropdown-menu .dropdown-item,
.header-item .dropdown-menu .dropdown-item {
    background-color: transparent !important;
    padding: 10px 16px !important;
    margin: 2px 8px !important;
}

/* User avatar with white border */
#page-topbar .header-profile-user,
.header-item img,
.avatar-xs,
.avatar-sm,
.avatar-md,
.avatar-lg {
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
}

/* User dropdown text white */
#page-topbar .dropdown-menu .dropdown-item,
.header-item .dropdown-menu .dropdown-item {
    color: #ffffff !important;
    font-weight: 500;
}

#page-topbar .dropdown-menu .dropdown-item:hover,
.header-item .dropdown-menu .dropdown-item:hover {
    background-color: rgba(14, 165, 233, 0.2) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

/* User name text in dropdown header - white on blue */
#page-topbar .dropdown-menu .dropdown-header,
.header-item .dropdown-menu .dropdown-header,
#page-topbar .dropdown-menu h6,
.header-item .dropdown-menu h6,
#page-topbar .dropdown-menu > div:first-child h6,
.header-item .dropdown-menu > div:first-child h6,
#page-topbar .dropdown-menu > div:first-child span,
.header-item .dropdown-menu > div:first-child span {
    color: #ffffff !important;
    font-weight: 600;
}

/* Logout text color */
#page-topbar .dropdown-menu .text-danger,
.header-item .dropdown-menu .text-danger {
    color: #ffffff !important;
}

#page-topbar .dropdown-menu .text-danger:hover,
.header-item .dropdown-menu .text-danger:hover {
    color: #fecaca !important;
}

/* Fix nested dropdown overlap issue */
.dropdown-menu .dropdown-menu {
    position: relative !important;
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Checkmark icon for selected items */
.dropdown-item i.mdi-check,
.dropdown-item .fa-check {
    color: #ffffff !important;
    float: right;
    margin-left: 10px;
}

/* Remove any double borders or backgrounds */
.dropdown-menu > .dropdown-menu {
    display: none !important;
}

/* Search input and buttons with glass effect */
.form-control,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea,
select {
    background-color: rgba(18, 22, 34, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    padding-left: 3rem !important;
}

/* Input group icons - better integration */
.input-group-text {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 10px 0 0 10px !important;
    color: #0ea5e9 !important;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

.input-group {
    position: relative;
}

.input-group .form-control {
    padding-left: 3rem !important;
}

/* Login page specific styles */
.login-card,
.auth-page .card {
    background-color: rgba(18, 22, 34, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 20px 40px rgba(7, 10, 18, 0.5);
    border-radius: 16px !important;
}

/* Login page footer - integrate into card */
.login-footer,
.auth-footer,
[class*="copyright"],
.text-center.mt-4,
.text-center.mt-3 {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.875rem;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    background-color: rgba(18, 22, 34, 0.65) !important;
    border-color: rgba(14, 165, 233, 0.65) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.25) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Form labels white color */
.form-label,
label,
.col-form-label {
    color: #ffffff !important;
    font-weight: 500;
}

/* Form groups spacing */
.form-group,
.mb-3,
.mb-4 {
    margin-bottom: 1.5rem !important;
}

/* Radio and checkbox labels */
.form-check-label,
.custom-control-label {
    color: #d7dbe4 !important;
}

/* Disabled inputs */
.form-control:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    background-color: rgba(18, 22, 34, 0.35) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    cursor: not-allowed;
}

/* Pagination with glass effect */
.pagination {
    background-color: transparent !important;
}

.page-link {
    background-color: rgba(18, 22, 34, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    margin: 0 4px;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

.page-link:hover {
    background-color: rgba(14, 165, 233, 0.35) !important;
    border-color: rgba(14, 165, 233, 0.65) !important;
    color: #ffffff !important;
}

.page-item.active .page-link {
    background: linear-gradient(90deg, #0ea5e9 0%, #3b82f6 70%, #2563eb 100%) !important;
    border-color: rgba(14, 165, 233, 0.65) !important;
    color: #ffffff !important;
}

.page-item.disabled .page-link {
    background-color: rgba(18, 22, 34, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Buttons with rounded corners and glass effect */
.btn {
    border-radius: 10px !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-secondary,
.btn-outline-secondary {
    background-color: rgba(18, 22, 34, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
    background-color: rgba(14, 165, 233, 0.35) !important;
    border-color: rgba(14, 165, 233, 0.65) !important;
    color: #ffffff !important;
}

/* Badges with rounded corners */
.badge {
    border-radius: 8px !important;
    padding: 0.35em 0.65em;
    font-weight: 600;
}

/* Alert boxes with glass effect */
.alert {
    background-color: rgba(18, 22, 34, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-radius: 12px !important;
    color: #d7dbe4 !important;
}

/* List group with glass effect and rounded corners */
.list-group-item {
    background-color: rgba(18, 22, 34, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #d7dbe4 !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-radius: 12px !important;
    margin-bottom: 0.5rem !important;
}

.list-group-item:hover {
    background-color: rgba(14, 165, 233, 0.15) !important;
}

/* Security center specific styles */
/* Replace purple with blue theme */
.bg-info,
.badge-info,
.text-info,
.btn-info {
    background-color: #0ea5e9 !important;
    color: #ffffff !important;
    border-color: #0ea5e9 !important;
}

.bg-soft-info {
    background-color: rgba(14, 165, 233, 0.15) !important;
    color: #0ea5e9 !important;
}

/* Security page header card - replace purple gradient with blue */
.security-header,
.security-status-card,
.bg-gradient-primary,
.bg-primary-gradient,
[style*="background: linear-gradient"][style*="purple"],
[style*="background: linear-gradient"][style*="#b074d1"],
[style*="background-image: linear-gradient"][style*="purple"],
[style*="background-image: linear-gradient"][style*="#b074d1"] {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #2563eb 100%) !important;
    background-image: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #2563eb 100%) !important;
}

/* Force override any purple backgrounds */
[class*="purple"],
[class*="violet"],
.bg-purple,
.bg-violet {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #2563eb 100%) !important;
    background-color: #0ea5e9 !important;
}

/* Security status cards */
.security-card,
.security-item {
    background-color: rgba(18, 22, 34, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
}

/* Security icons - change from purple to blue */
.avatar-title {
    background-color: rgba(14, 165, 233, 0.15) !important;
    color: #0ea5e9 !important;
    border-radius: 50% !important;
}

/* All text should be white or light gray */
.security-card h5,
.security-card h6,
.security-card p,
.security-card span,
.security-item h5,
.security-item h6,
.security-item p,
.security-item span,
.list-group-item h5,
.list-group-item h6,
.list-group-item p,
.list-group-item span {
    color: #ffffff !important;
}

.security-card .text-muted,
.security-item .text-muted,
.list-group-item .text-muted {
    color: rgba(215, 219, 228, 0.7) !important;
}

/* Security status badge */
.badge-soft-success {
    background-color: rgba(52, 211, 153, 0.15) !important;
    color: #34d399 !important;
    border-radius: 8px !important;
}

/* Verification/Authentication page styles */
.verification-card,
.auth-card,
.verify-box {
    background-color: rgba(18, 22, 34, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 12px 30px rgba(7, 10, 18, 0.35);
    border-radius: 12px !important;
    padding: 2rem !important;
}

/* Verification page text colors */
.verification-card h1,
.verification-card h2,
.verification-card h3,
.verification-card h4,
.verification-card h5,
.verification-card h6,
.verification-card p,
.verification-card span,
.verification-card div,
.auth-card h1,
.auth-card h2,
.auth-card h3,
.auth-card h4,
.auth-card h5,
.auth-card h6,
.auth-card p,
.auth-card span,
.auth-card div,
.verify-box h1,
.verify-box h2,
.verify-box h3,
.verify-box h4,
.verify-box h5,
.verify-box h6,
.verify-box p,
.verify-box span,
.verify-box div {
    color: #ffffff !important;
}

/* Specific text elements that might be gray */
.text-dark,
.text-secondary {
    color: #ffffff !important;
}

/* Icons in verification cards */
.verification-card i,
.auth-card i,
.verify-box i {
    color: #0ea5e9 !important;
}

/* Verification list items */
.verification-card ul li,
.auth-card ul li,
.verify-box ul li {
    color: #d7dbe4 !important;
}

/* Make sure all headings are white */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
}

/* Paragraph text */
p {
    color: #d7dbe4 !important;
}

/* Force all text elements to be white or light gray */
* {
    color: inherit;
}

body, body * {
    color: #d7dbe4;
}

/* Override any gray text */
.text-gray,
.text-gray-600,
.text-gray-700,
.text-gray-800,
.text-gray-900,
[class*="text-gray"] {
    color: #ffffff !important;
}

/* Verification page - force all text white */
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6,
.page-content p,
.page-content span,
.page-content div,
.page-content li {
    color: #ffffff !important;
}

/* Dashboard specific text colors */
.clientarea h1,
.clientarea h2,
.clientarea h3,
.clientarea h4,
.clientarea h5,
.clientarea h6,
.clientarea p,
.clientarea span,
.clientarea div,
.dashboard h1,
.dashboard h2,
.dashboard h3,
.dashboard h4,
.dashboard h5,
.dashboard h6,
.dashboard p,
.dashboard span,
.dashboard div {
    color: #ffffff !important;
}

/* Empty state messages */
.empty-state,
.no-data,
.text-center {
    color: rgba(215, 219, 228, 0.7) !important;
}

/* Progress bars in dashboard */
.progress {
    background-color: rgba(18, 22, 34, 0.35) !important;
}

/* Links in cards */
.card a,
.card-body a {
    color: #0ea5e9 !important;
}

.card a:hover,
.card-body a:hover {
    color: #38bdf8 !important;
}

/* Nav tabs with glass effect */
.nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.nav-tabs .nav-link {
    background-color: rgba(18, 22, 34, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #d7dbe4 !important;
    border-radius: 10px 10px 0 0 !important;
    margin-right: 4px;
}

.nav-tabs .nav-link:hover {
    background-color: rgba(14, 165, 233, 0.15) !important;
    color: #0ea5e9 !important;
}

.nav-tabs .nav-link.active {
    background-color: rgba(14, 165, 233, 0.25) !important;
    border-color: rgba(14, 165, 233, 0.65) !important;
    color: #ffffff !important;
}

/* Progress bars */
.progress {
    background-color: rgba(18, 22, 34, 0.55) !important;
    border-radius: 10px !important;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, #0ea5e9 0%, #3b82f6 70%, #2563eb 100%) !important;
}

/* Empty state text */
.text-muted {
    color: rgba(215, 219, 228, 0.7) !important;
}

.text-primary {
    color: #0ea5e9 !important;
}

.link-primary,
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: #fff !important;
    background-color: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
}

/* Ensure all button text is white */
.btn,
button,
[type="button"],
[type="submit"] {
    color: #ffffff !important;
}

.btn:hover,
button:hover,
[type="button"]:hover,
[type="submit"]:hover {
    color: #ffffff !important;
}

/* Ensure button links have white text */
.btn a,
.btn-primary a,
a.btn,
a.btn-primary {
    color: #ffffff !important;
    text-decoration: none;
}

.btn a:hover,
.btn-primary a:hover,
a.btn:hover,
a.btn-primary:hover {
    color: #ffffff !important;
}

.badge-soft-yunyoo {
    color: #0ea5e9;
    background-color: rgba(14, 165, 233, 0.18);
}

.server_header_box {
    background-image: linear-gradient(87deg, #0ea5e9 0%, #2563eb 100%) !important;
}

.row.align-items-center.server_header_box .custom-button,
.row.align-items-center.server_header_box .left_wrap_btn,
.powerimg {
    box-shadow: 0px 6px 14px 2px rgba(14, 165, 233, 0.5) !important;
}

/* Footer glass effect - consistent with cart page */
.footer,
footer {
    background-color: rgba(18, 22, 34, 0.55) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    box-shadow: 0 -12px 30px rgba(7, 10, 18, 0.35) !important;
    color: #d7dbe4 !important;
}

/* Footer text color */
.footer,
.footer *,
footer,
footer * {
    color: #d7dbe4 !important;
}

/* Footer links */
.footer a,
footer a {
    color: #38bdf8 !important;
    text-decoration: none;
}

.footer a:hover,
footer a:hover {
    color: #7dd3fc !important;
}

/* Force remove any white backgrounds from main content area */
.main-content,
.page-content,
.page-content > *,
.container-fluid > .row,
.container-fluid > .row > .col-12 {
    background-color: transparent !important;
}

/* Ensure body background is always visible */
html,
body {
    min-height: 100vh !important;
    background-color: #0b0f1a !important;
}

/* Fix white button (btn-light) - make it dark glass */
.btn-light,
.btn-outline-light,
button.btn-light,
a.btn-light {
    background-color: rgba(18, 22, 34, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    box-shadow: 0 4px 12px rgba(7, 10, 18, 0.25) !important;
}

.btn-light:hover,
.btn-outline-light:hover,
button.btn-light:hover,
a.btn-light:hover {
    background-color: rgba(14, 165, 233, 0.35) !important;
    border-color: rgba(14, 165, 233, 0.65) !important;
    color: #ffffff !important;
}

.btn-light:focus,
.btn-light:active,
.btn-outline-light:focus,
.btn-outline-light:active {
    background-color: rgba(14, 165, 233, 0.45) !important;
    border-color: rgba(14, 165, 233, 0.75) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.25) !important;
}


/* Align resource list container with announcement container */
#sourceListBox {
    padding-top: 1.5rem !important;
}

/* Remove extra margin from resource list title (hidden) */
#sourceListBox .card-title {
    margin-bottom: 0 !important;
}

/* Fix mobile statistics cards layout - align text left, icon right */
@media (max-width: 767px) {
    /* Statistics cards on mobile */
    .card-body .d-flex.align-items-center.justify-content-between {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Text content left aligned */
    .card-body .d-flex.align-items-center.justify-content-between > div {
        text-align: left !important;
        flex: 1 !important;
    }

    /* Icon right aligned */
    .card-body .d-flex.align-items-center.justify-content-between > i {
        flex-shrink: 0 !important;
        margin-left: 1rem !important;
    }

    /* Ensure h6 and h4 are left aligned */
    .card-body .d-flex.align-items-center.justify-content-between h6,
    .card-body .d-flex.align-items-center.justify-content-between h4 {
        text-align: left !important;
        margin: 0 !important;
    }
}

/* Fix login link hover color - change from gray to blue */
#page-topbar a[href="/login"],
#page-topbar .text-dark[href="/login"],
.navbar-header a[href="/login"] {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

#page-topbar a[href="/login"]:hover,
#page-topbar .text-dark[href="/login"]:hover,
.navbar-header a[href="/login"]:hover {
    color: #0ea5e9 !important;
    text-decoration: none !important;
}

/* Fix copyright text alignment on mobile - login, register, password reset pages */
@media (max-width: 767px) {
    /* Ensure copyright text is centered on mobile */
    .mb-1.d-flex.justify-content-center,
    div.d-flex.justify-content-center {
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Specific fix for auth pages footer */
    section .mb-1.d-flex.justify-content-center,
    .auth-page .mb-1.d-flex.justify-content-center,
    .login-page .mb-1.d-flex.justify-content-center {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ========== Service Detail Page Dark Theme Fixes ========== */

/* Make ALL gray/black/muted text white in service detail pages */
.servicedetail .text-gray,
.servicedetail .text-black,
.servicedetail .text-muted,
.servicedetail p.text-gray,
.servicedetail p.text-black,
.servicedetail p.text-muted,
.servicedetail h5.text-gray,
.servicedetail h5.text-black,
.servicedetail h5.text-muted,
.servicedetail h4.text-gray,
.servicedetail h4.text-black,
.servicedetail h4.text-muted,
.servicedetail h3.text-gray,
.servicedetail h3.text-black,
.servicedetail h3.text-muted,
.servicedetail h2.text-gray,
.servicedetail h2.text-black,
.servicedetail h2.text-muted,
.servicedetail h1.text-gray,
.servicedetail h1.text-black,
.servicedetail h1.text-muted,
.servicedetail span.text-gray,
.servicedetail span.text-black,
.servicedetail span.text-muted,
.servicedetail label.text-gray,
.servicedetail label.text-black,
.servicedetail label.text-muted,
.servicedetail section.text-gray,
.servicedetail section.text-black,
.servicedetail section.text-muted {
    color: #ffffff !important;
}

/* All links and icons in service detail pages */
.servicedetail .text-white,
.servicedetail i.text-white,
.servicedetail i.pointer.text-white,
.servicedetail i.btn-copy.text-white,
.servicedetail a.text-white,
.servicedetail span.text-white {
    color: #ffffff !important;
}

/* Dark background for ALL elements with bg-light or bg-gray in service detail */
.servicedetail .bg-light,
.servicedetail .bg-gray,
.servicedetail .bg-light.card-body,
.servicedetail .bg-gray.card-body,
.servicedetail div.bg-light,
.servicedetail div.bg-gray {
    background-color: rgba(18, 22, 34, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Login panel buttons - dark theme (stronger) */
.servicedetail .bg-gray .btn-danger,
.servicedetail .bg-gray .btn-primary,
.servicedetail .bg-gray .service_module_button,
.servicedetail .bg-gray #renew {
    background-color: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
    color: #ffffff !important;
}
.servicedetail .bg-gray .btn-danger:hover,
.servicedetail .bg-gray .btn-primary:hover,
.servicedetail .bg-gray .service_module_button:hover,
.servicedetail .bg-gray #renew:hover {
    background-color: #0b93e6 !important;
    border-color: #0b93e6 !important;
    color: #ffffff !important;
}

/* Login panel with popover - dark background */
#logininfo,
[data-toggle="popover"] + div {
    background-color: rgba(18, 22, 34, 0.6) !important;
    border-radius: 8px !important;
}

/* All text inside dark cards */
.servicedetail .bg-light * .text-gray,
.servicedetail .bg-gray * .text-gray,
.servicedetail .bg-light * .text-black,
.servicedetail .bg-gray * .text-black,
.servicedetail .bg-light * .text-muted,
.servicedetail .bg-gray * .text-muted,
.servicedetail #logininfo * .text-gray,
.servicedetail #logininfo * .text-black,
.servicedetail #logininfo * .text-muted,
.servicedetail .bg-light.card-body .text-gray,
.servicedetail .bg-gray.card-body .text-black,
.servicedetail .bg-light.card-body .text-muted,
.servicedetail .bg-gray.card-body .text-muted {
    color: #ffffff !important;
}

/* Auto renew buttons - dark theme */
.servicedetail .btn-success.service_module_button,
.servicedetail #renew,
.servicedetail #renewpay,
.servicedetail .btn-success {
    background-color: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
    color: #ffffff !important;
}
.servicedetail .btn-success.service_module_button:hover,
.servicedetail #renew:hover,
.servicedetail #renewpay:hover,
.servicedetail .btn-success:hover {
    background-color: #0b93e6 !important;
    border-color: #0b93e6 !important;
    color: #ffffff !important;
}

/* Configuration cards - modern clean look */
.servicedetail .configuration_list,
.servicedetail .configuration_list p,
.servicedetail .pre-money-box,
.servicedetail .bg-light.card-body,
.servicedetail .bg-gray.card-body {
    background-color: rgba(18, 22, 34, 0.4) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
}

/* Configuration cards - all text white */
.servicedetail .configuration_list *,
.servicedetail .configuration_list p *,
.servicedetail .pre-money-box * {
    color: #ffffff !important;
}

/* Clean up margins - reduce nesting visual */
.servicedetail .card-body .bg-light,
.servicedetail .card-body .bg-gray,
.servicedetail .card-body > .bg-light,
.servicedetail .card-body > .bg-gray {
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* Better spacing */
.servicedetail .bottom-box {
    padding: 2rem !important;
}

/* Modern card header */
.servicedetail .card-body {
    border-radius: 16px !important;
    padding: 2rem !important;
}

/* Tab content modern styling */
.servicedetail .tab-content {
    background-color: rgba(18, 22, 34, 0.3) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
}

/* Card headers better */
.servicedetail .d-flex.justify-content-between h5,
.servicedetail .d-flex.justify-content-between h6 {
    color: #ffffff !important;
    margin-bottom: 0.75rem !important;
}

/* Remove unnecessary shadows */
.servicedetail .server_header_box {
    box-shadow: none !important;
}

/* Modern input styling */
.servicedetail .form-control {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Force ALL text to white in service detail - universal selector */
html body .servicedetail .text-gray,
html body .servicedetail .text-black,
html body .servicedetail .text-muted,
html body .servicedetail label,
html body .servicedetail p,
html body .servicedetail h1,
html body .servicedetail h2,
html body .servicedetail h3,
html body .servicedetail h4,
html body .servicedetail h5,
html body .servicedetail h6 {
    color: #ffffff !important;
}

/* Force ALL text to white in service detail - UNIVERSAL selector - ALL text elements */
html body .servicedetail *,
html body .servicedetail p *,
html body .servicedetail label *,
html body .servicedetail span *,
html body .servicedetail div *,
html body .servicedetail section *,
html body .servicedetail h1 *,
html body .servicedetail h2 *,
html body .servicedetail h3 *,
html body .servicedetail h4 *,
html body .servicedetail h5 *,
html body .servicedetail h6 * {
    color: #ffffff !important;
}

/* Force ALL links and icons white */
html body .servicedetail a *,
html body .servicedetail i *,
html body .servicedetail span a *,
html body .servicedetail span i * {
    color: #ffffff !important;
}


/* ========== CRITICAL FIX: Override conflicting styles from app.min.css and bootstrap.min.css ========== */

/* FORCE ALL text in service detail pages to WHITE - MAXIMUM PRIORITY */
html body .servicedetail .text-gray,
html body .servicedetail .text-black,
html body .servicedetail .text-muted,
html body .servicedetail label,
html body .servicedetail p,
html body .servicedetail h1,
html body .servicedetail h2,
html body .servicedetail h3,
html body .servicedetail h4,
html body .servicedetail h5,
html body .servicedetail h6,
html body .servicedetail span,
html body .servicedetail div,
html body .servicedetail section,
html body .servicedetail a {
    color: #ffffff !important;
}

/* FORCE button colors in service detail pages - MAXIMUM PRIORITY */
html body .servicedetail .btn-danger,
html body .servicedetail .btn-primary,
html body .servicedetail .btn-success,
html body .servicedetail .btn-warning,
html body .servicedetail button {
    color: #ffffff !important;
}

/* FORCE backgrounds to DARK in service detail pages - MAXIMUM PRIORITY */
html body .servicedetail .bg-light,
html body .servicedetail .bg-gray,
html body .servicedetail .bg-light.card-body,
html body .servicedetail .bg-gray.card-body,
html body .servicedetail div.bg-light,
html body .servicedetail div.bg-gray {
    background-color: rgba(18, 22, 34, 0.6) !important;
}

/* FORCE login panel background */
html body #logininfo,
html body [data-toggle="popover"] + div {
    background-color: rgba(18, 22, 34, 0.6) !important;
}

/* Create button - blue background with white text */
.create {
    background-color: #0ea5e9 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Force ALL text in service detail to WHITE - override any gray colors */
html body .servicedetail,
html body .servicedetail *,
html body .servicedetail p,
html body .servicedetail span,
html body .servicedetail div,
html body .servicedetail h1,
html body .servicedetail h2,
html body .servicedetail h3,
html body .servicedetail h4,
html body .servicedetail h5,
html body .servicedetail h6,
html body .servicedetail label,
html body .servicedetail a,
html body .servicedetail i,
html body .servicedetail strong,
html body .servicedetail b {
    color: #ffffff !important;
}

/* Force override gray colors specifically */
html body .servicedetail [style*="#7C7C7C"],
html body .servicedetail [style*="#7c7c7c"],
html body .servicedetail [style*="rgb(124, 124, 124)"],
html body .servicedetail [style*="rgb(124,124,124)"] {
    color: #ffffff !important;
}

/* Force all backgrounds in settings tab to dark - covers ISO and startup items */
html body .servicedetail #settings1,
html body .servicedetail #settings1 div,
html body .servicedetail #settings1 .bg-light,
html body .servicedetail #settings1 .bg-gray,
html body .servicedetail #settings1 .card-body,
html body .servicedetail #settings1 .row,
html body .servicedetail #settings1 .col-md-12,
html body .servicedetail #settings1 .btn {
    background-color: rgba(18, 22, 34, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* Specifically target ISO and startup containers */
html body .servicedetail [class*="iso"],
html body .servicedetail [class*="ISO"],
html body .servicedetail [class*="mount"],
html body .servicedetail [class*="boot"],
html body .servicedetail [class*="startup"],
html body .servicedetail [class*="Startup"],
html body .servicedetail [class*="Boot"],
html body .servicedetail [id*="iso"],
html body .servicedetail [id*="mounting"],
html body .servicedetail [id*="startup"],
html body .servicedetail [id*="boot"] {
    background-color: rgba(18, 22, 34, 0.6) !important;
    color: #ffffff !important;
}

/* Force all divs in settings tab to have dark background */
html body .servicedetail #settings1 > div {
    background-color: rgba(18, 22, 34, 0.6) !important;
}

/* Force public_title_text to white */
html body .servicedetail .public_title_text,
html body .servicedetail span.public_title_text,
html body .servicedetail [class*="public_title"] {
    color: #ffffff !important;
}

/* Force ALL canvas elements to dark background - MAXIMUM PRIORITY */
html body .servicedetail canvas,
html body .servicedetail [data-zr-dom-id] {
    background: #1a1a2e !important;
    background-color: #1a1a2e !important;
}

/* Force tab-pane backgrounds */
html body .servicedetail .tab-pane,
html body .servicedetail #dosage,
html body .servicedetail #settings1,
html body .servicedetail #finance,
html body .servicedetail .tab-content {
    background: #1a1a2e !important;
    background-color: #1a1a2e !important;
}

/* Override ANY inline style background in servicedetail */
html body .servicedetail [style*="background"],
html body .servicedetail [style*="background-color"] {
    background: #1a1a2e !important;
    background-color: #1a1a2e !important;
}


/* ========== FINAL FORCE DARK BACKGROUND FOR ALL CANVAS ========== */
/* Force #usedChartBox canvas to dark */
#usedChartBox canvas,
#usedChartBox [data-zr-dom-id],
div#usedChartBox canvas,
div#usedChartBox [data-zr-dom-id] {
    background: #1a1a2e !important;
    background-color: #1a1a2e !important;
}

/* Force ALL canvas in servicedetail to dark */
body .servicedetail canvas,
body .servicedetail [data-zr-dom-id] {
    background: #1a1a2e !important;
    background-color: #1a1a2e !important;
}

/* Override any inline style on canvas with dark background */
body .servicedetail [style*="position: absolute"],
body .servicedetail [style*="position:absolute"] {
    background: #1a1a2e !important;
    background-color: #1a1a2e !important;
}

/* ========== FORCE TEXT COLORS IN SETTINGS TAB ========== */
/* Force ALL text in settings1 to white color */
#settings1,
#settings1 *,
#settings1 h1,
#settings1 h2,
#settings1 h3,
#settings1 h4,
#settings1 h5,
#settings1 h6,
#settings1 p,
#settings1 span,
#settings1 label,
#settings1 div,
#settings1 td,
#settings1 th,
#settings1 tr,
#settings1 .public_title_text {
    color: #ffffff !important;
}

/* Force all bold text to blue */
#settings1 b,
#settings1 strong {
    color: #1976d2 !important;
}

/* Force table text colors */
#settings1 table,
#settings1 .table,
#settings1 .table tbody,
#settings1 .table tr,
#settings1 .table td,
#settings1 .table th {
    color: #ffffff !important;
}

/* Force links */
#settings1 a,
#settings1 a:link,
#settings1 a:visited {
    color: #1976d2 !important;
}

/* ========== DARK BACKGROUND FOR ISO AND STARTUP ITEMS ========== */
/* Mounting ISO section */
.mountingISO,
.startupItem {
    background-color: rgba(18, 22, 34, 0.6) !important;
}

.iso-box,
.startup-box {
    background-color: rgba(26, 26, 46, 0.8) !important;
    border-radius: 8px;
}

.iso-box .filter-text,
.startup-box .filter-text {
    background-color: rgba(26, 26, 46, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
}

.iso-box .filter-title,
.startup-box .filter-title {
    background-color: transparent !important;
    color: #ffffff !important;
}

.iso-box .filter-list,
.startup-box .filter-list {
    background-color: rgba(18, 22, 34, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
}

.iso-box .filter-list li a,
.startup-box .filter-list li a {
    color: #ffffff !important;
}

.iso-box .filter-list li:hover,
.startup-box .filter-list li:hover {
    background-color: rgba(23, 26, 38, 0.9) !important;
}

.iso-box .filter-list li.filter-selected,
.startup-box .filter-list li.filter-selected {
    background-color: rgba(0, 97, 255, 0.2) !important;
}

/* Force text colors in these sections */
.mountingISO .public_title_text,
.startupItem .public_title_text {
    color: #ffffff !important;
}

.mountingISO_btn,
.startupItem_btn {
    background-color: rgba(18, 22, 34, 0.6) !important;
}

/* ========== FIX MODAL Z-INDEX ISSUE ========== */
/* Hide modal backdrop completely to prevent overlay issues */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show,
.modal-backdrop.fade.show {
    display: none !important;
}

/* Ensure modal is visible and properly positioned */
.modal,
.modal.fade,
.modal.show,
.modal.fade.show,
body.modal-open .modal {
    z-index: 9999 !important;
}

/* Ensure modal dialog is properly positioned */
.modal-dialog,
.modal .modal-dialog {
    z-index: 10000 !important;
    position: relative !important;
}

/* Ensure modal content is on top */
.modal-content {
    z-index: 10001 !important;
    position: relative !important;
}

/* ========== FIX MODAL DROPDOWN/SELECT STYLING ========== */
/* Dark theme for all select/dropdown elements in modals */
.modal select,
.modal .form-control select,
.modal .bootstrap-select .dropdown-toggle {
    background-color: rgba(18, 22, 34, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

/* Dropdown menu in modals */
.modal .bootstrap-select .dropdown-menu {
    background-color: rgba(18, 22, 34, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

/* Dropdown items in modals */
.modal .bootstrap-select .dropdown-menu li a,
.modal .dropdown-item {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Dropdown items hover state */
.modal .bootstrap-select .dropdown-menu li a:hover,
.modal .dropdown-item:hover {
    background-color: rgba(14, 165, 233, 0.25) !important;
    color: #ffffff !important;
}

/* Selected item in dropdown */
.modal .bootstrap-select .dropdown-menu li.selected a,
.modal .bootstrap-select .dropdown-menu li.active a {
    background-color: rgba(14, 165, 233, 0.35) !important;
    color: #ffffff !important;
}