/**
 * WPCD SaaS Frontend - UI Refresh
 *
 * Clean, minimal design system inspired by xCloud.
 * Uses Inter font with subtle colors and minimal shadows.
 *
 * IMPORTANT: This file depends on wpcd-theme-variables.css for colors.
 * Load wpcd-theme-variables.css BEFORE this file.
 */

/* ========== BASE STYLES ========== */
/* Apply clean font to all elements */
.wpcd-saas-dashboard,
.wpcd-saas-dashboard *,
.app-sidebar,
.app-main {
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ========== GLOBAL PAGE LOADER ========== */
/* Shows on sidebar navigation and tab changes */
.wpcd-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Visible/active state */
.wpcd-page-loader.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.wpcd-page-loader-spinner {
    width: 40px;
    height: 40px;
}

.wpcd-page-loader-spinner svg {
    width: 100%;
    height: 100%;
    animation: wpcd-loader-rotate 1s linear infinite;
}

.wpcd-page-loader-spinner svg circle {
    stroke: var(--accent, #3b82f6);
    stroke-linecap: round;
    stroke-dasharray: 80, 200;
    stroke-dashoffset: 0;
    animation: wpcd-loader-dash 1.5s ease-in-out infinite;
}

@keyframes wpcd-loader-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes wpcd-loader-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 80, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 80, 200;
        stroke-dashoffset: -125;
    }
}

/* Light theme loader */
[data-theme="light"] .wpcd-page-loader {
    background: rgba(250, 250, 250, 0.8);
}

/* ========== GRADIENT OVERRIDES ========== */
/* NOTE: Most gradients removed from unified-ui.css directly.
   Only keep overrides for inline styles or third-party sources. */

/* Inline style gradients (from PHP templates not yet cleaned) */
[style*="linear-gradient"] {
    background-image: none !important;
}

/* ========== KILL ALL INLINE BACKGROUND COLORS ========== */
/* Override any inline style backgrounds on cards, sections, notices */

/* Security cards with inline backgrounds */
.wpcd-security-card,
.wpcd-security-card[style],
.wpcd-security-warning,
.wpcd-security-warning[style],
.wpcd-security-notice,
.wpcd-security-notice[style] {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
}

.wpcd-security-card h3,
.wpcd-security-card h3[style],
.wpcd-security-warning h3,
.wpcd-security-warning h3[style] {
    color: var(--text) !important;
}

.wpcd-security-card p,
.wpcd-security-card p[style],
.wpcd-security-warning p,
.wpcd-security-warning p[style] {
    color: var(--text-muted) !important;
}

.wpcd-security-card a,
.wpcd-security-card a[style],
.wpcd-security-warning a,
.wpcd-security-warning a[style] {
    color: var(--accent) !important;
}

/* Generic inline style overrides for common patterns */
[style*="background: var(--info"],
[style*="background: var(--success"],
[style*="background: var(--warning"],
[style*="background: var(--danger"],
[style*="background: var(--accent"],
[style*="background:var(--info"],
[style*="background:var(--success"],
[style*="background:var(--warning"],
[style*="background:var(--danger"],
[style*="background:var(--accent"] {
    background: var(--bg-card) !important;
}

/* Override inline colors on text */
[style*="color: var(--info"],
[style*="color: var(--success"],
[style*="color: var(--warning"],
[style*="color: var(--danger"],
[style*="color:var(--info"],
[style*="color:var(--success"],
[style*="color:var(--warning"],
[style*="color:var(--danger"] {
    color: var(--text) !important;
}

/* Section titles */
.wpcd-section-title,
.wpcd-section-title[style] {
    color: var(--text) !important;
    background: transparent !important;
}

.wpcd-section-title i {
    color: var(--accent) !important;
}

/* Tab panels should have no background */
.wpcd-app-tab-panel,
.wpcd-server-tab-panel,
.wpcd-custom-tab-panel,
[class*="-tab-panel"] {
    background: transparent !important;
}

/* Tab content wrappers */
.wpcd-custom-tab-content,
.rwmb-tab-panels {
    background: transparent !important;
}

/* Info boxes/notices with light backgrounds */
[class*="notice"][style*="background"],
[class*="info"][style*="background"],
[class*="warning"][style*="background"],
[class*="alert"][style*="background"] {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
}


/* ========== SIDEBAR - Clean & Minimal ========== */
.app-sidebar {
    background: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border) !important;
}

.sidebar-logo {
    background: transparent !important;
    border: none !important;
}

.sidebar-logo i,
.sidebar-logo svg {
    color: var(--accent) !important;
}

.nav-item {
    border-radius: 0 !important;
    border-left: 2px solid transparent !important;
    transition: color 0.15s ease, border-color 0.15s ease !important;
}

.nav-item:hover {
    background: var(--bg-hover) !important;
    color: var(--text) !important;
}

.nav-item.active {
    background: transparent !important;
    border-left-color: var(--accent) !important;
    color: var(--text) !important;
}

.nav-item.active i {
    color: var(--accent) !important;
}


/* ========== UNIFIED BUTTON SYSTEM ========== */
/*
 * Standard button sizes and styles for all WPCD plugins.
 * Uses semantic classes with consistent sizing.
 * Inherits colors from wpcd-theme-variables.css
 */

/* Base button styles - applies to all button variants */
.btn,
.wpcd-btn,
.wpcd-action-btn,
.wpcd-auto-btn,
.wpcd-saas-button,
.wpcd-git-btn,
.wpcd-nginx-btn,
.wpcd-server-action,
.wpcd-staging-btn,
.wpcd-topbar-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--btn-padding-md, 8px 16px);
    font-size: var(--btn-font-md, 13px);
    font-weight: 500;
    border-radius: var(--btn-radius, 6px);
    border: 1px solid var(--border);
    background: var(--bg-hover);
    color: var(--text-dim);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

/* Hover state for default buttons */
.btn:hover,
.wpcd-btn:hover,
.wpcd-action-btn:hover,
.wpcd-auto-btn:hover,
.wpcd-saas-button:hover,
.wpcd-git-btn:hover,
.wpcd-nginx-btn:hover,
.wpcd-server-action:hover,
.wpcd-staging-btn:hover,
.wpcd-topbar-action-btn:hover {
    background: var(--bg-active);
    border-color: var(--border-hover);
    color: var(--text);
}

/* Disabled state */
.btn:disabled,
.wpcd-btn:disabled,
.wpcd-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Small buttons */
.btn-sm,
.wpcd-btn-small {
    padding: var(--btn-padding-sm, 5px 10px);
    font-size: var(--btn-font-sm, 12px);
}

/* Large buttons */
.btn-lg {
    padding: var(--btn-padding-lg, 10px 18px);
    font-size: var(--btn-font-lg, 14px);
}




/* SECONDARY button - subtle default */
.btn-secondary,
.wpcd-btn-secondary,
.wpcd-auto-btn-secondary,
.wpcd-action-btn.secondary {
    background: transparent;
    border-color: var(--border);
    color: var(--text-muted);
}

.btn-secondary:hover,
.wpcd-btn-secondary:hover,
.wpcd-auto-btn-secondary:hover,
.wpcd-action-btn.secondary:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--accent);
}

/* SUCCESS button — ghost (transparent bg, colored border+text, fills on hover) */
.btn-success,
.wpcd-btn-success,
.wpcd-auto-btn-success,
.wpcd-action-btn.success,
.wpcd-staging-btn.success {
    background: transparent;
    border-color: var(--success);
    color: var(--success);
}

