body.bg-gray-100,
body.bg-slate-50 {
    background:
        radial-gradient(circle at top left, rgba(15, 23, 42, 0.03), transparent 24%),
        radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.05), transparent 26%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 48%, #eef2ff 100%);
    color: #0f172a;
}

.hidden {
    display: none !important;
}

#loginScreen {
    background:
        radial-gradient(circle at top, rgba(59, 130, 246, 0.09), transparent 20%),
        radial-gradient(circle at bottom right, rgba(15, 23, 42, 0.05), transparent 26%),
        linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%) !important;
}

#loginScreen .bg-white {
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.10);
}

#dashboardScreen.superadmin-dashboard {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    grid-template-areas:
        "header header"
        "stats stats"
        "sidebar main";
    align-items: start;
    min-height: 100vh;
}

#dashboardHeader {
    grid-area: header;
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

#dashboardHeaderInner {
    max-width: 100%;
    padding-inline: 1.5rem;
}

#statsSection {
    grid-area: stats;
    padding: 1.25rem 1.5rem 0;
    max-width: 100%;
}

#statsSection > .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

#statsSection .stat-card {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1.25rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.07);
}

#dashboardNavShell {
    grid-area: sidebar;
    margin: 1.25rem 0 1.5rem 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.07);
    position: relative;
    align-self: stretch;
    overflow-x: hidden;
    overflow-y: visible;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    min-height: calc(100% - 0.25rem);
}

#dashboardNavShell > .container {
    max-width: none;
    margin: 0;
    padding: 0;
}

#superadminNavTabs {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem;
}

.sa-nav-group {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1.1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    overflow: hidden;
}

.sa-nav-group > summary {
    list-style: none;
}

.sa-nav-group > summary::-webkit-details-marker {
    display: none;
}

.sa-nav-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    cursor: pointer;
    font-weight: 600;
    color: #1e293b;
}

.sa-nav-summary:hover {
    background: rgba(15, 23, 42, 0.03);
}

.sa-nav-chevron {
    color: #94a3b8;
    transition: transform 0.16s ease;
}

.sa-nav-group:not([open]) .sa-nav-chevron {
    transform: rotate(-90deg);
}

.sa-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0 0.75rem 0.85rem;
}

.tab-btn {
    width: 100%;
    text-align: left;
    border: 0 !important;
    border-radius: 1rem;
    padding: 0.85rem 1rem !important;
    color: #334155 !important;
    transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.tab-btn:hover {
    background: rgba(15, 23, 42, 0.05);
    color: #0f172a !important;
    transform: translateX(2px);
}

.tab-btn.active {
    background: #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
}

#dashboardContent {
    grid-area: main;
    max-width: 100%;
    padding: 1.25rem 1.5rem 1.5rem;
}

.tab-content .bg-white,
.modal-content {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.15);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.06);
}

.stat-card,
.tab-content .bg-white,
.modal-content,
.diagnostic-result,
#docsCatalogList button,
#cleanupCards button {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.stat-card:hover,
.diagnostic-result[open],
#docsCatalogList button:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.10);
}

.service-pill.ok { background: #dcfce7; color: #166534; }
.service-pill.warning { background: #fef3c7; color: #92400e; }
.service-pill.error { background: #fee2e2; color: #991b1b; }
.service-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.diagnostic-result summary::-webkit-details-marker,
#schemaOverview summary::-webkit-details-marker {
    display: none;
}

#docsCatalogList button {
    text-align: left;
}

#docsCatalogList button:hover {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(248, 250, 252, 0.96);
}

.sa-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.schema-store-shell {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1rem;
    padding: 0.75rem;
    overflow: auto;
    min-height: 420px;
    max-height: 72vh;
    cursor: grab;
    touch-action: none;
    background:
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        #f8fafc;
    background-size: 24px 24px;
}

.schema-store-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.schema-store-panel:fullscreen {
    background: #ffffff;
    padding: 1rem;
    overflow: auto;
}

.schema-store-panel:fullscreen .schema-store-shell {
    min-height: calc(100vh - 220px);
    max-height: none;
}

.schema-store-panel:-webkit-full-screen {
    background: #ffffff;
    padding: 1rem;
    overflow: auto;
}

.schema-store-panel:-webkit-full-screen .schema-store-shell {
    min-height: calc(100vh - 220px);
    max-height: none;
}

.schema-store-shell.is-panning,
.schema-erd-shell.is-panning {
    cursor: grabbing;
    user-select: none;
}

