/**
 * X Security Admin Styles
 */

:root {
    --xsec-primary: #6366f1;
    --xsec-primary-dark: #4f46e5;
    --xsec-success: #10b981;
    --xsec-warning: #f59e0b;
    --xsec-danger: #ef4444;
    --xsec-dark: #1e293b;
    --xsec-light: #f8fafc;
    --xsec-border: #e2e8f0;
}

.xsec-wrap {
    margin: 20px 20px 20px 0;
}

/* Header */
.xsec-header {
    background: linear-gradient(135deg, var(--xsec-primary) 0%, var(--xsec-primary-dark) 100%);
    padding: 25px 30px;
    border-radius: 12px;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.xsec-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.xsec-logo .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

.xsec-logo h1 {
    margin: 0;
    font-size: 24px;
    color: #fff;
}

.xsec-version {
    font-size: 12px;
    opacity: 0.8;
}

.xsec-by a {
    color: #fff;
}

/* Promo Banner */
.xsec-promo {
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    padding: 15px 25px;
    border-radius: 10px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #92400e;
}

.xsec-promo .dashicons {
    color: #d97706;
    font-size: 24px;
}

.xsec-promo .button {
    margin-left: auto;
    background: var(--xsec-primary);
    color: #fff;
    border: none;
}

/* Cards */
.xsec-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.xsec-card-wide {
    grid-column: span 2;
}

.xsec-card-full {
    width: 100%;
}

.card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--xsec-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--xsec-light);
    border-radius: 10px 10px 0 0;
}

.card-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-header h2 .dashicons {
    color: var(--xsec-primary);
}

.card-body {
    padding: 24px;
}

/* Grid Layouts */
.xsec-dashboard,
.xsec-grid,
.xsec-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 1200px) {
    .xsec-dashboard,
    .xsec-grid,
    .xsec-settings-grid {
        grid-template-columns: 1fr;
    }
    .xsec-card-wide {
        grid-column: span 1;
    }
}

/* Score Circle */
.xsec-score-card .card-body {
    text-align: center;
    padding: 40px;
}

.score-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 8px solid;
}

.score-circle.good {
    border-color: var(--xsec-success);
    background: rgba(16, 185, 129, 0.1);
}

.score-circle.medium {
    border-color: var(--xsec-warning);
    background: rgba(245, 158, 11, 0.1);
}

.score-circle.low {
    border-color: var(--xsec-danger);
    background: rgba(239, 68, 68, 0.1);
}

.score-value {
    font-size: 48px;
    font-weight: 700;
    color: var(--xsec-dark);
    line-height: 1;
}

.score-max {
    font-size: 18px;
    color: #64748b;
}

.score-message {
    color: #64748b;
    margin-bottom: 20px;
}

/* Stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.stat-item {
    text-align: center;
    padding: 20px;
    background: var(--xsec-light);
    border-radius: 8px;
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    color: var(--xsec-primary);
}

.stat-label {
    color: #64748b;
    font-size: 13px;
}

/* Quick Actions */
.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.quick-actions .button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Toggle Switches */
.xsec-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    cursor: pointer;
}

.xsec-toggle input[type="checkbox"] {
    display: none;
}

.xsec-toggle .slider {
    width: 44px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 12px;
    position: relative;
    transition: 0.3s;
    flex-shrink: 0;
}

.xsec-toggle .slider::before {
    content: '';
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: 0.3s;
}

.xsec-toggle input:checked + .slider {
    background: var(--xsec-success);
}

.xsec-toggle input:checked + .slider::before {
    transform: translateX(20px);
}

/* Form Styles */
.xsec-form .form-row {
    display: flex;
    gap: 20px;
    margin: 15px 0;
}

.xsec-form label {
    display: block;
    margin-bottom: 15px;
}

.xsec-inline-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.xsec-inline-form input {
    flex: 1;
    min-width: 150px;
}

/* Tables */
.xsec-wrap .wp-list-table {
    border: 1px solid var(--xsec-border);
    border-radius: 8px;
}

.xsec-wrap .wp-list-table th {
    background: var(--xsec-light);
}

