/* PCI DSS Assessment Page Styles */

.pci-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}
.pci-summary-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--primary-color);
    transition: transform 0.2s;
}
.pci-summary-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pci-summary-card.in-place { border-left-color: var(--success-color); }
.pci-summary-card.ccw { border-left-color: #ff9500; }
.pci-summary-card.not-applicable { border-left-color: #8e8e93; }
.pci-summary-card.not-tested { border-left-color: #5ac8fa; }
.pci-summary-card.unmarked { border-left-color: #ff3b30; }
.pci-summary-card h3 { font-size: 2rem; margin-bottom: 4px; }
.pci-summary-card p { font-size: 0.85rem; color: var(--text-secondary); }

/* Scope Section */
.pci-scope-section {
    background: var(--card-bg); border-radius: 12px; padding: 24px;
    margin-bottom: 30px; box-shadow: var(--shadow);
}
.pci-scope-section h3 { margin-bottom: 16px; }
.pci-scope-section h3 i { color: var(--primary-color); margin-right: 8px; }
.scope-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.scope-card { background: var(--light-bg); padding: 14px 18px; border-radius: 8px; font-size: 0.9rem; line-height: 1.5; }

/* Filter Section */
.pci-filter-section {
    background: var(--card-bg); border-radius: 12px; padding: 20px 24px;
    margin-bottom: 30px; box-shadow: var(--shadow);
}
.pci-filter-section h3 { margin-bottom: 14px; }
.pci-filter-section h3 i { color: var(--primary-color); margin-right: 8px; }
.filter-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-btn {
    padding: 8px 16px; border: 1px solid var(--border-color); border-radius: 20px;
    background: var(--card-bg); cursor: pointer; font-size: 0.85rem; font-weight: 500; transition: all 0.2s;
}
.filter-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.filter-btn.active { background: var(--primary-color); color: white; border-color: var(--primary-color); }

/* Controls Section - New Card Layout */
.pci-controls-section { margin-bottom: 30px; }
.pci-requirement-group {
    background: var(--card-bg); border-radius: 12px; margin-bottom: 20px;
    box-shadow: var(--shadow); overflow: hidden;
}
.pci-requirement-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white; padding: 16px 24px; display: flex; align-items: center; gap: 12px; cursor: pointer;
}
.pci-requirement-header h3 { font-size: 1.1rem; font-weight: 600; }
.pci-requirement-header .toggle-icon { margin-left: auto; transition: transform 0.3s; }
.pci-requirement-header.collapsed .toggle-icon { transform: rotate(-90deg); }

.pci-controls-body { padding: 0; }

.pci-control-row {
    border-bottom: 1px solid var(--border-color);
    padding: 16px 24px;
    transition: background 0.2s;
}
.pci-control-row:last-child { border-bottom: none; }
.pci-control-row:hover { background: rgba(0, 102, 204, 0.02); }

.control-main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.control-id-col { flex-shrink: 0; width: 75px; }
.control-id { font-weight: 700; color: var(--primary-color); font-size: 0.9rem; }
.control-detail-col { flex: 1; min-width: 0; }
.control-req { font-size: 0.9rem; line-height: 1.5; margin-bottom: 8px; }
.control-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.control-action-col { flex-shrink: 0; }

/* Evidence Button */
.btn-evidence {
    padding: 8px 14px;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    background: white;
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-evidence:hover {
    background: var(--primary-color);
    color: white;
}

/* Evidence Type Badge */
.evidence-type-badge {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
}
.evidence-type-badge.technical { background: #e5f5ff; color: #0066cc; }
.evidence-type-badge.policy { background: #f5e5ff; color: #7b2dbd; }

/* Status Badges */
.status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.status-badge.in-place { background: #e5f9e5; color: #1d7a1d; }
.status-badge.in-place-ccw { background: #fff4e5; color: #b36b00; }
.status-badge.not-applicable { background: #f2f2f7; color: #636366; }
.status-badge.not-tested { background: #e5f5ff; color: #0077cc; }
.status-badge.unmarked { background: #ffe5e5; color: #cc0000; }

/* Evidence Output Area */
.control-evidence-output {
    display: none;
    margin-top: 12px;
    padding-left: 91px;
}
.evidence-result {
    background: var(--light-bg);
    border-radius: 8px;
    padding: 16px;
    border-left: 4px solid var(--primary-color);
}
.evidence-result.policy-evidence { border-left-color: #7b2dbd; }
.evidence-result.error-evidence { border-left-color: var(--danger-color); background: #fff5f5; }

.evidence-header {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.evidence-header.compliant { color: #1d7a1d; }
.evidence-header.non-compliant { color: var(--danger-color); }
.evidence-header.needs-review { color: #b36b00; }

.evidence-body { font-size: 0.88rem; line-height: 1.6; }
.evidence-body p { margin-bottom: 4px; }

.evidence-result ul {
    margin: 8px 0 8px 20px;
    font-size: 0.88rem;
    line-height: 1.8;
}

.evidence-violations { margin-top: 12px; }
.violation-item {
    background: #fff0f0;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    border-left: 3px solid var(--danger-color);
}
.violation-item small { color: var(--text-secondary); }

.evidence-item {
    padding: 6px 12px;
    margin-bottom: 6px;
    border-radius: 4px;
    font-size: 0.85rem;
}
.evidence-item.compliant { background: #e5f9e5; }
.evidence-item.non-compliant { background: #ffe5e5; }
.evidence-item.needs-review { background: #fff4e5; }

/* Evidence Section (top) */
.pci-evidence-section {
    background: var(--card-bg); border-radius: 12px; padding: 24px;
    margin-bottom: 30px; box-shadow: var(--shadow); border-left: 4px solid var(--primary-color);
}
.pci-evidence-section h3 { color: var(--text-primary); }
.pci-evidence-section h3 i { color: var(--primary-color); margin-right: 8px; }
.pci-evidence-section code {
    background: var(--light-bg); padding: 2px 6px; border-radius: 4px;
    font-size: 0.85rem; color: var(--secondary-color);
}

/* Controls table (used in Show Resources) */
.pci-controls-table { width: 100%; border-collapse: collapse; }
.pci-controls-table th {
    background: var(--light-bg); padding: 10px 14px; text-align: left;
    font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
    color: var(--text-secondary); border-bottom: 1px solid var(--border-color);
}
.pci-controls-table td {
    padding: 10px 14px; border-bottom: 1px solid var(--border-color);
    font-size: 0.86rem; vertical-align: top;
}
.pci-controls-table tr:last-child td { border-bottom: none; }

/* Result cards */
.result-card { padding: 15px; border-radius: 8px; text-align: center; }
.result-card.success { background: #e5f9e5; color: var(--success-color); }
.result-card.warning { background: #fff4e5; color: var(--warning-color); }
.result-card.danger { background: #ffe5e5; color: var(--danger-color); }
.result-card h3 { font-size: 1.8rem; margin-bottom: 4px; }
.result-card p { font-size: 0.85rem; }

/* Responsive */
@media (max-width: 768px) {
    .pci-summary-grid { grid-template-columns: repeat(2, 1fr); }
    .scope-cards { grid-template-columns: 1fr; }
    .filter-buttons { flex-direction: column; }
    .control-main { flex-direction: column; gap: 8px; }
    .control-id-col { width: auto; }
    .control-evidence-output { padding-left: 0; }
}