#adminmenu #toplevel_page_userspn_options .wp-menu-image img{
    padding:5px 0 0;
}

.userspn-options-fields label{
    font-size: 16px!important;
}

/* Dashboard Analytics Widgets */
.userspn-dashboard-widget {
    transition: all 0.3s ease;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    text-align: center;
}

.userspn-dashboard-widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.16);
}

.userspn-bg-primary {
    background: linear-gradient(135deg, #3f51b5 0%, #5c6bc0 100%);
    color: #fff;
}

.userspn-bg-secondary {
    background: linear-gradient(135deg, #009688 0%, #26a69a 100%);
    color: #fff;
}

.userspn-bg-accent {
    background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
    color: #fff;
}

.userspn-dashboard-widget-title {
    font-size: 1.1em;
    margin-bottom: 15px;
    opacity: 0.9;
}

.userspn-dashboard-widget-value {
    font-size: 2.5em;
    font-weight: bold;
    line-height: 1;
}

/* Dashboard popup specific styles */
.userspn-dashboard .userspn-popup {
    z-index: 10000 !important;
}

.userspn-dashboard .userspn-popup-content {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.userspn-dashboard .userspn-popup h2 {
    margin-bottom: 20px;
    color: #333;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    font-size: 1.5em;
}

/* Analytics Table */
.userspn-analytics-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.userspn-analytics-table th {
    background: #f8f9fa;
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #e9ecef;
    font-size: 13px;
    white-space: nowrap;
}

.userspn-analytics-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    vertical-align: middle;
}

.userspn-analytics-table tr:last-child td {
    border-bottom: none;
}

.userspn-analytics-table tr:hover {
    background-color: #f8f9fa;
}

.userspn-analytics-icon {
    font-size: 18px;
    vertical-align: middle;
    margin-right: 6px;
    color: #787c82;
}

.userspn-analytics-link {
    display: inline-flex;
    align-items: center;
    color: #2271b1;
    text-decoration: none;
    font-weight: 500;
}

.userspn-analytics-link:hover {
    color: #135e96;
}

.userspn-analytics-link .userspn-analytics-icon {
    color: #2271b1;
}

.userspn-analytics-link:hover .userspn-analytics-icon {
    color: #135e96;
}

.userspn-analytics-actions {
    display: flex;
    gap: 8px;
}

.userspn-analytics-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #f0f0f1;
    color: #50575e;
    text-decoration: none;
    transition: all 0.2s ease;
}

.userspn-analytics-actions a:hover {
    background: #2271b1;
    color: #fff;
}

.userspn-analytics-actions a .material-icons-outlined {
    font-size: 18px;
}

.userspn-analytics-empty {
    padding: 20px;
    color: #787c82;
    text-align: center;
    font-size: 14px;
}

.userspn-analytics-empty .userspn-analytics-icon {
    color: #787c82;
}

/* Charts Section */
.userspn-charts-section {
    margin-bottom: 30px;
}

.userspn-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.userspn-chart-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
}

.userspn-chart-card-wide {
    grid-column: 1 / -1;
}

.userspn-chart-card h3 {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.userspn-chart-card h3 .material-icons-outlined {
    font-size: 20px;
    color: #787c82;
}

.userspn-chart-canvas-wrap {
    position: relative;
    height: 260px;
}

.userspn-chart-card-wide .userspn-chart-canvas-wrap {
    height: 300px;
}

@media (max-width: 768px) {
    .userspn-dashboard-widgets {
        flex-direction: column;
    }

    .userspn-charts-grid {
        grid-template-columns: 1fr;
    }

    .userspn-chart-canvas-wrap,
    .userspn-chart-card-wide .userspn-chart-canvas-wrap {
        height: 220px;
    }

    .userspn-chart-card-wide {
        min-height: 260px;
    }

    /* Responsive tables: horizontal scroll inside popups */
    .userspn-dashboard .userspn-popup-body,
    .userspn-dashboard .userspn-popup-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .userspn-analytics-table {
        min-width: 500px;
        font-size: 12px;
    }

    .userspn-analytics-table th,
    .userspn-analytics-table td {
        padding: 8px 8px;
    }
}

/* Dashboard Header & Period Selector */
.userspn-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.userspn-dashboard-header h1 {
    margin: 0;
}

.userspn-period-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.userspn-period-selector label {
    font-size: 14px;
    font-weight: 500;
    color: #50575e;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.userspn-period-selector label .material-icons-outlined {
    font-size: 18px;
    color: #787c82;
}

.userspn-period-selector select {
    padding: 6px 30px 6px 12px;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: #2c3338;
    cursor: pointer;
    appearance: none;
    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='%2350575e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 160px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.userspn-period-selector select:hover {
    border-color: #8c8f94;
}

.userspn-period-selector select:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}

