:root {
    --njix-page-bg: #f6f7fb;
    --njix-surface: #ffffff;
    --njix-border: #e7e9ee;
    --njix-text: #111827;
    --njix-muted: #667085;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video {
    max-width: 100%;
}

.client-main,
.admin-main,
.row > * {
    min-width: 0;
}

.panel-card,
.admin-card,
.njx-card,
.login-card {
    height: auto;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.njix-utility-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--njix-border);
    border-radius: 12px;
    background: var(--njix-surface);
    color: var(--njix-text);
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
}

.njix-utility-button:hover {
    border-color: #ff7a00;
    color: #ff7a00;
}

.njix-language-switch {
    display: flex;
    gap: 6px;
}

.njix-language-switch .is-active,
.njix-utility-button.is-active {
    background: #111827;
    color: #ffffff;
    border-color: #111827;
}

html[data-bs-theme="dark"] {
    --njix-page-bg: #0b1120;
    --njix-surface: #111827;
    --njix-border: #293244;
    --njix-text: #f8fafc;
    --njix-muted: #cbd5e1;
}

html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] .client-main,
html[data-bs-theme="dark"] .admin-main {
    background: var(--njix-page-bg) !important;
    color: var(--njix-text) !important;
}

html[data-bs-theme="dark"] .client-sidebar,
html[data-bs-theme="dark"] .client-top,
html[data-bs-theme="dark"] .client-account-menu summary,
html[data-bs-theme="dark"] .client-account-dropdown,
html[data-bs-theme="dark"] .panel-card,
html[data-bs-theme="dark"] .stat-card,
html[data-bs-theme="dark"] .service-card,
html[data-bs-theme="dark"] .service-modern-card,
html[data-bs-theme="dark"] .usage-card,
html[data-bs-theme="dark"] .wp-card,
html[data-bs-theme="dark"] .ftp-summary-card,
html[data-bs-theme="dark"] .database-summary-card,
html[data-bs-theme="dark"] .service-tabs,
html[data-bs-theme="dark"] .tab-btn,
html[data-bs-theme="dark"] .elfinder-note,
html[data-bs-theme="dark"] .admin-top,
html[data-bs-theme="dark"] .admin-card,
html[data-bs-theme="dark"] .njx-nav,
html[data-bs-theme="dark"] .njx-card,
html[data-bs-theme="dark"] .login-card,
html[data-bs-theme="dark"] .quick-action,
html[data-bs-theme="dark"] .action-btn,
html[data-bs-theme="dark"] .service-action {
    background: var(--njix-surface) !important;
    border-color: var(--njix-border) !important;
    color: var(--njix-text) !important;
}

html[data-bs-theme="dark"] .njx-hero,
html[data-bs-theme="dark"] .login-wrap {
    background: linear-gradient(135deg, #0b1120 0%, #172033 100%) !important;
}

html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .bg-white {
    background-color: var(--njix-surface) !important;
    border-color: var(--njix-border) !important;
    color: var(--njix-text) !important;
}

html[data-bs-theme="dark"] .client-link,
html[data-bs-theme="dark"] .client-sub-link,
html[data-bs-theme="dark"] .client-account-dropdown a,
html[data-bs-theme="dark"] .njx-link,
html[data-bs-theme="dark"] .njx-brand,
html[data-bs-theme="dark"] .login-links a,
html[data-bs-theme="dark"] .info-row strong,
html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="dark"] h6,
html[data-bs-theme="dark"] label,
html[data-bs-theme="dark"] legend,
html[data-bs-theme="dark"] .usage-card .value,
html[data-bs-theme="dark"] .form-check-label,
html[data-bs-theme="dark"] .form-label,
html[data-bs-theme="dark"] code {
    color: var(--njix-text);
}

html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .text-secondary,
html[data-bs-theme="dark"] .form-text,
html[data-bs-theme="dark"] .info-row span,
html[data-bs-theme="dark"] .client-account-email,
html[data-bs-theme="dark"] .client-main small,
html[data-bs-theme="dark"] .admin-main small {
    color: var(--njix-muted) !important;
}

html[data-bs-theme="dark"] .usage-card .label,
html[data-bs-theme="dark"] .traffic-label,
html[data-bs-theme="dark"] .ftp-summary-card span,
html[data-bs-theme="dark"] .database-summary-card span,
html[data-bs-theme="dark"] .wp-card span {
    color: var(--njix-muted) !important;
}

html[data-bs-theme="dark"] .info-row,
html[data-bs-theme="dark"] .client-account-email,
html[data-bs-theme="dark"] .client-account-dropdown .account-logout,
html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] hr {
    border-color: var(--njix-border) !important;
}

html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .text-bg-light,
html[data-bs-theme="dark"] .status.bg-light {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

html[data-bs-theme="dark"] .btn-outline-dark {
    border-color: #64748b;
    color: #e2e8f0;
}

html[data-bs-theme="dark"] .btn-outline-dark:hover,
html[data-bs-theme="dark"] .btn-outline-dark:focus {
    background-color: #e2e8f0;
    border-color: #e2e8f0;
    color: #0f172a;
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .input-group-text {
    background-color: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}

html[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #f8fafc;
    --bs-table-border-color: #293244;
}

html[data-bs-theme="dark"] .njix-language-switch .is-active,
html[data-bs-theme="dark"] .njix-utility-button.is-active {
    background: #f8fafc;
    border-color: #f8fafc;
    color: #111827;
}

html[data-bs-theme="dark"] .form-control::placeholder {
    color: #94a3b8;
}

html[data-bs-theme="dark"] .tab-btn.active,
html[data-bs-theme="dark"] .service-action.primary,
html[data-bs-theme="dark"] .action-btn.primary {
    background: linear-gradient(135deg, #ff7a00, #ff9f2f) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

@media (max-width: 900px) {
    .client-main,
    .admin-main {
        width: 100%;
        padding: 14px !important;
    }

    .client-account-bar {
        top: 23px !important;
    }

    .panel-hero {
        padding: 24px 18px !important;
    }

    .panel-card,
    .admin-card,
    .stat-card {
        padding: 18px !important;
    }

    .admin-sidebar {
        display: none;
    }

    .admin-sidebar.open {
        display: block;
    }

    .admin-mobile-top {
        display: flex !important;
    }

    .admin-utility-bar {
        justify-content: center !important;
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .client-account-dropdown {
        width: min(260px, calc(100vw - 28px)) !important;
    }

    .d-flex {
        flex-wrap: wrap;
    }

    .btn,
    .btn-orange,
    button,
    input,
    select {
        max-width: 100%;
    }

    .table {
        font-size: 14px;
    }

    .panel-hero h1,
    .login-title {
        font-size: clamp(26px, 9vw, 34px) !important;
    }
}