.schema-store-viewport {
    width: max-content;
    transform-origin: top left;
    transition: transform 0.16s ease;
}

#docsApiFramePane {
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
}

#docsApiFrame {
    background: #ffffff !important;
    color-scheme: light !important;
}

#docsEditor {
    resize: vertical;
    min-height: 420px;
}

#docsPreview {
    min-height: 280px;
}

.doc-preview h1,
.doc-preview h2,
.doc-preview h3,
.doc-preview h4 {
    font-weight: 700;
    color: #0f172a;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.doc-preview p {
    margin-bottom: 0.75rem;
    color: #334155;
    line-height: 1.7;
}

.doc-preview ul,
.doc-preview ol {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    color: #334155;
}

.doc-preview ul { list-style: disc; }
.doc-preview ol { list-style: decimal; }

.doc-preview pre,
#docsPreview pre,
#diagnosticsResults pre,
#diagnosticsManualResult pre {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 1rem;
}

.doc-preview code,
#docsPreview code {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    padding: 0.12rem 0.32rem;
    border-radius: 0.35rem;
}

.doc-preview pre code,
#docsPreview pre code {
    background: transparent !important;
    color: inherit !important;
    padding: 0;
}

.doc-preview blockquote {
    border-left: 4px solid rgba(148, 163, 184, 0.34);
    padding-left: 1rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.chart-bars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
    gap: 0.6rem;
    align-items: end;
    min-height: 200px;
}

.chart-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}

.chart-bar__value {
    font-size: 0.68rem;
    color: #64748b;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    min-height: 52px;
}

.chart-bar__track {
    width: 100%;
    height: 148px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.18), rgba(148, 163, 184, 0.08));
    display: flex;
    align-items: end;
    overflow: hidden;
}

.chart-bar__fill {
    width: 100%;
    border-radius: 999px;
    background: linear-gradient(180deg, #0f172a 0%, #334155 100%);
    min-height: 10%;
}

.chart-bar__label {
    font-size: 0.68rem;
    color: #64748b;
    text-align: center;
}

.modal {
    display: none;
    position: fixed;
    z-index: 60;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    width: min(1100px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    border-radius: 1.4rem;
    padding: 1.25rem;
}

.schema-erd-shell {
    overflow: auto;
    min-height: 420px;
    max-height: 72vh;
    cursor: grab;
    touch-action: none;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background:
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        #f8fafc;
    background-size: 28px 28px;
    padding: 1rem;
}

.schema-erd-viewport {
    width: max-content;
    transition: transform 0.16s ease;
}

#superadminSidebarToggle {
    display: none;
}

@media (max-width: 1024px) {
    #superadminSidebarToggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #dashboardScreen.superadmin-dashboard {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "stats"
            "main";
    }

    #dashboardNavShell {
        position: fixed;
        inset: 4.8rem auto 1rem 1rem;
        width: min(84vw, 320px);
        max-height: calc(100vh - 5.8rem);
        min-height: auto;
        margin: 0;
        transform: translateX(calc(-100% - 1.25rem));
        transition: transform 0.2s ease;
        z-index: 45;
        overflow-y: auto;
    }

    #dashboardScreen.sa-sidebar-open #dashboardNavShell {
        transform: translateX(0);
    }

    #dashboardContent,
    #statsSection {
        padding-inline: 1rem;
    }

    #dashboardHeaderInner {
        padding-inline: 1rem;
    }
}

@media (max-width: 640px) {
    #statsSection,
    #dashboardContent {
        padding-inline: 0.75rem;
    }

    .tab-btn {
        padding: 0.75rem 0.85rem !important;
    }

    .modal-content {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
        border-radius: 1rem;
        padding: 1rem;
    }
}

body[data-superadmin-theme="dark"] {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 22%),
        radial-gradient(circle at bottom right, rgba(148, 163, 184, 0.05), transparent 24%),
        linear-gradient(180deg, #020202 0%, #060606 38%, #0b0b0c 100%);
    color: #e2e8f0;
}

body[data-superadmin-theme="dark"] #loginScreen,
body[data-superadmin-theme="dark"] #dashboardHeader,
body[data-superadmin-theme="dark"] #dashboardNavShell,
body[data-superadmin-theme="dark"] .tab-content .bg-white,
body[data-superadmin-theme="dark"] .modal-content,
body[data-superadmin-theme="dark"] .stat-card,
body[data-superadmin-theme="dark"] .bg-slate-50,
body[data-superadmin-theme="dark"] .bg-gray-50,
body[data-superadmin-theme="dark"] .bg-white {
    background: rgba(10, 10, 11, 0.96) !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.14) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.42) !important;
}