/* Dashboard AJAX loading state */
.userspn-dashboard.userspn-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

@media (max-width: 600px) {
    .userspn-dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .userspn-period-selector select {
        min-width: 140px;
    }
}

.userspn-profile-block-preview{
    max-width:500px;
    margin:auto;
}

/* USER ROLE SELECTOR */
.userspn-users-with-role-box { background: #f0f0f1; border-radius: 4px; }
.userspn-users-with-role-box h4 { margin-top: 0; }
.userspn-role-badge { background: var(--userspn-bg-color-main); color: white; padding: 2px 8px; border-radius: 3px; font-size: 12px; margin-left: 5px; }
.userspn-user-role-item { padding: 5px 0; border-bottom: 1px solid #ddd; }
.userspn-user-role-item .material-icons-outlined { font-size: 16px; vertical-align: middle; color: var(--userspn-color-main); }
.userspn-user-role-item span { font-size: 13px; }
.userspn-p-15 { padding: 15px; }
.userspn-mt-5 { margin-top: 5px; }
.userspn-color-gray { color: #666; }
/* END USER ROLE SELECTOR */
/* Settings sticky footer bar */
.userspn-settings-pb-80{padding-bottom:80px}
.userspn-settings-footer{position:fixed;bottom:0;left:160px;right:0;height:50px;background:#fff;z-index:99999;box-shadow:0 -2px 8px rgba(0,0,0,.08);border-top:1px solid #dcdcde;display:flex;align-items:center}
body.folded .userspn-settings-footer{left:36px}
@media screen and (max-width:960px){body.auto-fold .userspn-settings-footer{left:36px}}
@media screen and (max-width:782px){.userspn-settings-footer{left:0;z-index:9989}.userspn-settings-footer-plugin-name{display:none}}
.userspn-settings-footer-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1000px;margin:0 auto;padding:0 20px}
.userspn-settings-footer-left{display:flex;align-items:center;gap:10px}
.userspn-settings-footer-plugin-name{color:#1d2327;font-size:12px;font-weight:600}
.userspn-settings-footer-version{color:#787c82;font-size:12px;font-family:monospace}
.userspn-settings-footer-right{display:flex;align-items:center;gap:8px}
.userspn-settings-footer-icon-btn{background:none;border:1px solid #dcdcde;border-radius:6px;color:#787c82;cursor:pointer;width:34px;height:34px;display:flex;align-items:center;justify-content:center;padding:0;transition:all .2s ease}
.userspn-settings-footer-icon-btn:hover{background:#f0f0f1;border-color:#8c8f94;color:#1d2327}
.userspn-settings-footer-icon-btn .material-icons-outlined{font-size:20px}
.userspn-settings-footer .userspn-btn{margin:0}
#userspn_submit.userspn-settings-hidden-submit,#userspn-settings-import-file.userspn-settings-hidden-input{display:none !important}
/* Recommended plugins – badge on footer button */
.pn-cm-rp-btn{position:relative}
.pn-cm-rp-badge{position:absolute;top:-6px;right:-6px;background:#d63638;color:#fff;font-size:10px;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;pointer-events:none}
/* Recommended plugins – popup cards */
.pn-cm-rp-list{display:flex;flex-direction:column;gap:12px}
.pn-cm-rp-card{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid #dcdcde;border-radius:8px;background:#f9f9f9}
.pn-cm-rp-icon{width:48px;height:48px;border-radius:50%;background:#f0f0f1;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pn-cm-rp-icon svg{width:28px;height:28px}
.pn-cm-rp-info{flex:1;min-width:0}
.pn-cm-rp-name{font-weight:600;font-size:14px;color:#1d2327}
.pn-cm-rp-desc{font-size:13px;color:#787c82;margin-top:4px}
.pn-cm-rp-action{flex-shrink:0}
.pn-cm-rp-active-badge{display:inline-block;padding:4px 12px;background:#dff0d8;color:#3c763d;border-radius:4px;font-size:12px;font-weight:600}
.pn-cm-rp-recommended{display:inline-block;padding:2px 8px;background:#fef3cd;color:#856404;border-radius:4px;font-size:11px;font-weight:600;margin-left:8px;vertical-align:middle}
@media screen and (max-width:600px){.pn-cm-rp-card{flex-wrap:wrap;gap:10px}.pn-cm-rp-action{width:100%;text-align:right}}