.btn-success:hover,
.wpcd-btn-success:hover,
.wpcd-auto-btn-success:hover,
.wpcd-action-btn.success:hover,
.wpcd-staging-btn.success:hover {
    background: var(--success);
    border-color: var(--success);
    color: var(--text-on-success);
}



.btn-danger:hover,
.wpcd-btn-danger:hover,
.wpcd-auto-btn-danger:hover,
.wpcd-action-btn.danger:hover,
.wpcd-staging-btn.danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--text-on-danger);
}

/* WARNING button — ghost */
.btn-warning,
.wpcd-btn-warning,
.wpcd-auto-btn-warning,
.wpcd-action-btn.warning,
.wpcd-staging-btn.warning {
    background: transparent;
    border-color: var(--warning);
    color: var(--warning);
}

.btn-warning:hover,
.wpcd-btn-warning:hover,
.wpcd-auto-btn-warning:hover,
.wpcd-action-btn.warning:hover,
.wpcd-staging-btn.warning:hover {
    background: var(--warning);
    border-color: var(--warning);
    color: var(--text-on-warning);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
}

/* INFO button */
.btn-info,
.wpcd-btn-info,
.wpcd-auto-btn-info,
.wpcd-action-btn.info {
    background: var(--bg-hover, rgba(255,255,255,0.06));
    border-color: var(--border, #3f3f46);
    color: var(--text-dim, #d4d4d8);
}

.btn-info:hover,
.wpcd-btn-info:hover,
.wpcd-auto-btn-info:hover,
.wpcd-action-btn.info:hover {
    background: var(--bg-active, rgba(255,255,255,0.1));
    border-color: var(--border-hover, #52525b);
    color: var(--text, #fafafa);
}

/* Ghost button - no border, subtle hover */
.btn-ghost,
.wpcd-btn-ghost {
    border: none;
    background: transparent;
    color: var(--text-muted);
}

.btn-ghost:hover,
.wpcd-btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* Outline variants - transparent with subtle border */
.btn-outline,
.wpcd-btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
}

.btn-outline:hover,
.wpcd-btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Icon-only button */
.btn-icon,
.wpcd-btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
}



/* Topbar action buttons */
.wpcd-topbar-action-btn {
    padding: 6px 12px !important;
}



/* Action row buttons in single views */
.wpcd-action-row .wpcd-btn,
.wpcd-action-row button {
    margin: 2px !important;
}

/* Settings actions */
.wpcd-settings-actions .wpcd-btn {
    min-width: 100px !important;
}

/* Modal footer buttons */
.wpcd-modal-footer .wpcd-btn {
    min-width: 80px !important;
}


/* ========== CARDS - Tighter, Cleaner ========== */


/* Card icons - accent color */
.stat-icon,
.resource-icon,
.card-icon {
    background: var(--accent-bg) !important;
    border: 1px solid var(--accent-border) !important;
    border-radius: 6px !important;
    color: var(--accent) !important;
}

.stat-icon.servers,
.stat-icon.sites,
.stat-icon.providers,
.stat-icon.uptime {
    background: var(--accent-bg) !important;
    color: var(--accent) !important;
}


/* ========== STATUS INDICATORS - With glow ========== */
.status-dot,
.status-indicator {
    border-radius: 50% !important;
}

.status-dot.online,
.status-indicator.online,
.status.online .status-dot {
    background: var(--success) !important;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5) !important;
}

.status-dot.offline,
.status-indicator.offline,
.status.offline .status-dot {
    background: var(--danger) !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5) !important;
}

.status-dot.pending,
.status-indicator.pending,
.status.pending .status-dot {
    background: var(--warning) !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5) !important;
}




/* ========== PAGE HEADERS - Accent border ========== */
.page-header h1,
.page-title,
.section-title,
.content-header h1 {
    border-left: 3px solid var(--accent) !important;
    padding-left: 12px !important;
}


/* ========== TABS - Clean with accent ========== */
.filter-tabs,
.nav-tabs,
.tab-nav {
    border-bottom: 1px solid var(--border) !important;
}

.filter-tab,
.nav-tab,
.tab-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: var(--text-muted) !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    transition: all 0.12s ease !important;
}

.filter-tab:hover,
.nav-tab:hover,
.tab-item:hover {
    color: var(--text) !important;
}

.filter-tab.active,
.nav-tab.active,
.tab-item.active {
    color: var(--text) !important;
    border-bottom-color: var(--accent) !important;
}


/* ========== TABLES - Cleaner ========== */
.data-table,
table {
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.data-table th,
table th {
    background: var(--bg-hover) !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--text-muted) !important;
    padding: 10px 14px !important;
}

.data-table td,
table td {
    border-bottom: 1px solid var(--border) !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
}

.data-table tr:hover td,
table tbody tr:hover td {
    background: rgba(59, 130, 246, 0.05) !important;
}


/* ========== DROPDOWNS & MODALS ========== */
.dropdown-menu,
.popup-menu,
.notifications-dropdown {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.modal-content,
.popup-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
}

.modal-header,
.popup-header {
    border-bottom: 1px solid var(--border) !important;
}


/* ========== TOASTS - Clean with accent ========== */
.toast,
.notification-toast {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.toast.success,
.notification-toast.success {
    border-left: 3px solid var(--success) !important;
}

.toast.error,
.notification-toast.error {
    border-left: 3px solid var(--danger) !important;
}

.toast.warning,
.notification-toast.warning {
    border-left: 3px solid var(--warning) !important;
}

.toast.info,
.notification-toast.info {
    border-left: 3px solid var(--accent) !important;
}


/* ========== SINGLE VIEW - Server/Site Detail Pages ========== */
.single-server-view .wpcd-card,
.single-app-view .wpcd-card {
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
}

.single-server-view .wpcd-card:hover,
.single-app-view .wpcd-card:hover {
    border-color: var(--accent) !important;
}

.single-server-view .wpcd-card h4,
.single-app-view .wpcd-card h4 {
    border-left: 2px solid var(--accent) !important;
    padding-left: 10px !important;
}

.single-server-view .wpcd-card h4 i,
.single-app-view .wpcd-card h4 i {
    color: var(--accent) !important;
}


/* ========== BADGES & TAGS ========== */
.badge,
.tag,
.label {
    background: var(--bg-hover) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

.badge.primary,
.tag.primary {
    background: var(--accent-bg) !important;
    border-color: var(--accent-border) !important;
    color: var(--accent) !important;
}


/* ========== SCROLLBAR - Subtle ========== */
::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: var(--border) !important;
    border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover) !important;
}


/* ========== TOPBAR ========== */
.topbar,
.app-topbar {
    background: var(--bg-panel) !important;
    border-bottom: 1px solid var(--border) !important;
}


/* ========== EMPTY STATES ========== */
.empty-state,
.no-results {
    text-align: center !important;
    padding: 40px 20px !important;
}

.empty-state .empty-icon,
.no-results .icon {
    width: 56px !important;
    height: 56px !important;
    background: var(--accent-bg) !important;
    border: 1px solid var(--accent-border) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 16px !important;
    color: var(--accent) !important;
    font-size: 20px !important;
}


/* ========== LOADING STATES ========== */
.loading-spinner,
.spinner {
    border-color: var(--border) !important;
    border-top-color: var(--accent) !important;
}


/* ========== QUICK STATS ROW ========== */
.stats-row {
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.stat-card {
    padding: 16px 20px !important;
}

.stat-info h3 {
    font-size: 24px !important;
    font-weight: 600 !important;
}


/* ========== WPCD SITES TABLE ========== */
.wpcd-sites-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: var(--bg-card) !important;
}

.wpcd-sites-table thead {
    background: var(--bg-hover) !important;
}