body[data-superadmin-theme="dark"] #dashboardHeader {
    background: rgba(4, 4, 5, 0.96) !important;
}

body[data-superadmin-theme="dark"] #dashboardNavShell {
    background: rgba(9, 9, 10, 0.95) !important;
}

body[data-superadmin-theme="dark"] .sa-nav-group {
    background: linear-gradient(180deg, rgba(24, 24, 27, 0.98), rgba(14, 14, 16, 0.96)) !important;
    border-color: rgba(100, 116, 139, 0.32) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body[data-superadmin-theme="dark"] .sa-nav-summary {
    color: #f8fafc !important;
    background: rgba(17, 24, 39, 0.78) !important;
}

body[data-superadmin-theme="dark"] .sa-nav-summary:hover {
    background: rgba(30, 41, 59, 0.94) !important;
}

body[data-superadmin-theme="dark"] .sa-nav-chevron {
    color: #cbd5e1 !important;
}

body[data-superadmin-theme="dark"] .sa-nav-list {
    background: transparent !important;
}

body[data-superadmin-theme="dark"] .tab-btn {
    color: #dbe4f0 !important;
}

body[data-superadmin-theme="dark"] .tab-btn:hover {
    background: rgba(148, 163, 184, 0.14) !important;
    color: #ffffff !important;
}

body[data-superadmin-theme="dark"] .tab-btn.active {
    background: #f8fafc !important;
    color: #0f172a !important;
}

body[data-superadmin-theme="dark"] .sa-nav-group:not([open]) .sa-nav-summary {
    border-bottom: 0 !important;
}

body[data-superadmin-theme="dark"] .service-pill.ok {
    background: rgba(20, 83, 45, 0.64) !important;
    color: #dcfce7 !important;
    border: 1px solid rgba(74, 222, 128, 0.28);
}

body[data-superadmin-theme="dark"] .service-pill.warning {
    background: rgba(120, 53, 15, 0.64) !important;
    color: #fde68a !important;
    border: 1px solid rgba(251, 191, 36, 0.26);
}

body[data-superadmin-theme="dark"] .service-pill.error {
    background: rgba(127, 29, 29, 0.64) !important;
    color: #fecaca !important;
    border: 1px solid rgba(248, 113, 113, 0.26);
}

body[data-superadmin-theme="dark"] .text-gray-800,
body[data-superadmin-theme="dark"] .text-slate-900,
body[data-superadmin-theme="dark"] .text-slate-800,
body[data-superadmin-theme="dark"] .text-gray-700,
body[data-superadmin-theme="dark"] .text-slate-700 {
    color: #f8fafc !important;
}

body[data-superadmin-theme="dark"] .text-gray-600,
body[data-superadmin-theme="dark"] .text-gray-500,
body[data-superadmin-theme="dark"] .text-slate-600,
body[data-superadmin-theme="dark"] .text-slate-500,
body[data-superadmin-theme="dark"] .text-slate-400 {
    color: #cbd5e1 !important;
}

body[data-superadmin-theme="dark"] .border,
body[data-superadmin-theme="dark"] .border-gray-200,
body[data-superadmin-theme="dark"] .border-slate-200 {
    border-color: rgba(148, 163, 184, 0.18) !important;
}

body[data-superadmin-theme="dark"] input,
body[data-superadmin-theme="dark"] select,
body[data-superadmin-theme="dark"] textarea,
body[data-superadmin-theme="dark"] iframe {
    background: rgba(12, 12, 13, 0.95) !important;
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

body[data-superadmin-theme="dark"] #docsApiFramePane,
body[data-superadmin-theme="dark"] #docsApiFrame {
    background: #ffffff !important;
    color: #0f172a !important;
    color-scheme: light !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

body[data-superadmin-theme="dark"] .doc-preview p,
body[data-superadmin-theme="dark"] .doc-preview li,
body[data-superadmin-theme="dark"] .doc-preview blockquote,
body[data-superadmin-theme="dark"] .doc-preview h1,
body[data-superadmin-theme="dark"] .doc-preview h2,
body[data-superadmin-theme="dark"] .doc-preview h3,
body[data-superadmin-theme="dark"] .doc-preview h4 {
    color: #e2e8f0 !important;
}

body[data-superadmin-theme="dark"] .doc-preview code,
body[data-superadmin-theme="dark"] #docsPreview code {
    background: rgba(30, 41, 59, 0.9) !important;
    color: #93c5fd !important;
}

body[data-superadmin-theme="dark"] .schema-erd-shell {
    background:
        linear-gradient(90deg, rgba(148, 163, 184, 0.09) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148, 163, 184, 0.09) 1px, transparent 1px),
        #050505;
}