/* Status */
.status-list .status-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--xsec-border);
}

.status-list .status-item:last-child {
    border-bottom: none;
}

.status-item .label {
    font-weight: 500;
}

.status-item .value {
    font-weight: 600;
}

.status-item .value.on {
    color: var(--xsec-success);
}

.status-item .value.off {
    color: var(--xsec-danger);
}

/* Badges */
.status-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.active {
    background: rgba(16, 185, 129, 0.1);
    color: var(--xsec-success);
}

.status-badge.expired {
    background: rgba(239, 68, 68, 0.1);
    color: var(--xsec-danger);
}

.event-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--xsec-light);
}

.event-badge.event-login_failed,
.event-badge.event-firewall_blocked,
.event-badge.event-ip_blocked {
    background: rgba(239, 68, 68, 0.1);
    color: var(--xsec-danger);
}

.event-badge.event-login_success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--xsec-success);
}

/* Modal */
.xsec-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #64748b;
}

/* Scan Results */
.scan-results ul {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.scan-results li {
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 6px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.scan-results .passed li {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
}

.scan-results .issues li {
    background: rgba(239, 68, 68, 0.1);
    color: #991b1b;
}

.scan-results .warnings li {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
}

/* No Data */
.no-data {
    text-align: center;
    padding: 40px;
    color: #64748b;
    background: var(--xsec-light);
    border-radius: 8px;
}

/* Button Row */
.button-row {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--xsec-border);
}

/* Footer */
.xsec-footer {
    text-align: center;
    padding: 20px;
    color: #64748b;
    font-size: 13px;
}

.xsec-footer a {
    color: var(--xsec-primary);
}

/* Loading spinner */
.xsec-loading .dashicons {
    animation: xsec-spin 1s linear infinite;
}

@keyframes xsec-spin {
    100% { transform: rotate(360deg); }
}

/* === v2.0.0 additions === */
.xsec-header-right { display: flex; align-items: center; gap: 16px; }
.xsec-score-mini { font-weight: 700; font-size: 14px; }
.xsec-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 20px; border-bottom: 2px solid #e5e5e5; padding-bottom: 0; }
.xsec-nav-item { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; text-decoration: none; color: #555; border-radius: 4px 4px 0 0; border: 1px solid transparent; border-bottom: none; transition: background .15s; font-size: 13px; margin-bottom: -2px; }
.xsec-nav-item:hover { background: #f0f0f1; color: #333; }
.xsec-nav-item.active { background: #fff; border-color: #e5e5e5; color: #2271b1; font-weight: 600; }
.xsec-nav-item .dashicons { font-size: 16px; width: 16px; height: 16px; }
.xsec-content { background: #fff; }

.feature-status-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 8px; }
.feature-status-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; }
.feature-icon { font-size: 18px !important; width: 18px !important; height: 18px !important; }
.feature-icon.on { color: #46b450; }
.feature-icon.off { color: #dc3232; }

.stat-danger .stat-number { color: #dc3232; }
.stat-warning .stat-number { color: #ffba00; }
.stat-info .stat-number { color: #2271b1; }

.card-header-actions { display: flex; align-items: center; gap: 8px; }
.xsec-sub-setting { padding: 10px 0 10px 24px; border-left: 3px solid #e5e5e5; margin: 8px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.xsec-sub-setting label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }

@keyframes xsec-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.xsec-spin { animation: xsec-spin .8s linear infinite; display: inline-block; }

#xsec-scan-progress .spinner { margin: 0 8px 0 0; }

/* Scan results modal list improvements */
.scan-results ul { list-style: none; padding: 0; margin: 0 0 16px; }
.scan-results ul li { padding: 6px 0; border-bottom: 1px solid #f0f0f1; font-size: 13px; }
.scan-results ul li:last-child { border-bottom: none; }
.passed ul li .dashicons { color: #46b450; }
.issues ul li .dashicons { color: #dc3232; }
.warnings ul li .dashicons { color: #ffba00; }

/* === v3.0.0 additions === */
.xsec-upsell-card { background: linear-gradient(135deg,#f0f6ff 0%,#fff 100%); border: 1px solid #c3d9f7; }
.xsec-upsell-card h3 { color: #2271b1; }
.xsec-infected-file { transition: opacity .3s; }
.xsec-emergency-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 16px; margin-top: 12px; }
.xsec-emergency-action { background: #fff8f8; border: 1px solid #f5c6cb; border-radius: 4px; padding: 16px; }
.xsec-emergency-action h3 { margin: 0 0 8px; font-size: 14px; color: #dc3232; }
.xsec-emergency-action p  { margin: 0 0 12px; font-size: 13px; color: #666; }

/* ══════════════════════════════════════════════════════════
   Liveupx Security — CSS v4.0.0 additions
   Appended to v3 base — no existing styles removed
   ══════════════════════════════════════════════════════════ */

/* ── Live stats pulse animation (MN-01) ──────────────────── */
@keyframes xsec-pulse-bg {
    0%   { background-color: inherit; }
    40%  { background-color: rgba(34,113,177,0.12); }
    100% { background-color: inherit; }
}
.xsec-pulse {
    animation: xsec-pulse-bg 0.8s ease;
}

/* ── Vulnerability severity badges (VP-01) ───────────────── */
.xsec-sev-critical { color:#DC2626; font-weight:700; text-transform:uppercase; font-size:11px; }
.xsec-sev-high     { color:#D97706; font-weight:700; text-transform:uppercase; font-size:11px; }
.xsec-sev-medium   { color:#2563EB; font-weight:700; text-transform:uppercase; font-size:11px; }
.xsec-sev-low      { color:#6B7280; font-weight:700; text-transform:uppercase; font-size:11px; }

/* Badge on menu item */
.xsec-vuln-badge {
    display: inline-block;
    background: #DC2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 8px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ── Heuristic score bar (MS-07) ─────────────────────────── */
.xsec-heuristic-bar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}
.xsec-heuristic-track {
    width: 60px;
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
}
.xsec-heuristic-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s;
}
.xsec-heuristic-low    { background: #059669; }
.xsec-heuristic-medium { background: #D97706; }
.xsec-heuristic-high   { background: #DC2626; }

/* ── DB scanner progress (MS-01) ────────────────────────── */
#xsec-db-scan-progress {
    display: none;
    margin: 16px 0;
    padding: 16px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
}
#xsec-db-scan-bar-track {
    height: 10px;
    background: #E2E8F0;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 8px;
}
#xsec-db-scan-bar {
    height: 100%;
    background: #2271b1;
    border-radius: 5px;
    width: 0%;
    transition: width 0.4s;
}
#xsec-db-scan-results {
    display: none;
    margin-top: 16px;
}

/* ── Import/Export buttons (IN-01) ─────────────────────── */
.xsec-import-export-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 12px 0;
}
#xsec-import-file-input { display: none; }

/* ── Score breakdown bars (IN-02) ─────────────────────── */
.xsec-breakdown-bar {
    margin-bottom: 10px;
}
.xsec-breakdown-bar .xsec-breakdown-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 3px;
    color: #374151;
}
.xsec-breakdown-track {
    height: 8px;
    background: #E2E8F0;
    border-radius: 4px;
    overflow: hidden;
}
.xsec-breakdown-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

/* ── Login chart container (LS-07) ──────────────────────── */
.xsec-chart-container {
    position: relative;
    min-height: 220px;
    max-height: 260px;
    margin-top: 12px;
}
#xsec-login-chart {
    width: 100% !important;
    height: 240px !important;
}

/* ── Header grade badge (SH-04) ────────────────────────── */
.xsec-header-grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
.xsec-grade-a-plus { background: #059669; }
.xsec-grade-a      { background: #10B981; }
.xsec-grade-b      { background: #2271b1; }
.xsec-grade-c      { background: #D97706; }
.xsec-grade-d      { background: #F97316; }
.xsec-grade-f      { background: #DC2626; }

/* ── CSP builder table (SH-01) ──────────────────────────── */
.xsec-csp-builder {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.xsec-csp-builder th {
    background: #1E3A5F;
    color: #fff;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
}
.xsec-csp-builder td {
    padding: 8px 10px;
    border-bottom: 1px solid #E5E7EB;
    vertical-align: middle;
}
.xsec-csp-builder tr:nth-child(even) td { background: #F8FAFC; }
.xsec-csp-builder input[type="text"] { width: 100%; max-width: 240px; }
.xsec-csp-builder .xsec-csp-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.xsec-csp-builder .xsec-csp-checks label { font-size: 12px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }

/* ── Trusted device table (LS-04) ──────────────────────── */
.xsec-trusted-devices-table td { font-size: 12px; }
.xsec-trusted-devices-table code { font-size: 11px; }

/* ── Session manager table (UA-02) ─────────────────────── */
.xsec-sessions-table { font-size: 12px; }
.xsec-sessions-table .xsec-session-ua {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Diff indicators on malware scan (MS-05) ──────────── */
.xsec-diff-new     { border-left: 4px solid #DC2626; }
.xsec-diff-cleared { border-left: 4px solid #059669; opacity: 0.75; }
.xsec-diff-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 6px;
    text-transform: uppercase;
}
.xsec-diff-badge-new     { background: #FEE2E2; color: #DC2626; }
.xsec-diff-badge-cleared { background: #D1FAE5; color: #059669; }

/* ── Notice types (all pages) ──────────────────────────── */
.xsec-notice {
    padding: 10px 14px;
    border-radius: 5px;
    margin: 10px 0;
    font-size: 13px;
    border-left: 4px solid;
}
.xsec-notice-warning  { background: #FFFBEB; border-color: #D97706; color: #78350F; }
.xsec-notice-error    { background: #FEF2F2; border-color: #DC2626; color: #7F1D1D; }
.xsec-notice-success  { background: #F0FFF4; border-color: #059669; color: #14532D; }
.xsec-notice-info     { background: #EFF6FF; border-color: #2563EB; color: #1E3A8A; }

/* ── Magic link button on login page ──────────────────── */
.xsec-magic-link-wrap {
    text-align: center;
    margin: 10px 0 0;
}

/* ── WAF custom rules table (FW-02) ───────────────────── */
.xsec-fw-rules-table td { font-size: 12px; vertical-align: middle; }
.xsec-fw-rules-table select,
.xsec-fw-rules-table input[type="text"] { font-size: 12px; max-width: 100%; }
.xsec-fw-rules-table .xsec-rule-row td { padding: 6px 8px; }

/* ── Vulnerability page stat cards row ────────────────── */
.xsec-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.xsec-stat-card {
    text-align: center;
    padding: 20px 10px;
}
.xsec-stat-number {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
    color: #1E3A5F;
}
.xsec-stat-label {
    font-size: 12px;
    color: #6B7280;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Dashboard vuln widget ─────────────────────────────── */
.xsec-vuln-widget {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: 6px;
    margin-top: 8px;
    text-decoration: none;
    transition: background 0.2s;
}
.xsec-vuln-widget:hover { background: #F1F5F9; }
.xsec-vuln-widget-icon { font-size: 28px; }
.xsec-vuln-widget-count {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}
.xsec-vuln-widget-label { font-size: 12px; color: #6B7280; }

/* ── Permission policy builder (SH-03) ──────────────── */
.xsec-pp-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.xsec-pp-table th { background: #1E3A5F; color: #fff; padding: 8px 10px; text-align: left; }
.xsec-pp-table td { padding: 8px 10px; border-bottom: 1px solid #E5E7EB; }
.xsec-pp-table tr:nth-child(even) td { background: #F8FAFC; }
.xsec-pp-table select { font-size: 12px; }

/* ── Responsive adjustments ─────────────────────────── */
@media (max-width: 782px) {
    .xsec-cards-row { grid-template-columns: 1fr 1fr; }
    .xsec-import-export-row { flex-direction: column; align-items: flex-start; }
    .xsec-chart-container { min-height: 180px; }
}