.wpcd-sites-table th {
    padding: 12px 16px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--text-muted) !important;
    text-align: left !important;
    border-bottom: 1px solid var(--border) !important;
}

.wpcd-sites-table td {
    padding: 14px 16px !important;
    font-size: 13px !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border) !important;
    vertical-align: middle !important;
}

.wpcd-sites-table tr:last-child td {
    border-bottom: none !important;
}

.wpcd-sites-table tr:hover td {
    background: rgba(59, 130, 246, 0.04) !important;
}

.wpcd-sites-link {
    color: var(--text) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.wpcd-sites-link:hover {
    color: var(--accent) !important;
}

/* Status badges - clean */
.wpcd-sites-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    background: var(--bg-hover) !important;
    color: var(--text-muted) !important;
}

.wpcd-sites-status-badge.active {
    background: rgba(34, 197, 94, 0.1) !important;
    color: var(--success) !important;
}

.wpcd-sites-status-badge.inactive,
.wpcd-sites-status-badge.ssl-off {
    background: rgba(239, 68, 68, 0.1) !important;
    color: var(--danger) !important;
}

.wpcd-sites-status-badge.ssl-on {
    background: rgba(34, 197, 94, 0.1) !important;
    color: var(--success) !important;
}

.wpcd-sites-status-badge i {
    font-size: 10px !important;
}

/* Actions */
.wpcd-sites-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.wpcd-sites-actions a {
    color: var(--text-muted) !important;
    font-size: 12px !important;
    text-decoration: none !important;
    transition: color 0.12s !important;
}

.wpcd-sites-actions a:hover {
    color: var(--accent) !important;
}

.wpcd-sites-action-link.manage {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    background: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    color: var(--text-dim) !important;
}

.wpcd-sites-action-link.manage:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}


/* ========== LINKS - Consistent styling ========== */
a {
    color: var(--text-dim) !important;
    text-decoration: none !important;
    transition: color 0.12s ease !important;
}

a:hover {
    color: var(--accent) !important;
}

/* The sidebar logo tile is white-on-accent: the generic link colour made its text dim at rest and
   accent-on-accent (invisible) on hover. It stays white; hover is a gentle lift instead. */
.app-logo,
.app-logo:hover,
.app-logo:focus {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
.app-logo:hover,
.app-logo:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

/* Links that should be accent colored */
.wpcd-link,
.wpcd-sites-link,
.resource-name a,
.app-name a,
.server-name a {
    color: var(--text) !important;
    font-weight: 500 !important;
}

.wpcd-link:hover,
.wpcd-sites-link:hover,
.resource-name a:hover,
.app-name a:hover,
.server-name a:hover {
    color: var(--accent) !important;
}

/* Action links in tables and lists */
.wpcd-action-link,
.action-link,
td a:not(.wpcd-btn):not(.btn) {
    color: var(--text-muted) !important;
    font-size: 12px !important;
}

.wpcd-action-link:hover,
.action-link:hover,
td a:not(.wpcd-btn):not(.btn):hover {
    color: var(--accent) !important;
}

/* View site links */
a[target="_blank"]:not(.wpcd-btn):not(.btn) {
    color: var(--text-muted) !important;
}

a[target="_blank"]:not(.wpcd-btn):not(.btn):hover {
    color: var(--accent) !important;
}


/* ========== OVERRIDE ALL GRADIENT BACKGROUNDS ========== */
/* Replace all gradient backgrounds with accent color */

/* Profile avatar */
.wpcd-profile-avatar,
.app-avatar,
.sidebar-logo,
.user-avatar {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
    text-decoration: none !important;
}

/* Primary buttons already defined above with higher specificity */

/* Active tabs - using underline style instead of filled background */
.wpcd-tab-btn.active,
.wpcd-saas-tab.active {
    background: transparent !important;
    color: var(--text) !important;
    border-bottom: 2px solid var(--accent) !important;
}

/* Wizard steps */
.wizard-step.active .wizard-step-number,
.wpcd-saas-wizard-step.active .wpcd-saas-wizard-step-number,
.wpcd-saas-install-step.active .wpcd-saas-install-step-number,
.progress-step.active .progress-step-dot {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
}

/* Progress bars */
.progress-bar-fill {
    background: var(--accent) !important;
}

/* Provider cards */
.wpcd-storage-provider-card.active .provider-icon {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
}

/* Site type card radio checked */
.wpcd-saas-site-type-card input[type="radio"]:checked + .wpcd-saas-site-type-card-content .wpcd-saas-site-type-card-icon {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
}

/* Any remaining gradient icons */
[class*="icon"][style*="brand-gradient"],
.stat-icon,
.provider-icon,
.card-icon {
    background: var(--accent-bg) !important;
    color: var(--accent) !important;
}

/* Override inline gradient styles */
[style*="brand-gradient"] {
    background: var(--accent) !important;
}


/* ========== NGINX V2 TAB OVERRIDES ========== */
/* Override inline styles from nginx-v2/view.php */

.wpcd-nginx-header {
    background: var(--bg-card) !important;
    background-image: none !important;
    border: 1px solid var(--border) !important;
    border-left: 3px solid var(--accent) !important;
    color: var(--text) !important;
    padding: 16px 20px !important;
    border-radius: 8px !important;
}

.wpcd-nginx-header h3 {
    color: var(--text) !important;
}

.wpcd-nginx-header h3 i {
    color: var(--accent) !important;
}

.wpcd-nginx-header-meta {
    color: var(--text-dim) !important;
    opacity: 1 !important;
}

.wpcd-nginx-header-meta span {
    color: var(--text-dim) !important;
}

.wpcd-nginx-header-meta i {
    color: var(--accent) !important;
}


/* ========== TABS OVERRIDES ========== */
/* Specific tab styling - NOT using overly broad selectors */

/* Tab containers - DO NOT override display:none on hidden tabs */
.wpcd-tabs,
.wpcd-tab-nav,
.wpcd-auto-tabs,
.filter-tabs,
.nav-tabs,
.tab-nav {
    display: flex !important;
    gap: 0 !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
}

/* Grouped tabs nav - only show when active, respect inline display:none */
.wpcd-grouped-tabs-nav {
    gap: 0;
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 0;
    margin-bottom: 16px;
}

.wpcd-grouped-tabs-nav.active {
    display: flex !important;
}

/* Tab buttons - specific classes (sub-tabs navigation) */
.wpcd-tab-btn,
.wpcd-auto-tab,
.wpcd-saas-tab,
.wpcd-app-tab-btn,
.wpcd-server-tab-btn,
.wpcd-custom-tab-btn,
.filter-tab,
.nav-tab,
.tab-item {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: var(--text-muted) !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: none !important;
    margin-bottom: -1px !important;
}

.wpcd-tab-btn:hover,
.wpcd-auto-tab:hover,
.wpcd-saas-tab:hover,
.wpcd-app-tab-btn:hover,
.wpcd-server-tab-btn:hover,
.wpcd-custom-tab-btn:hover,
.filter-tab:hover,
.nav-tab:hover,
.tab-item:hover {
    color: var(--text) !important;
    background: transparent !important;
}

.wpcd-tab-btn.active,
.wpcd-auto-tab.active,
.wpcd-saas-tab.active,
.wpcd-app-tab-btn.active,
.wpcd-server-tab-btn.active,
.wpcd-custom-tab-btn.active,
.filter-tab.active,
.nav-tab.active,
.tab-item.active {
    color: var(--text) !important;
    background: transparent !important;
    background-image: none !important;
    border-bottom: 2px solid var(--accent) !important;
}

.wpcd-tab-btn i,
.wpcd-auto-tab i,
.wpcd-saas-tab i,
.wpcd-app-tab-btn i,
.wpcd-server-tab-btn i,
.wpcd-custom-tab-btn i {
    font-size: 13px !important;
    color: inherit !important;
    opacity: 0.7;
}

.wpcd-tab-btn.active i,
.wpcd-auto-tab.active i,
.wpcd-saas-tab.active i,
.wpcd-app-tab-btn.active i,
.wpcd-server-tab-btn.active i,
.wpcd-custom-tab-btn.active i {
    opacity: 1;
}

/* ========== SIDEBAR GROUP BUTTONS ========== */
/* These should NOT be styled as buttons - they are navigation items */

.wpcd-group-btn {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-muted, #a1a1aa) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border-left: 3px solid transparent !important;
    text-align: left !important;
    width: 100% !important;
    border-radius: 0 !important;
}

.wpcd-group-btn:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.05)) !important;
    color: var(--text, #fafafa) !important;
}