body[data-superadmin-theme="dark"] .schema-store-shell {
    background:
        linear-gradient(90deg, rgba(148, 163, 184, 0.09) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148, 163, 184, 0.09) 1px, transparent 1px),
        #050505;
    border-color: rgba(148, 163, 184, 0.16);
}

body[data-superadmin-theme="dark"] .schema-store-panel:fullscreen {
    background: #050505;
    color: #e2e8f0;
}

body[data-superadmin-theme="dark"] .sa-theme-toggle,
body[data-superadmin-theme="dark"] button.bg-white,
body[data-superadmin-theme="dark"] button.bg-gray-100,
body[data-superadmin-theme="dark"] button.bg-slate-100,
body[data-superadmin-theme="dark"] button.bg-gray-300,
body[data-superadmin-theme="dark"] button.bg-slate-200,
body[data-superadmin-theme="dark"] a.bg-white,
body[data-superadmin-theme="dark"] a.bg-gray-100,
body[data-superadmin-theme="dark"] a.bg-gray-300,
body[data-superadmin-theme="dark"] a.bg-slate-100,
body[data-superadmin-theme="dark"] .bg-white.text-gray-700,
body[data-superadmin-theme="dark"] .bg-white.text-slate-700,
body[data-superadmin-theme="dark"] .bg-gray-100.text-gray-700,
body[data-superadmin-theme="dark"] .bg-slate-100.text-slate-700,
body[data-superadmin-theme="dark"] .bg-gray-300.text-gray-700,
body[data-superadmin-theme="dark"] .bg-gray-50.text-gray-700,
body[data-superadmin-theme="dark"] .bg-slate-50.text-slate-700 {
    background: rgba(14, 14, 16, 0.94) !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

body[data-superadmin-theme="dark"] button.bg-white:hover,
body[data-superadmin-theme="dark"] button.bg-gray-100:hover,
body[data-superadmin-theme="dark"] button.bg-slate-100:hover,
body[data-superadmin-theme="dark"] button.bg-gray-300:hover,
body[data-superadmin-theme="dark"] a.bg-white:hover,
body[data-superadmin-theme="dark"] a.bg-gray-100:hover,
body[data-superadmin-theme="dark"] a.bg-gray-300:hover,
body[data-superadmin-theme="dark"] .hover\:bg-gray-50:hover,
body[data-superadmin-theme="dark"] .hover\:bg-gray-200:hover,
body[data-superadmin-theme="dark"] .hover\:bg-slate-50:hover,
body[data-superadmin-theme="dark"] .hover\:bg-slate-100:hover {
    background: rgba(30, 41, 59, 0.96) !important;
    color: #ffffff !important;
}

body[data-superadmin-theme="dark"] .bg-gray-100,
body[data-superadmin-theme="dark"] .bg-gray-50,
body[data-superadmin-theme="dark"] .bg-slate-50,
body[data-superadmin-theme="dark"] .bg-slate-100 {
    background: rgba(14, 14, 16, 0.86) !important;
    color: #e2e8f0 !important;
}

body[data-superadmin-theme="dark"] .bg-gray-200,
body[data-superadmin-theme="dark"] .bg-gray-300 {
    background: rgba(32, 32, 36, 0.96) !important;
    color: #f8fafc !important;
}

body[data-superadmin-theme="dark"] button,
body[data-superadmin-theme="dark"] a.rounded-lg,
body[data-superadmin-theme="dark"] a.rounded-xl,
body[data-superadmin-theme="dark"] a.rounded-2xl {
    color: #e2e8f0;
}

body[data-superadmin-theme="dark"] .hover\:text-gray-700:hover,
body[data-superadmin-theme="dark"] .hover\:text-gray-600:hover,
body[data-superadmin-theme="dark"] .hover\:text-slate-700:hover {
    color: #ffffff !important;
}

body[data-superadmin-theme="dark"] input::placeholder,
body[data-superadmin-theme="dark"] textarea::placeholder {
    color: #94a3b8 !important;
}

body[data-superadmin-theme="dark"] .bg-blue-100,
body[data-superadmin-theme="dark"] .bg-blue-50,
body[data-superadmin-theme="dark"] .bg-indigo-50,
body[data-superadmin-theme="dark"] .bg-indigo-100,
body[data-superadmin-theme="dark"] .bg-sky-100,
body[data-superadmin-theme="dark"] .bg-violet-100 {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

body[data-superadmin-theme="dark"] .bg-green-100.text-green-600,
body[data-superadmin-theme="dark"] .bg-green-100.text-green-700,
body[data-superadmin-theme="dark"] .bg-emerald-100.text-emerald-700,
body[data-superadmin-theme="dark"] .bg-emerald-50.text-emerald-700 {
    background: rgba(20, 83, 45, 0.64) !important;
    color: #dcfce7 !important;
    border-color: rgba(74, 222, 128, 0.28) !important;
}

body[data-superadmin-theme="dark"] .bg-red-100.text-red-600,
body[data-superadmin-theme="dark"] .bg-red-100.text-red-700,
body[data-superadmin-theme="dark"] .bg-red-50.text-red-700,
body[data-superadmin-theme="dark"] .bg-rose-50.text-rose-700 {
    background: rgba(127, 29, 29, 0.64) !important;
    color: #fecaca !important;
    border-color: rgba(248, 113, 113, 0.26) !important;
}

body[data-superadmin-theme="dark"] .bg-amber-100.text-amber-700,
body[data-superadmin-theme="dark"] .bg-amber-50.text-amber-700,
body[data-superadmin-theme="dark"] .bg-yellow-100.text-yellow-600 {
    background: rgba(120, 53, 15, 0.64) !important;
    color: #fde68a !important;
    border-color: rgba(251, 191, 36, 0.24) !important;
}

body[data-superadmin-theme="dark"] .bg-gray-100.text-gray-600,
body[data-superadmin-theme="dark"] .bg-gray-100.text-gray-700,
body[data-superadmin-theme="dark"] .bg-slate-100.text-slate-500,
body[data-superadmin-theme="dark"] .bg-slate-100.text-slate-700,
body[data-superadmin-theme="dark"] .bg-sky-100.text-sky-700,
body[data-superadmin-theme="dark"] .bg-violet-100.text-violet-700,
body[data-superadmin-theme="dark"] .bg-blue-100.text-blue-700,
body[data-superadmin-theme="dark"] .bg-indigo-100.text-indigo-700,
body[data-superadmin-theme="dark"] .bg-indigo-50.text-indigo-700 {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

body[data-superadmin-theme="dark"] .bg-green-100,
body[data-superadmin-theme="dark"] .bg-green-50,
body[data-superadmin-theme="dark"] .bg-emerald-50 {
    background: rgba(6, 95, 70, 0.28) !important;
    color: #a7f3d0 !important;
}

body[data-superadmin-theme="dark"] .bg-red-100,
body[data-superadmin-theme="dark"] .bg-red-50,
body[data-superadmin-theme="dark"] .bg-rose-50 {
    background: rgba(127, 29, 29, 0.28) !important;
    color: #fecaca !important;
}

body[data-superadmin-theme="dark"] .bg-amber-50,
body[data-superadmin-theme="dark"] .bg-yellow-100 {
    background: rgba(120, 53, 15, 0.28) !important;
    color: #fde68a !important;
}

body[data-superadmin-theme="dark"] .bg-purple-100 {
    background: rgba(76, 29, 149, 0.28) !important;
    color: #ddd6fe !important;
}

body[data-superadmin-theme="dark"] .text-blue-600,
body[data-superadmin-theme="dark"] .text-blue-700,
body[data-superadmin-theme="dark"] .text-indigo-600,
body[data-superadmin-theme="dark"] .text-indigo-700,
body[data-superadmin-theme="dark"] .text-sky-700,
body[data-superadmin-theme="dark"] .text-violet-700 {
    color: #f8fafc !important;
}

body[data-superadmin-theme="dark"] .text-red-600,
body[data-superadmin-theme="dark"] .text-red-700,
body[data-superadmin-theme="dark"] .text-rose-700,
body[data-superadmin-theme="dark"] .text-rose-800 {
    color: #fda4af !important;
}

body[data-superadmin-theme="dark"] .text-green-600,
body[data-superadmin-theme="dark"] .text-green-700,
body[data-superadmin-theme="dark"] .text-emerald-700,
body[data-superadmin-theme="dark"] .text-emerald-800 {
    color: #86efac !important;
}

body[data-superadmin-theme="dark"] .text-amber-700,
body[data-superadmin-theme="dark"] .text-amber-800,
body[data-superadmin-theme="dark"] .text-yellow-600,
body[data-superadmin-theme="dark"] .text-yellow-700 {
    color: #fcd34d !important;
}

body[data-superadmin-theme="dark"] .text-gray-900,
body[data-superadmin-theme="dark"] .text-slate-950,
body[data-superadmin-theme="dark"] .text-black {
    color: #ffffff !important;
}

body[data-superadmin-theme="dark"] code.bg-gray-100,
body[data-superadmin-theme="dark"] .bg-white code,
body[data-superadmin-theme="dark"] .bg-slate-50 code {
    background: rgba(30, 41, 59, 0.95) !important;
    color: #bfdbfe !important;
}

body[data-superadmin-theme="dark"] .diagnostic-result,
body[data-superadmin-theme="dark"] .service-pill,
body[data-superadmin-theme="dark"] .rounded-xl.bg-white,
body[data-superadmin-theme="dark"] .rounded-2xl.bg-white {
    color: inherit;
}

body[data-superadmin-theme="dark"] button.bg-blue-600,
body[data-superadmin-theme="dark"] button.bg-blue-500,
body[data-superadmin-theme="dark"] button.bg-indigo-500,
body[data-superadmin-theme="dark"] button.bg-indigo-600,
body[data-superadmin-theme="dark"] button.bg-slate-600,
body[data-superadmin-theme="dark"] button.bg-slate-900,
body[data-superadmin-theme="dark"] button.bg-red-600,
body[data-superadmin-theme="dark"] button.bg-rose-600,
body[data-superadmin-theme="dark"] button.bg-emerald-600,
body[data-superadmin-theme="dark"] button.bg-amber-500,
body[data-superadmin-theme="dark"] .bg-blue-500.text-white,
body[data-superadmin-theme="dark"] .bg-blue-600.text-white,
body[data-superadmin-theme="dark"] .bg-indigo-500.text-white,
body[data-superadmin-theme="dark"] .bg-slate-600.text-white,
body[data-superadmin-theme="dark"] .bg-slate-900.text-white {
    background: linear-gradient(180deg, #0a0a0b 0%, #18181b 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
}

body[data-superadmin-theme="dark"] .hover\:bg-blue-600:hover,
body[data-superadmin-theme="dark"] .hover\:bg-blue-700:hover,
body[data-superadmin-theme="dark"] .hover\:bg-indigo-600:hover,
body[data-superadmin-theme="dark"] .hover\:bg-slate-700:hover,
body[data-superadmin-theme="dark"] button.bg-blue-600:hover,
body[data-superadmin-theme="dark"] button.bg-blue-500:hover,
body[data-superadmin-theme="dark"] button.bg-indigo-500:hover,
body[data-superadmin-theme="dark"] button.bg-slate-600:hover,
body[data-superadmin-theme="dark"] button.bg-slate-900:hover {
    background: #242428 !important;
    color: #ffffff !important;
}

body[data-superadmin-theme="dark"] .border-indigo-100,
body[data-superadmin-theme="dark"] .border-indigo-200,
body[data-superadmin-theme="dark"] .border-blue-100,
body[data-superadmin-theme="dark"] .border-blue-200,
body[data-superadmin-theme="dark"] .border-sky-100,
body[data-superadmin-theme="dark"] .border-violet-100,
body[data-superadmin-theme="dark"] .border-green-100,
body[data-superadmin-theme="dark"] .border-emerald-100,
body[data-superadmin-theme="dark"] .border-amber-100,
body[data-superadmin-theme="dark"] .border-red-100,
body[data-superadmin-theme="dark"] .border-rose-100 {
    border-color: rgba(148, 163, 184, 0.18) !important;
}

body[data-superadmin-theme="dark"] .bg-white\/80,
body[data-superadmin-theme="dark"] .bg-white\/90 {
    background: rgba(20, 20, 22, 0.94) !important;
    color: #f8fafc !important;
}

body[data-superadmin-theme="dark"] #otpLatestCard {
    background: linear-gradient(180deg, rgba(8, 8, 10, 0.98), rgba(19, 19, 22, 0.98)) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
}

body[data-superadmin-theme="dark"] #otpLatestCard .text-5xl,
body[data-superadmin-theme="dark"] #otpRecentTable .text-2xl {
    color: #ffffff !important;
}

body[data-superadmin-theme="dark"] #otpLatestCard .otp-meta-card,
body[data-superadmin-theme="dark"] #otpRecentTable .otp-recent-row {
    background: rgba(16, 16, 18, 0.96) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
}

body[data-superadmin-theme="dark"] #otpRecentTable .rounded-xl {
    background: rgba(11, 11, 13, 0.94);
    border-color: rgba(148, 163, 184, 0.16) !important;
}