.wpcd-group-btn.active {
    background: var(--accent-bg, rgba(59, 130, 246, 0.12)) !important;
    color: var(--accent, #3b82f6) !important;
    border-left-color: var(--accent, #3b82f6) !important;
}

/* ========== APP SIDEBAR NAVIGATION ========== */
/* Icon-based sidebar with centered buttons */

.app-nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto !important;
    border-radius: 10px !important;
    color: var(--text-muted, #a3a3a3) !important;
    transition: color 0.15s ease, background 0.15s ease !important;
    text-decoration: none !important;
    background: transparent !important;
}

.app-nav-item:hover {
    background: var(--bg-hover, rgba(255,255,255,0.04)) !important;
    color: var(--text, #fafafa) !important;
}

/* Active state - accent background with accent icon */
.app-nav-item.active {
    background: var(--accent-bg, rgba(59, 130, 246, 0.1)) !important;
    color: var(--accent, #3b82f6) !important;
}

.app-nav-item.active i {
    color: var(--accent, #3b82f6) !important;
}

/* Icon styling */
.app-nav-item i {
    font-size: 18px !important;
    transition: color 0.15s ease !important;
}


/* ========== WIZARD STEPS - Minimal Design ========== */
/* Override colored wizard steps to use subtle borders only */

.wpcd-saas-wizard-steps {
    padding: 16px 20px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    margin-bottom: 24px !important;
}

.wpcd-saas-wizard-step-number {
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.wpcd-saas-wizard-step.active .wpcd-saas-wizard-step-number {
    background: transparent !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    box-shadow: none !important;
}

.wpcd-saas-wizard-step.completed .wpcd-saas-wizard-step-number {
    background: transparent !important;
    border-color: var(--text-muted) !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
}

.wpcd-saas-wizard-step-label {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.wpcd-saas-wizard-step.active .wpcd-saas-wizard-step-label {
    color: var(--text) !important;
}

.wpcd-saas-wizard-step.completed .wpcd-saas-wizard-step-label {
    color: var(--text-muted) !important;
}

.wpcd-saas-wizard-step-line {
    width: 40px !important;
    height: 1px !important;
    background: var(--border) !important;
}

.wpcd-saas-wizard-step-line.completed {
    background: var(--border) !important;
}

/* ========== GLOBAL TAB/PAGE TRANSITIONS ========== */
/*
 * Universal transition classes for tab panels and content areas.
 * Applied by WPCDUI.transition.apply() for consistent animations.
 */

.wpcd-tab-transitioning,
[class*="-tab-panel"].wpcd-tab-transitioning,
[class*="-panel"].wpcd-tab-transitioning,
[role="tabpanel"].wpcd-tab-transitioning,
.wpcd-content-area.wpcd-tab-transitioning,
.wpcd-main-content.wpcd-tab-transitioning,
.wpcd-custom-tab-panel.wpcd-tab-transitioning {
    animation: wpcd-tab-fade-in 0.2s ease forwards;
}

@keyframes wpcd-tab-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading state (during AJAX) */
.is-loading,
[class*="-tab-panel"].is-loading,
.wpcd-custom-tab-panel.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Tab loading spinner */
.wpcd-tab-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.wpcd-tab-loading i {
    font-size: 32px;
    margin-bottom: 16px;
    color: var(--accent);
}


/* ========== TAB CSS NORMALIZATION ========== */
/*
 * Minimal overrides for v2 tab CSS files.
 * Only sets color variables - does NOT add borders/backgrounds
 * since each tab CSS already defines its own layout.
 */

/* Tab headings - ensure text is visible */
/* .wpcd-server-tab-panel h3,
.wpcd-server-tab-panel h4,
.wpcd-app-tab-panel h3,
.wpcd-app-tab-panel h4,
.wpcd-custom-tab-content h3,
.wpcd-custom-tab-content h4 {
    color: var(--text, #fafafa);
} */

/* Tab header icons */
.wpcd-server-tab-panel h3 i,
.wpcd-server-tab-panel h4 i,
.wpcd-app-tab-panel h3 i,
.wpcd-app-tab-panel h4 i,
.wpcd-custom-tab-content h3 i,
.wpcd-custom-tab-content h4 i {
    color: var(--accent, #3b82f6);
}



/* Override any remaining old color patterns */
.wpcd-text-primary,
[class*="wpcd-text-primary"] {
    color: var(--text, #fafafa) !important;
}

.wpcd-text-muted,
[class*="wpcd-text-muted"] {
    color: var(--text-muted, #a3a3a3) !important;
}

.wpcd-bg-white,
[class*="wpcd-bg-white"] {
    background: var(--bg-card, #141414) !important;
}

.wpcd-border,
[class*="wpcd-border"] {
    border-color: var(--border, rgba(255,255,255,0.05)) !important;
}


/* ========== DARK MODE POLISH ========== */
/* Focus rings - Consistent accent glow */
[data-theme="dark"] *:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg-card, #141414), 0 0 0 4px var(--accent, #3b82f6);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    outline: none;
    border-color: var(--accent, #3b82f6) !important;
    box-shadow: 0 0 0 3px var(--accent-bg, rgba(59, 130, 246, 0.15)) !important;
}



/* ========== UNIFIED BUTTON SYSTEM ========== */



/* PRIMARY button - single global definition. Tinted at rest, fills solid on hover.
   Applies in EVERY context and to BOTH .btn-* and .wpcd-btn-* systems. */
.btn-primary,
.wpcd-btn-primary,
.wpcd-auto-btn-primary,
.wpcd-action-btn.primary,
[class*="wpcd-"][class*="-btn"].primary,
[class*="wpcd-"][class*="-btn-primary"] {
    background: var(--accent-bg, rgba(59, 130, 246, 0.1)) !important;
    color: var(--accent, #3b82f6) !important;
    border: 1px solid var(--accent-border, rgba(59, 130, 246, 0.25)) !important;
    box-shadow: none !important;
}
.btn-primary:hover,
.wpcd-btn-primary:hover,
.wpcd-auto-btn-primary:hover,
.wpcd-action-btn.primary:hover,
[class*="wpcd-"][class*="-btn"].primary:hover,
[class*="wpcd-"][class*="-btn-primary"]:hover {
    background: var(--accent, #3b82f6) !important;
    color: #fff !important;
    border-color: var(--accent, #3b82f6) !important;
    box-shadow: 0 4px 12px var(--accent-bg, rgba(59, 130, 246, 0.3)) !important;
}



.btn-secondary:hover,
[class*="wpcd-"][class*="-btn"].secondary:hover,
[class*="wpcd-"][class*="-btn-secondary"]:hover,
.wpcd-btn-secondary:hover {
    background: var(--bg-active, rgba(255,255,255,0.06)) !important;
    border-color: var(--border-hover, rgba(255,255,255,0.1)) !important;
    color: var(--text, #fafafa) !important;
}

/* Success button */
.btn-success,
[class*="wpcd-"][class*="-btn"].success,
[class*="wpcd-"][class*="-btn-success"],
.wpcd-btn-success {
    background: var(--bg-hover, rgba(255,255,255,0.06)) !important;
    border: 1px solid var(--border, #3f3f46) !important;
    color: var(--text-dim, #d4d4d8) !important;
}

.btn-success:hover,
[class*="wpcd-"][class*="-btn"].success:hover,
[class*="wpcd-"][class*="-btn-success"]:hover,
.wpcd-btn-success:hover {
    background: var(--bg-active, rgba(255,255,255,0.1)) !important;
    border-color: var(--border-hover, #52525b) !important;
    color: var(--text, #fafafa) !important;
}

/* Warning button */
.btn-warning,
[class*="wpcd-"][class*="-btn"].warning,
[class*="wpcd-"][class*="-btn-warning"],
.wpcd-btn-warning {
    background: var(--bg-hover, rgba(255,255,255,0.06)) !important;
    border: 1px solid var(--border, #3f3f46) !important;
    color: var(--text-dim, #d4d4d8) !important;
}

.btn-warning:hover,
[class*="wpcd-"][class*="-btn"].warning:hover,
[class*="wpcd-"][class*="-btn-warning"]:hover,
.wpcd-btn-warning:hover {
    background: var(--bg-active, rgba(255,255,255,0.1)) !important;
    border-color: var(--border-hover, #52525b) !important;
    color: var(--text, #fafafa) !important;
}

/* Danger button */
.btn-danger,
[class*="wpcd-"][class*="-btn"].danger,
[class*="wpcd-"][class*="-btn-danger"],
.wpcd-btn-danger {
    background: var(--danger-bg, rgba(239, 68, 68, 0.1)) !important;
    border: 1px solid var(--danger-border, rgba(239, 68, 68, 0.2)) !important;
    color: var(--danger, #ef4444) !important;
}

.btn-danger:hover,
[class*="wpcd-"][class*="-btn"].danger:hover,
[class*="wpcd-"][class*="-btn-danger"]:hover,
.wpcd-btn-danger:hover {
    background: var(--danger, #ef4444) !important;
    border-color: var(--danger, #ef4444) !important;
    color: var(--text-on-accent) !important;
}

/* Button sizes */
[class*="wpcd-"][class*="-btn"].btn-sm,
[class*="wpcd-"][class*="-btn-sm"],
.wpcd-btn-sm {
    padding: var(--btn-padding-sm, 6px 12px) !important;
    font-size: var(--btn-font-sm, 12px) !important;
}

[class*="wpcd-"][class*="-btn"].btn-lg,
[class*="wpcd-"][class*="-btn-lg"],
.wpcd-btn-lg {
    padding: var(--btn-padding-lg, 10px 20px) !important;
    font-size: var(--btn-font-lg, 14px) !important;
}

/* Button icon styling */
[class*="wpcd-"][class*="-btn"] i,
.wpcd-btn i,
button[class*="wpcd-"] i {
    font-size: inherit;
    line-height: 1;
}

/* Button groups - proper radius handling */
[class*="wpcd-"][class*="-btn-group"] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Inline button groups (connected buttons) */
[class*="wpcd-"][class*="-btn-group"].inline {
    gap: 0;
}

[class*="wpcd-"][class*="-btn-group"].inline [class*="-btn"] {
    border-radius: 0;
}

[class*="wpcd-"][class*="-btn-group"].inline [class*="-btn"]:first-child {
    border-radius: var(--btn-radius, 6px) 0 0 var(--btn-radius, 6px);
}

[class*="wpcd-"][class*="-btn-group"].inline [class*="-btn"]:last-child {
    border-radius: 0 var(--btn-radius, 6px) var(--btn-radius, 6px) 0;
}

[class*="wpcd-"][class*="-btn-group"].inline [class*="-btn"]:not(:first-child) {
    margin-left: -1px;
}


/* ========== UNIFIED FORM SYSTEM ========== */

/* Input placeholder */
/* ===== FORM CONTROLS - single consistent box for EVERY input / select / textarea in the UI.
   Bare controls (61 selects, 91 text inputs across tabs) had no box and rendered as browser
   defaults; this gives them all one look. background-color (not shorthand) preserves the select arrow. ===== */
[class*="wpcd-"] input[type="text"],
[class*="wpcd-"] input[type="number"],
[class*="wpcd-"] input[type="email"],
[class*="wpcd-"] input[type="url"],
[class*="wpcd-"] input[type="password"],
[class*="wpcd-"] input[type="search"],
[class*="wpcd-"] input[type="tel"],
[class*="wpcd-"] input:not([type]),
[class*="wpcd-"] select,
[class*="wpcd-"] textarea {
    background-color: var(--bg-elevated, #1a1a1a);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: var(--radius-sm, 6px);
    color: var(--text, #fafafa);
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.4;
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* ===== CHECKBOXES & RADIOS - one clean custom-drawn control everywhere ===== */
[class*="wpcd-"] input[type="checkbox"],
[class*="wpcd-"] input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 2px solid var(--border, #3f3f46);
    background: var(--bg-elevated, #27272a);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
[class*="wpcd-"] input[type="checkbox"] { border-radius: 4px; }
[class*="wpcd-"] input[type="radio"]  { width: 18px; height: 18px; border-radius: 50%; }
[class*="wpcd-"] input[type="checkbox"]:checked {
    border-color: var(--accent, #3b82f6);
    background: var(--accent, #3b82f6);
}
[class*="wpcd-"] input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px; left: 4px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
[class*="wpcd-"] input[type="radio"]:checked {
    border-color: var(--accent, #3b82f6);
    box-shadow: 0 0 0 3px var(--accent-bg, rgba(59,130,246,0.15));
}
[class*="wpcd-"] input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent, #3b82f6);
}
[class*="wpcd-"] input[type="checkbox"]:focus-visible,
[class*="wpcd-"] input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-bg, rgba(59,130,246,0.25));
}
[class*="wpcd-"] input[type="checkbox"]:disabled,
[class*="wpcd-"] input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }

[class*="wpcd-"] input::placeholder,
[class*="wpcd-"] textarea::placeholder {
    color: var(--text-faint, #737373);
}

/* Textarea specifics */
[class*="wpcd-"] textarea {
    resize: vertical;
    min-height: 80px;
}

/* Code inputs - monospace font */
[class*="wpcd-"] textarea[spellcheck="false"],
[class*="wpcd-"] input.wpcd-code,
[class*="wpcd-"] textarea.wpcd-code {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
}

/* Select dropdown arrow */
[class*="wpcd-"] select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a3a3a3' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    appearance: none;
}

/* Form labels */


/* Form descriptions/hints */
[class*="wpcd-"] .description,
[class*="wpcd-"][class*="-form-group"] .description {
    font-size: 12px;
    color: var(--text-muted, #a3a3a3);
    margin-top: 6px;
    line-height: 1.4;
}

/* Form group spacing */
[class*="wpcd-"][class*="-form-group"] {
    margin-bottom: 16px;
}

[class*="wpcd-"][class*="-form-group"]:last-child {
    margin-bottom: 0;
}

/* Code blocks inside info boxes */
[class*="wpcd-"] code {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    background: var(--bg-hover, rgba(255,255,255,0.04));
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-dim, #e5e5e5);
}


/* ========== LIGHT THEME OVERRIDES ========== */
[data-theme="light"] *:focus-visible {
    box-shadow: 0 0 0 2px var(--bg-card, #ffffff), 0 0 0 4px var(--accent, #3b82f6);
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
    box-shadow: 0 0 0 3px var(--accent-bg, rgba(59, 130, 246, 0.1)) !important;
}





/* New css */
.btn:hover{
    transform: none;
}
body .wpcd-env-toggle{
    gap: 5px;
    border: none;
}

.wpcd-custom-tab-content button[class*="wpcd-"][class*="-btn"]:hover, .wpcd-custom-tab-content .btn:hover, .rwmb-tab-panels button[class*="wpcd-"][class*="-btn"]:hover, .rwmb-tab-panels .btn:hover {
    transform: none!important;
}
.wpcd-custom-tab-content button[class*="wpcd-"][class*="-btn"], .wpcd-custom-tab-content .btn, .rwmb-tab-panels button[class*="wpcd-"][class*="-btn"], .rwmb-tab-panels .btn{
    /* background: transparent;
    color: var(--text-muted, #64748b); */
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
    border-color: rgba(59, 130, 246, 0.2);
}
/* (primary consolidated into the single global PRIMARY block in the button section) */

.wpcd-saas-server-card-content{
    text-align: center;
}
.wpcd-saas-server-card-icon{
    margin: 0 auto 10px auto;
}


.wpcd-custom-tab-content .warning, .rwmb-tab-panels .warning,
.wpcd-custom-tab-content .warning:hover, .rwmb-tab-panels .warning:hover,
.wpcd-custom-tab-content .danger, .wpcd-custom-tab-content .delete, .rwmb-tab-panels .danger,
.wpcd-custom-tab-content .danger:hover, .wpcd-custom-tab-content .delete:hover, .rwmb-tab-panels .danger:hover{
    background-color: transparent!important;
    box-shadow: none!important;
}
.wpcd-db-modal-close:hover {
    color: var(--accent)!important;
    background-color: transparent!important;
}
.wpcd-custom-tab-content button[class*="wpcd-"][class*="-btn"], .wpcd-custom-tab-content .btn, .rwmb-tab-panels button[class*="wpcd-"][class*="-btn"], .rwmb-tab-panels .btn{
    width: auto;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.wpcd-staging-domain-option-desc{
    margin-bottom: 5px;
}
.wpcd-section-intro.accent-purple h2 .wpcd-staging-status-badge.live i,
.wpcd-cache-status-badge.enabled i{
    color: var(--success, #10b981);
}
.wpcd-cache-status-badge.unavailable i{
    color: var(--danger, #ef4444);
}
.backup-section h3{
    margin-bottom: 15px;
}

.provider-settings .form-row-inline{
    display: block;
}
.provider-settings h4{
    margin-bottom: 10px;
}
.provider-settings .form-row{
    align-items: center;
    display: block;
}
.wpcd-cache-stat .stat-value.success{
    background-color: transparent;
    box-shadow: none;
}
.wpcd-auto-toggle-slider::before{
    width: 16px!important;
    height: 16px!important;
}
.wpcd-auto-toggle-slider{
    border: 1px solid rgba(143, 143, 143, 0.53);
}
[data-theme="light"] .wpcd-auto-form-group > label{
    color: var(--wpcd-auto-text-muted);
}

.wpcd-custom-tab-content .success, .rwmb-tab-panels .success{
    background-color: transparent!important;
    box-shadow: none!important;
}
/* A group with a single tab: the sidebar group button already selects it; its one-button nav row is hidden
   (kept in the DOM - the tab JS clicks that button to activate the panel). Must out-rank the !important above. */
body.wpcd-saas-frontend-active .wpcd-grouped-tabs-nav.is-single.active,
.wpcd-grouped-tabs-nav.is-single.active { display: none !important; }

/* ===== DENSITY (2026-09-19, user: "everything feels big and in your face") =====
   One compact scale inside tab panels: smaller buttons and controls, tighter grids, 13px text.
   Scoped to the panel so page chrome (topbar, sidebar, page header) keeps its size. */
.wpcd-custom-tab-content { font-size: 13px; line-height: 1.5; }
.wpcd-custom-tab-content p { font-size: 13px; }
.wpcd-custom-tab-content .description,
.wpcd-custom-tab-content small,
.wpcd-custom-tab-content [class*="-hint"],
.wpcd-custom-tab-content [class*="-help"],
.wpcd-custom-tab-content [class*="-note"] { font-size: 12px; }
.wpcd-custom-tab-content label { font-size: 12.5px; }

.wpcd-custom-tab-content .btn,
.wpcd-custom-tab-content .wpcd-btn,
.wpcd-custom-tab-content .wpcd-action-btn,
.wpcd-custom-tab-content .wpcd-auto-btn,
.wpcd-custom-tab-content .wpcd-server-action,
.wpcd-custom-tab-content button[data-wpcd-action] {
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    border-radius: 6px !important;
    min-height: 0 !important;
}
.wpcd-custom-tab-content .wpcd-btn-small,
.wpcd-custom-tab-content .btn-sm { padding: 4px 9px !important; font-size: 12px !important; }
.wpcd-custom-tab-content .btn i,
.wpcd-custom-tab-content .wpcd-btn i { font-size: 12px; }

.wpcd-custom-tab-content input[type="text"],
.wpcd-custom-tab-content input[type="number"],
.wpcd-custom-tab-content input[type="email"],
.wpcd-custom-tab-content input[type="url"],
.wpcd-custom-tab-content input[type="password"],
.wpcd-custom-tab-content input[type="search"],
.wpcd-custom-tab-content input[type="tel"],
.wpcd-custom-tab-content input:not([type]),
.wpcd-custom-tab-content select,
.wpcd-custom-tab-content textarea {
    padding: 7px 10px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}
.wpcd-custom-tab-content select { padding-right: 28px !important; }

/* Grids of cards/fields: 12px between things, not 20-24. */
.wpcd-custom-tab-content [class*="-grid"] { gap: 12px !important; }
.wpcd-custom-tab-content [class*="-form-group"],
.wpcd-custom-tab-content [class*="-form-row"] { margin-bottom: 10px; }

/* Status / stat tiles inside cards */
.wpcd-custom-tab-content [class*="-stat-icon"] { width: 30px !important; height: 30px !important; font-size: 13px !important; border-radius: 7px !important; }

/* Banners and notices: one thin strip, not a billboard. */
.wpcd-custom-tab-content [class*="-info-box"],
.wpcd-custom-tab-content [class*="-warning-box"],
.wpcd-custom-tab-content [class*="-notice"],
.wpcd-custom-tab-content [class*="-alert-box"],
.wpcd-custom-tab-content [class*="-banner"] { padding: 10px 12px !important; font-size: 12.5px !important; border-radius: 6px !important; }

/* Every bespoke button family (.wpcd-service-btn, .wpcd-f2b-btn, .wpcd-tools-btn ...) on the same size. */
.wpcd-custom-tab-content button[class*="wpcd-"][class*="-btn"],
.wpcd-custom-tab-content a[class*="wpcd-"][class*="-btn"],
.wpcd-custom-tab-content .button,
.wpcd-custom-tab-content .wpcd-saas-button {
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    border-radius: 6px !important;
    min-height: 0 !important;
    gap: 6px;
}
.wpcd-custom-tab-content button[class*="wpcd-"][class*="-btn"] i,
.wpcd-custom-tab-content a[class*="wpcd-"][class*="-btn"] i { font-size: 12px; }

/* ===== TYPE SCALE (2026-09-20, user: "font size 20 way too big") =====
   Numbers and titles inside a panel sit one step above the 13px text, never a billboard. */
.wpcd-custom-tab-content [class*="-stat-value"],
.wpcd-custom-tab-content [class*="-card-value"],
.wpcd-custom-tab-content [class*="-stat-number"],
.wpcd-custom-tab-content [class*="-metric-value"],
.wpcd-custom-tab-content [class*="-version-text"],
.wpcd-custom-tab-content [class*="-version-current"],
.wpcd-custom-tab-content [class*="-version-new"],
.wpcd-custom-tab-content [class*="-update-count"],
.wpcd-custom-tab-content [class*="-count-value"],
.wpcd-custom-tab-content [class*="-big-number"],
.wpcd-custom-tab-content .stat-value { font-size: 15px !important; font-weight: 600; line-height: 1.25; }
/* A value that sits on the same line as its label (the server Status card rows) is text, not a tile. */
.wpcd-custom-tab-content .wpcd-status-stat-content .wpcd-status-stat-value,
.wpcd-custom-tab-content [class*="-row"] [class*="-stat-value"],
.wpcd-custom-tab-content [class*="-line"] [class*="-stat-value"] { font-size: 12.5px !important; }
.wpcd-custom-tab-content [class*="-section-title"],
.wpcd-custom-tab-content [class*="-section-header"] h2,
.wpcd-custom-tab-content [class*="-section-header"] h3,
.wpcd-custom-tab-content [class*="-card-header"] h2,
.wpcd-custom-tab-content [class*="-card-header"] h3,
.wpcd-custom-tab-content [class*="-card-header"] h4,
.wpcd-custom-tab-content [class*="-header"] h2,
.wpcd-custom-tab-content [class*="-header"] h3 { font-size: 14px !important; font-weight: 600; }
.wpcd-custom-tab-content [class*="-section-title"] { margin: 14px 0 10px !important; padding-top: 12px !important; border-top: 1px solid var(--border) !important; }
.wpcd-custom-tab-content [class*="-section-title"]:first-child { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
/* Icons take the size of the text they sit in; empty-state glyphs keep their own rule. */
.wpcd-custom-tab-content i[class*="fa-"],
.wpcd-custom-tab-content [class*="-arrow"] { font-size: inherit; }
.wpcd-custom-tab-content [class*="-arrow"] i { font-size: 14px; }

/* Account SMTP: same pattern as the server/site SMTP tabs (2026-09-20) */
.wpcd-smtp-source { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; margin: 0 0 14px; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-lg, 8px); background: var(--bg-hover, #f8fafc); font-size: 12.5px; color: var(--text-muted, #64748b); }
.wpcd-smtp-source code { font-size: 12px; background: transparent; padding: 0; color: var(--text, #0f172a); }
.wpcd-smtp-source-detail { color: var(--text, #0f172a); }
.wpcd-smtp-source .wpcd-smtp-edit-toggle { margin-left: auto; }
.wpcd-smtp-level[data-editing="no"] .wpcd-smtp-form { display: none; }

/* Dashboard attention list (2026-09-20): severity first, bounded, dismissible */
.wpcd-attention { border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-lg, 8px); background: var(--bg-card, #fff); padding: 12px 14px; }
.wpcd-attention-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.wpcd-attention-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.wpcd-attention-fold { border: 1px solid var(--border, #e2e8f0); background: transparent; border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--text-muted, #64748b); cursor: pointer; }
.wpcd-attention-fold.is-open { color: var(--accent); border-color: var(--accent); }
.wpcd-attention-list { display: flex; flex-direction: column; gap: 4px; max-height: 232px; overflow: auto; }
.wpcd-attention-list.is-info { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border, #e2e8f0); }
.wpcd-attention-item { display: flex; align-items: center; gap: 8px; border-radius: 6px; padding: 6px 8px; font-size: 13px; background: var(--bg-hover, #f8fafc); }
.wpcd-attention-item.is-danger { border-left: 3px solid var(--danger, #dc2626); }
.wpcd-attention-item.is-warning { border-left: 3px solid var(--warning, #d97706); }
.wpcd-attention-item.is-info { border-left: 3px solid var(--border, #cbd5e1); }
.wpcd-attention-link { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--text) !important; }
.wpcd-attention-link i { color: var(--text-muted, #64748b); width: 14px; text-align: center; }
.wpcd-attention-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpcd-attention-dismiss { border: 0; background: transparent; color: var(--text-faint, #94a3b8); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; }
.wpcd-attention-dismiss:hover { color: var(--text); }

/* ===== PAGE SHELL (2026-09-20, user: header "UI is poor", "big UI, drop fonts") =====
   One header for every page: 18px title, no icon tile, no accent bar, actions on the tab button scale.
   Content padding, stat tiles, status banner and section headers on the same scale as the tabs. */
.page-header { padding: 18px 28px 14px !important; background: transparent !important; border-bottom: 1px solid var(--border) !important; }
.page-header-top { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 0 !important; }
.page-header h1, .page-title, .content-header h1 { font-size: 18px !important; font-weight: 600 !important; line-height: 1.3; margin: 0 !important; padding-left: 0 !important; border-left: 0 !important; letter-spacing: -0.01em; gap: 8px !important; }
.page-header h1 > i, .page-header h1 > .fas, .page-header h1 > .fab, .page-header h1 > .far { display: none !important; }
.page-header p { margin: 4px 0 0 !important; font-size: 12.5px !important; color: var(--text-muted) !important; }
.page-actions { display: flex; align-items: center; gap: 8px !important; flex-wrap: wrap; }
.page-actions .btn, .page-actions .wpcd-btn, .page-actions button, .page-actions a.btn {
    padding: 6px 12px !important; font-size: 12.5px !important; font-weight: 500 !important; border-radius: 6px !important; line-height: 1.3 !important; min-height: 0 !important; gap: 6px !important;
}
.page-actions .btn i { font-size: 12px; }
.page-actions .btn-icon { padding: 6px 8px !important; }
.view-panel > .content-area { padding: 20px 28px !important; }
.section-header { margin-bottom: 12px !important; padding-bottom: 8px !important; gap: 10px !important; }
.section-header h2 { font-size: 14px !important; font-weight: 600 !important; }
.section-header h2 i, .section-header > i { display: none !important; }
.section-header[style*="margin-top: 40px"] { margin-top: 24px !important; }

/* Stat tiles and the status banner: figures one step up from body text, not a billboard. */
.stats-row { gap: 12px !important; margin-bottom: 16px !important; }
.stat-card { padding: 12px 14px !important; gap: 10px !important; }
.stat-icon { width: 30px !important; height: 30px !important; font-size: 13px !important; border-radius: 7px !important; }
.stat-info h3 { font-size: 18px !important; font-weight: 600 !important; line-height: 1.2 !important; font-variant-numeric: tabular-nums; }
.stat-info p { font-size: 12px !important; }
.status-banner { padding: 12px 16px !important; gap: 12px !important; margin-bottom: 16px !important; }
.status-banner-icon { width: 30px !important; height: 30px !important; font-size: 14px !important; border-radius: 7px !important; }
.status-banner-content h2 { font-size: 14px !important; font-weight: 600 !important; margin: 0 !important; }
.status-banner-content p { font-size: 12.5px !important; margin: 2px 0 0 !important; }

/* Uptime cards */
.uptime-grid { gap: 12px !important; }
.uptime-card { padding: 12px 14px !important; }
.uptime-card-header { margin-bottom: 8px !important; }
.uptime-card-title { font-size: 13px !important; font-weight: 600 !important; }
.uptime-card-title i { display: none !important; }
.uptime-detail { font-size: 12px !important; }
.uptime-toggle-btn { width: 26px !important; height: 26px !important; font-size: 12px !important; }
/* The topbar is fixed and 56px tall; the page must start below it on its own, not by borrowing the
   header's old 32px top padding (the header is 18px now). 52px on phones, where the bar is 52px. */
body.wpcd-saas-frontend-active .view-panel,
body.wpcd-saas-frontend-active .wpcd-single-view-container,
body.wpcd-saas-frontend-active main.content-area,
body.wpcd-saas-frontend-active .content-wrapper {
     padding-top: 56px !important;
     }
@media (max-width: 768px) {
  body.wpcd-saas-frontend-active .view-panel,
  body.wpcd-saas-frontend-active .wpcd-single-view-container,
  body.wpcd-saas-frontend-active main.content-area,
  body.wpcd-saas-frontend-active .content-wrapper { padding-top: 52px !important; }
}
/* Topbar on the same scale */
.wpcd-app-topbar { padding: 0 20px !important; }
.wpcd-topbar-breadcrumb, .wpcd-breadcrumb-item { font-size: 13px !important; }
.wpcd-breadcrumb-current i { display: none !important; }
.wpcd-breadcrumb-current span { font-weight: 600; }
.wpcd-topbar-action-btn { width: 30px !important; height: 30px !important; font-size: 13px !important; }
.wpcd-profile-name { font-size: 12.5px !important; }

/* ===== LEGACY SURFACES ON THE SAME SCALE (2026-09-20, user: "UI fixed in new work but not legacy") =====
   Single-view hero, list cards (servers / sites / providers), toolbar + filters, empty states, badges,
   dashboard tiles, provider forms. Same numbers as the tab density layer: 13px text, 12.5px buttons,
   15px figures, 14px card titles, no icon tiles. */

/* Single server / site hero */
.wpcd-hero { padding: 14px 18px !important; margin-bottom: 14px !important; border-radius: var(--radius-lg, 8px) !important; gap: 12px !important; align-items: center !important; }
.wpcd-hero-icon { display: none !important; }
.wpcd-hero-info h2, .wpcd-hero h2 { font-size: 17px !important; font-weight: 600 !important; margin: 0 0 4px !important; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wpcd-hero-info h2 .wpcd-badge, .wpcd-hero h2 .wpcd-badge { font-size: 10.5px !important; padding: 1px 7px !important; }
.wpcd-hero-meta { display: flex; flex-wrap: wrap; gap: 4px 14px !important; font-size: 12.5px !important; color: var(--text-muted) !important; }
.wpcd-hero-meta span { display: inline-flex; align-items: center; gap: 5px; }
.wpcd-hero-meta i { display: none !important; }
.wpcd-hero-meta span::before { content: "·"; color: var(--text-faint, #94a3b8); margin-right: 8px; }
.wpcd-hero-meta span:first-child::before { content: none; margin: 0; }
.wpcd-hero-right { display: flex; gap: 8px !important; align-items: center; }
.wpcd-hero-right .wpcd-btn { padding: 6px 12px !important; font-size: 12.5px !important; border-radius: 6px !important; line-height: 1.3 !important; }
.wpcd-hero-right .wpcd-btn i { display: none !important; }
.wpcd-server-busy-notice { padding: 8px 12px !important; font-size: 12.5px !important; }

/* List cards: servers, sites, providers */
.data-grid { gap: 12px !important; }
.data-card { border-radius: var(--radius-lg, 8px) !important; }
.data-card-header { padding: 12px 14px !important; gap: 10px !important; }
.data-card-icon { width: 30px !important; height: 30px !important; font-size: 13px !important; border-radius: 7px !important; }
.data-card-title { font-size: 14px !important; font-weight: 600 !important; margin-bottom: 2px !important; }
.data-card-subtitle { font-size: 12.5px !important; }
.data-card-body { padding: 0 14px 12px !important; }
.data-card-meta { gap: 6px 18px !important; }
.meta-label { font-size: 10.5px !important; letter-spacing: .04em; }
.meta-value { font-size: 12.5px !important; }
.data-card-footer { padding: 10px 14px !important; gap: 6px !important; }
.data-card-footer .btn, .data-card .btn { padding: 5px 10px !important; font-size: 12px !important; border-radius: 6px !important; line-height: 1.3 !important; gap: 5px !important; }
.data-card-footer .btn i, .data-card .btn i { font-size: 11px; }
.status-badge, .wpcd-badge { font-size: 10.5px !important; padding: 2px 7px !important; border-radius: 999px !important; font-weight: 600 !important; letter-spacing: .02em; }
.status-badge i { display: none !important; }

/* Toolbar: search, filters, view toggle */
.toolbar { gap: 10px !important; margin-bottom: 14px !important; flex-wrap: wrap; }
.search-box input { padding: 7px 10px 7px 32px !important; font-size: 12.5px !important; border-radius: 6px !important; }
.search-box i { font-size: 12px; }
.filter-group { gap: 4px !important; }
.filter-btn { padding: 5px 10px !important; font-size: 12px !important; border-radius: 6px !important; line-height: 1.3 !important; }
.filter-count { font-size: 10.5px; color: var(--text-muted); margin-left: 4px; font-variant-numeric: tabular-nums; }
.filter-group-types { margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--border); }
.view-toggle button { width: 28px !important; height: 28px !important; font-size: 12px !important; }

/* Empty states */
.empty-state { padding: 40px 20px !important; }
.empty-state-icon { width: 40px !important; height: 40px !important; font-size: 16px !important; margin: 0 auto 12px !important; border-radius: 10px !important; }
.empty-state h3 { font-size: 15px !important; margin-bottom: 6px !important; }
.empty-state p { font-size: 13px !important; margin-bottom: 14px !important; }

/* Dashboard tiles and cards (utility classes) */
.dash-cont .text-2xl { font-size: 18px !important; }
.dash-cont .text-xl { font-size: 15px !important; }
.dash-cont .text-lg { font-size: 14px !important; }
.dash-cont .p-4 { padding: 12px 14px !important; }
.dash-cont .wpcd-card { border-radius: var(--radius-lg, 8px) !important; }
.dash-cont .wpcd-card h3, .dash-cont .wpcd-card h2 { font-size: 14px !important; font-weight: 600 !important; }
.dash-cont .btn { padding: 5px 10px !important; font-size: 12px !important; border-radius: 6px !important; }
.dash-cont .uppercase { font-size: 10.5px !important; letter-spacing: .05em; }

/* Provider cards and inline forms */
.wpcd-saas-provider-card { padding: 12px 14px !important; }
.form-group { margin-bottom: 10px !important; }
.form-label { font-size: 12.5px !important; margin-bottom: 4px !important; }
.form-input, .form-select, .form-textarea { padding: 7px 10px !important; font-size: 13px !important; border-radius: 6px !important; }
.form-hint { font-size: 12px !important; }
.wpcd-saas-add-provider-btn, .wpcd-saas-submit-btn, .wpcd-saas-test-btn, .wpcd-saas-edit-btn { padding: 6px 12px !important; font-size: 12.5px !important; border-radius: 6px !important; }

/* Any remaining icon inside a button or a heading on these pages takes the text size */
.view-panel .btn i, .view-panel .wpcd-btn i, .view-panel h1 i, .view-panel h2 i, .view-panel h3 i { font-size: inherit; }


html {
    margin: 0px !important;
}