.otp-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.58rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.88);
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.otp-copy-btn:hover {
    background: #ffffff;
    color: #020617;
    border-color: rgba(15, 23, 42, 0.16);
    transform: translateY(-1px);
}

.otp-copy-btn svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
}

body[data-superadmin-theme="dark"] .otp-copy-btn {
    background: rgba(14, 14, 16, 0.94);
    color: #f8fafc;
    border-color: rgba(148, 163, 184, 0.18);
}

body[data-superadmin-theme="dark"] .otp-copy-btn:hover {
    background: rgba(36, 36, 40, 0.98);
    color: #ffffff;
    border-color: rgba(226, 232, 240, 0.22);
}

body[data-superadmin-theme="dark"] #monitoringServiceList > div,
body[data-superadmin-theme="dark"] #monitoringResources > div,
body[data-superadmin-theme="dark"] #monitoringDatasets > div,
body[data-superadmin-theme="dark"] #monitoringConnections > div,
body[data-superadmin-theme="dark"] #monitoringInventory > div,
body[data-superadmin-theme="dark"] #aimodelsList > div,
body[data-superadmin-theme="dark"] #plansList > div,
body[data-superadmin-theme="dark"] #customersList > div,
body[data-superadmin-theme="dark"] #projectsList > div,
body[data-superadmin-theme="dark"] #endusersList > div,
body[data-superadmin-theme="dark"] #providersList > div,
body[data-superadmin-theme="dark"] #platformsList > div,
body[data-superadmin-theme="dark"] #conversationsList > div,
body[data-superadmin-theme="dark"] #sessionsList > div,
body[data-superadmin-theme="dark"] #notificationsList > div,
body[data-superadmin-theme="dark"] #notificationDeliveries > div,
body[data-superadmin-theme="dark"] #supportTicketsList > button,
body[data-superadmin-theme="dark"] #supportTicketThread > div,
body[data-superadmin-theme="dark"] #notificationsSummaryCards > div {
    background: rgba(10, 10, 11, 0.96) !important;
    border-color: rgba(148, 163, 184, 0.14) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
}

body[data-superadmin-theme="dark"] #supportTicketComposer button,
body[data-superadmin-theme="dark"] #notificationsTab button,
body[data-superadmin-theme="dark"] #ticketsTab button {
    color: inherit;
}

body[data-superadmin-theme="dark"] #superadminNavTabs .tab-btn.active,
body[data-superadmin-theme="dark"] #superadminNavTabs .tab-btn.active:hover,
body[data-superadmin-theme="dark"] #superadminNavTabs .tab-btn.active:focus {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: transparent !important;
}

body[data-superadmin-theme="dark"] #superadminNavTabs .tab-btn.active *,
body[data-superadmin-theme="dark"] #superadminNavTabs .tab-btn.active:hover * {
    color: #0f172a !important;
}

body[data-superadmin-theme="dark"] #logsTab .inline-flex.rounded-full.bg-slate-200,
body[data-superadmin-theme="dark"] #logsTab .inline-flex.rounded-full.bg-slate-300,
body[data-superadmin-theme="dark"] #logsTab .inline-flex.rounded-full.bg-gray-200,
body[data-superadmin-theme="dark"] #ticketsTab .inline-flex.rounded-full.bg-slate-200,
body[data-superadmin-theme="dark"] #ticketsTab .inline-flex.rounded-full.bg-slate-300,
body[data-superadmin-theme="dark"] #ticketsTab .inline-flex.rounded-full.bg-gray-200,
body[data-superadmin-theme="dark"] #logsTab .inline-flex.rounded-full.text-slate-600,
body[data-superadmin-theme="dark"] #logsTab .inline-flex.rounded-full.text-slate-700,
body[data-superadmin-theme="dark"] #logsTab .inline-flex.rounded-full.text-gray-600,
body[data-superadmin-theme="dark"] #logsTab .inline-flex.rounded-full.text-gray-700,
body[data-superadmin-theme="dark"] #ticketsTab .inline-flex.rounded-full.text-slate-600,
body[data-superadmin-theme="dark"] #ticketsTab .inline-flex.rounded-full.text-slate-700,
body[data-superadmin-theme="dark"] #ticketsTab .inline-flex.rounded-full.text-gray-600,
body[data-superadmin-theme="dark"] #ticketsTab .inline-flex.rounded-full.text-gray-700 {
    color: #0f172a !important;
}

body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-white,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-gray-100,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-slate-100,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-slate-200,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-violet-50,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-indigo-50,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-blue-50,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-teal-50,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-fuchsia-50,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-cyan-50,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-orange-50,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-amber-50,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-emerald-50,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-lime-50,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-rose-50,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-white\/80,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-white\/90,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-white,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-gray-100,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-slate-100,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-slate-200,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-violet-50,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-indigo-50,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-blue-50,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-teal-50,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-fuchsia-50,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-cyan-50,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-orange-50,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-amber-50,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-emerald-50,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-lime-50,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-rose-50,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-white\/80,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-white\/90,
body[data-superadmin-theme="dark"] #logsTab .bg-white.text-gray-700,
body[data-superadmin-theme="dark"] #logsTab .bg-white.text-slate-700,
body[data-superadmin-theme="dark"] #logsTab .bg-slate-100.text-slate-700,
body[data-superadmin-theme="dark"] #logsTab .bg-gray-100.text-gray-700,
body[data-superadmin-theme="dark"] #logsTab .bg-violet-50.text-violet-700,
body[data-superadmin-theme="dark"] #logsTab .bg-indigo-50.text-indigo-700,
body[data-superadmin-theme="dark"] #logsTab .bg-blue-50.text-blue-700,
body[data-superadmin-theme="dark"] #logsTab .bg-teal-50.text-teal-700,
body[data-superadmin-theme="dark"] #logsTab .bg-fuchsia-50.text-fuchsia-700,
body[data-superadmin-theme="dark"] #logsTab .bg-cyan-50.text-cyan-700,
body[data-superadmin-theme="dark"] #logsTab .bg-orange-50.text-orange-700,
body[data-superadmin-theme="dark"] #logsTab .bg-amber-50.text-amber-700,
body[data-superadmin-theme="dark"] #logsTab .bg-emerald-50.text-emerald-700,
body[data-superadmin-theme="dark"] #logsTab .bg-lime-50.text-lime-700,
body[data-superadmin-theme="dark"] #logsTab .bg-rose-50.text-rose-700,
body[data-superadmin-theme="dark"] #ticketsTab .bg-white.text-gray-700,
body[data-superadmin-theme="dark"] #ticketsTab .bg-white.text-slate-700,
body[data-superadmin-theme="dark"] #ticketsTab .bg-slate-100.text-slate-700,
body[data-superadmin-theme="dark"] #ticketsTab .bg-violet-50.text-violet-700,
body[data-superadmin-theme="dark"] #ticketsTab .bg-indigo-50.text-indigo-700,
body[data-superadmin-theme="dark"] #ticketsTab .bg-blue-50.text-blue-700,
body[data-superadmin-theme="dark"] #ticketsTab .bg-teal-50.text-teal-700,
body[data-superadmin-theme="dark"] #ticketsTab .bg-fuchsia-50.text-fuchsia-700,
body[data-superadmin-theme="dark"] #ticketsTab .bg-cyan-50.text-cyan-700,
body[data-superadmin-theme="dark"] #ticketsTab .bg-orange-50.text-orange-700,
body[data-superadmin-theme="dark"] #ticketsTab .bg-amber-50.text-amber-700,
body[data-superadmin-theme="dark"] #ticketsTab .bg-emerald-50.text-emerald-700,
body[data-superadmin-theme="dark"] #ticketsTab .bg-lime-50.text-lime-700,
body[data-superadmin-theme="dark"] #ticketsTab .bg-rose-50.text-rose-700,
body[data-superadmin-theme="dark"] #ticketsTab .bg-gray-100.text-gray-700 {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: rgba(203, 213, 225, 0.7) !important;
}

body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-white *,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-gray-100 *,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-slate-100 *,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-slate-200 *,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-violet-50 *,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-indigo-50 *,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-blue-50 *,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-teal-50 *,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-fuchsia-50 *,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-cyan-50 *,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-orange-50 *,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-amber-50 *,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-emerald-50 *,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-lime-50 *,
body[data-superadmin-theme="dark"] #logsTab .rounded-full.bg-rose-50 *,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-white *,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-gray-100 *,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-slate-100 *,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-slate-200 *,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-violet-50 *,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-indigo-50 *,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-blue-50 *,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-teal-50 *,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-fuchsia-50 *,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-cyan-50 *,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-orange-50 *,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-amber-50 *,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-emerald-50 *,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-lime-50 *,
body[data-superadmin-theme="dark"] #ticketsTab .rounded-full.bg-rose-50 * {
    color: #0f172a !important;
}