/* ==========================================================================
   Alternivite - Security Page Styles
   ========================================================================== */

/* Hero */
.sec-hero {
   padding-top: calc(var(--nav-height) + var(--space-16));
   padding-bottom: var(--space-4);
   text-align: center;
}

.sec-hero-content {
   max-width: 700px;
   margin: 0 auto;
}

.sec-hero-title {
   font-size: var(--text-4xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   line-height: var(--leading-tight);
   margin-bottom: var(--space-4);
}

.sec-hero-text {
   font-size: var(--text-lg);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
}

@media (min-width: 768px) {
   .sec-hero-title { font-size: var(--text-5xl); }
}

/* Trust Indicators */
.sec-trust {
   padding: var(--space-10) 0 var(--space-12);
}

.sec-trust-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--space-4);
}

@media (min-width: 640px) {
   .sec-trust-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
   .sec-trust-grid { grid-template-columns: repeat(6, 1fr); }
}

.sec-trust-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: var(--space-4);
   background: var(--bg-secondary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
}

.sec-trust-icon {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-primary-50);
   color: var(--color-primary-600);
   border-radius: var(--radius-md);
   margin-bottom: var(--space-2);
}

[data-theme="dark"] .sec-trust-icon {
   background: rgba(99, 102, 241, 0.15);
   color: var(--color-primary-400);
}

.sec-trust-label {
   font-size: var(--text-xs);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
}

/* Security Detail Section */
.sec-detail {
   padding: var(--space-16) 0;
   scroll-margin-top: var(--nav-height);
}

.sec-detail-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-12);
   align-items: start;
}

@media (min-width: 900px) {
   .sec-detail-grid { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-16); }
}

.sec-detail-grid--reverse .sec-detail-content { order: 2; }
.sec-detail-grid--reverse .sec-detail-visual { order: 1; }

@media (min-width: 900px) {
   .sec-detail-grid--reverse .sec-detail-content { order: 1; }
   .sec-detail-grid--reverse .sec-detail-visual { order: 2; }
}

/* Content */
.sec-detail-icon {
   width: 52px;
   height: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-lg);
   margin-bottom: var(--space-4);
}

.sec-detail-icon--primary { background: var(--color-primary-100); color: var(--color-primary-600); }
.sec-detail-icon--green { background: #dcfce7; color: #16a34a; }
.sec-detail-icon--purple { background: #f3e8ff; color: #9333ea; }
.sec-detail-icon--amber { background: #fef3c7; color: #d97706; }
.sec-detail-icon--red { background: #fee2e2; color: #dc2626; }
.sec-detail-icon--blue { background: #dbeafe; color: #2563eb; }
.sec-detail-icon--teal { background: #ccfbf1; color: #0d9488; }

[data-theme="dark"] .sec-detail-icon--green { background: rgba(22, 163, 74, 0.15); color: #4ade80; }
[data-theme="dark"] .sec-detail-icon--purple { background: rgba(147, 51, 234, 0.15); color: #c084fc; }
[data-theme="dark"] .sec-detail-icon--amber { background: rgba(217, 119, 6, 0.15); color: #fbbf24; }
[data-theme="dark"] .sec-detail-icon--red { background: rgba(220, 38, 38, 0.15); color: #f87171; }
[data-theme="dark"] .sec-detail-icon--blue { background: rgba(37, 99, 235, 0.15); color: #60a5fa; }
[data-theme="dark"] .sec-detail-icon--teal { background: rgba(13, 148, 136, 0.15); color: #5eead4; }

.sec-detail-title {
   font-size: var(--text-2xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   margin-bottom: var(--space-4);
   line-height: var(--leading-tight);
}

@media (min-width: 768px) {
   .sec-detail-title { font-size: var(--text-3xl); }
}

.sec-detail-text {
   font-size: var(--text-base);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   margin-bottom: var(--space-8);
}

/* Detail Points */
.sec-detail-points {
   display: flex;
   flex-direction: column;
   gap: var(--space-6);
}

.sec-detail-point {
   padding: var(--space-5);
   background: var(--bg-secondary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
   border-left: 3px solid var(--color-primary-400);
}

.sec-detail-point-title {
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
   margin-bottom: var(--space-2);
}

.sec-detail-point-text {
   font-size: var(--text-sm);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
}

/* Visual Container */
.sec-detail-visual {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--space-6);
}

/* Diagram */
.sec-diagram {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-2);
}

.sec-diagram-row {
   width: 100%;
}

.sec-diagram-box {
   padding: var(--space-3) var(--space-5);
   text-align: center;
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
   border-radius: var(--radius-lg);
}

.sec-diagram-box--blue { background: var(--color-primary-100); color: var(--color-primary-700); border: 1px solid var(--color-primary-200); }
.sec-diagram-box--purple { background: #f3e8ff; color: #7c3aed; border: 1px solid #e9d5ff; }
.sec-diagram-box--green { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }
.sec-diagram-box--amber { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; }

[data-theme="dark"] .sec-diagram-box--blue { background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.3); }
[data-theme="dark"] .sec-diagram-box--purple { background: rgba(147, 51, 234, 0.15); border-color: rgba(147, 51, 234, 0.3); }
[data-theme="dark"] .sec-diagram-box--green { background: rgba(22, 163, 74, 0.15); border-color: rgba(22, 163, 74, 0.3); }
[data-theme="dark"] .sec-diagram-box--amber { background: rgba(217, 119, 6, 0.15); border-color: rgba(217, 119, 6, 0.3); }

.sec-diagram-arrow {
   display: flex;
   justify-content: center;
}

/* Privacy Card */
.sec-privacy-card {
   width: 100%;
   max-width: 320px;
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-xl);
   padding: var(--space-6);
}

.sec-privacy-row {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   padding: var(--space-3) 0;
   font-size: var(--text-sm);
   color: var(--text-secondary);
   border-bottom: 1px solid var(--border-primary);
}

.sec-privacy-row:last-child { border-bottom: none; }

/* Isolation Diagram */
.sec-isolation-diagram {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-3);
}

.sec-isolation-tenant {
   width: 100%;
   max-width: 280px;
   padding: var(--space-4);
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
   text-align: center;
}

.sec-isolation-tenant--a { border-color: var(--color-primary-300); }
.sec-isolation-tenant--b { border-color: var(--color-success-300); }
.sec-isolation-tenant--c { border-color: var(--color-warning-300); }

.sec-isolation-tenant-label {
   display: block;
   font-size: var(--text-xs);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   margin-bottom: var(--space-2);
}

.sec-isolation-data {
   display: flex;
   justify-content: center;
   gap: var(--space-3);
   font-size: var(--text-xs);
   color: var(--text-tertiary);
}

.sec-isolation-wall {
   height: 24px;
}

.sec-isolation-label {
   font-size: var(--text-xs);
   color: var(--text-tertiary);
   text-align: center;
}

/* Auth Flow */
.sec-auth-flow {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-1);
   width: 100%;
   max-width: 280px;
}

.sec-auth-step {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   width: 100%;
   padding: var(--space-3) var(--space-4);
   background: var(--bg-secondary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
   font-size: var(--text-xs);
   color: var(--text-secondary);
}

.sec-auth-step--success {
   background: var(--color-success-50);
   border-color: var(--color-success-300);
   color: var(--color-success-700);
}

[data-theme="dark"] .sec-auth-step--success {
   background: rgba(22, 163, 74, 0.1);
   border-color: rgba(22, 163, 74, 0.3);
   color: var(--color-success-400);
}

.sec-auth-step-num {
   width: 24px;
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-primary-500);
   color: white;
   border-radius: 50%;
   font-size: var(--text-xs);
   font-weight: var(--font-bold);
   flex-shrink: 0;
}

.sec-auth-step--success .sec-auth-step-num { background: var(--color-success-500); }

.sec-auth-arrow {
   font-size: var(--text-sm);
   color: var(--text-tertiary);
}

/* TOTP Visual */
.sec-totp-visual {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-4);
}

.sec-totp-phone {
   width: 180px;
   background: var(--bg-secondary);
   border: 2px solid var(--border-primary);
   border-radius: var(--radius-xl);
   padding: var(--space-6) var(--space-4) var(--space-4);
   text-align: center;
}

.sec-totp-phone-notch {
   width: 40px;
   height: 4px;
   background: var(--border-primary);
   border-radius: 2px;
   margin: 0 auto var(--space-4);
}

.sec-totp-app-name {
   display: block;
   font-size: var(--text-xs);
   color: var(--text-tertiary);
   margin-bottom: var(--space-2);
}

.sec-totp-code {
   font-size: var(--text-3xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   letter-spacing: 4px;
   margin-bottom: var(--space-2);
   font-variant-numeric: tabular-nums;
}

.sec-totp-timer {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-1);
   font-size: var(--text-xs);
   color: var(--text-tertiary);
}

.sec-totp-note {
   font-size: var(--text-xs);
   color: var(--text-tertiary);
}

/* Audit Visual */
.sec-audit-visual {
   width: 100%;
   max-width: 340px;
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-xl);
   overflow: hidden;
}

.sec-audit-entry {
   display: grid;
   grid-template-columns: auto auto 1fr;
   gap: var(--space-3);
   padding: var(--space-3) var(--space-4);
   border-bottom: 1px solid var(--border-primary);
   font-size: var(--text-xs);
   align-items: center;
}

.sec-audit-entry:last-of-type { border-bottom: none; }

.sec-audit-entry--alert {
   background: var(--color-error-50);
}

[data-theme="dark"] .sec-audit-entry--alert {
   background: rgba(220, 38, 38, 0.08);
}

.sec-audit-time { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.sec-audit-actor { font-weight: var(--font-semibold); }
.sec-audit-actor--user { color: var(--color-primary-600); }
.sec-audit-actor--system { color: var(--color-success-600); }
.sec-audit-actor--alert { color: var(--color-error-600); }
.sec-audit-action { color: var(--text-secondary); }

.sec-audit-hash {
   padding: var(--space-3) var(--space-4);
   font-size: var(--text-xs);
   color: var(--text-tertiary);
   font-family: monospace;
   background: var(--bg-secondary);
}

/* RBAC Visual */
.sec-rbac-visual {
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
   width: 100%;
   max-width: 280px;
}

.sec-rbac-role {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--space-3) var(--space-4);
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
}

.sec-rbac-role-name {
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
}

.sec-rbac-role-perm {
   font-size: var(--text-xs);
   color: var(--text-secondary);
}

.sec-rbac-role--admin { border-left: 3px solid var(--color-error-400); }
.sec-rbac-role--manager { border-left: 3px solid var(--color-primary-400); }
.sec-rbac-role--reviewer { border-left: 3px solid var(--color-success-400); }
.sec-rbac-role--viewer { border-left: 3px solid var(--color-neutral-400); }

/* Backup Visual */
.sec-backup-visual {
   width: 100%;
   max-width: 320px;
}

.sec-backup-timeline {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0;
   margin-bottom: var(--space-6);
}

.sec-backup-point {
   display: flex;
   align-items: center;
   gap: var(--space-3);
}

.sec-backup-dot {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: var(--color-primary-300);
   flex-shrink: 0;
}

.sec-backup-point--active .sec-backup-dot { background: var(--color-success-500); }
.sec-backup-point--recovery .sec-backup-dot { background: var(--color-warning-500); }

.sec-backup-label {
   font-size: var(--text-xs);
   color: var(--text-secondary);
}

.sec-backup-line {
   width: 2px;
   height: 24px;
   background: var(--border-primary);
   margin-left: 5px;
}

.sec-backup-metrics {
   display: flex;
   gap: var(--space-6);
}

.sec-backup-metric {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.sec-backup-metric-value {
   font-size: var(--text-2xl);
   font-weight: var(--font-bold);
   color: var(--color-primary-600);
}

.sec-backup-metric-label {
   font-size: var(--text-xs);
   color: var(--text-tertiary);
  text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
}

/* Infra Visual */
.sec-infra-visual {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-2);
   width: 100%;
   max-width: 300px;
}

.sec-infra-layer {
   width: 100%;
   padding: var(--space-3) var(--space-4);
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
   text-align: center;
}

.sec-infra-layer--storage {
   border-color: var(--color-success-300);
   background: var(--color-success-50);
}

[data-theme="dark"] .sec-infra-layer--storage {
   background: rgba(22, 163, 74, 0.08);
}

.sec-infra-layer-label {
   font-size: var(--text-xs);
   font-weight: var(--font-medium);
   color: var(--text-secondary);
}

.sec-infra-arrow {
   font-size: var(--text-sm);
   color: var(--text-tertiary);
}

/* AI Visual */
.sec-ai-visual {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-1);
   width: 100%;
   max-width: 280px;
}

.sec-ai-step {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   width: 100%;
   padding: var(--space-3) var(--space-4);
   background: var(--bg-secondary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
   font-size: var(--text-xs);
   color: var(--text-secondary);
}

.sec-ai-step--highlight {
   background: var(--color-primary-50);
   border-color: var(--color-primary-300);
}

[data-theme="dark"] .sec-ai-step--highlight {
   background: rgba(99, 102, 241, 0.1);
   border-color: rgba(99, 102, 241, 0.3);
}

.sec-ai-step--destroy {
   background: var(--color-success-50);
   border-color: var(--color-success-300);
}

[data-theme="dark"] .sec-ai-step--destroy {
   background: rgba(22, 163, 74, 0.1);
   border-color: rgba(22, 163, 74, 0.3);
}

.sec-ai-step-icon {
   flex-shrink: 0;
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--bg-primary);
   border-radius: var(--radius-md);
   color: var(--text-secondary);
}

.sec-ai-arrow { font-size: var(--text-sm); color: var(--text-tertiary); }

.sec-ai-note {
   font-size: var(--text-xs);
   color: var(--text-tertiary);
   margin-top: var(--space-2);
}

/* Retention Visual */
.sec-retention-visual {
   width: 100%;
   max-width: 320px;
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
}

.sec-retention-row {
   display: grid;
   grid-template-columns: 100px 1fr auto;
   gap: var(--space-3);
   align-items: center;
}

.sec-retention-type {
   font-size: var(--text-xs);
   font-weight: var(--font-medium);
   color: var(--text-primary);
}

.sec-retention-bar {
   height: 8px;
   border-radius: 4px;
   background: var(--color-primary-400);
}

.sec-retention-bar--short { width: 30%; }
.sec-retention-bar--medium { width: 60%; }
.sec-retention-bar--long { width: 100%; }
.sec-retention-bar--gone { width: 10%; opacity: 0.3; }

.sec-retention-value {
   font-size: var(--text-xs);
   color: var(--text-secondary);
}

/* GDPR Visual */
.sec-gdpr-visual {
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
   width: 100%;
   max-width: 320px;
}

.sec-gdpr-principle {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   padding: var(--space-3) var(--space-4);
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
   font-size: var(--text-sm);
   color: var(--text-secondary);
}

/* CCPA Visual */
.sec-ccpa-visual {
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
   width: 100%;
   max-width: 280px;
}

.sec-ccpa-right {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   padding: var(--space-3) var(--space-4);
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   color: var(--text-primary);
}

.sec-ccpa-right-icon {
   flex-shrink: 0;
   color: var(--color-primary-500);
}

.sec-ccpa-note {
   font-size: var(--text-xs);
   color: var(--text-tertiary);
   text-align: center;
}

/* Practices Visual */
.sec-practices-visual {
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
   width: 100%;
   max-width: 340px;
}

.sec-practice {
   display: flex;
   align-items: flex-start;
   gap: var(--space-4);
   padding: var(--space-4);
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
}

.sec-practice-num {
   font-size: var(--text-xl);
   font-weight: var(--font-bold);
   color: var(--color-primary-400);
   line-height: 1;
  flex-shrink: 0;
}

.sec-practice-info {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
}

.sec-practice-title {
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
}

.sec-practice-desc {
   font-size: var(--text-xs);
   color: var(--text-secondary);
}

/* Commitment */
.sec-commitment {
   padding: var(--space-16) 0;
}

.sec-commitment-box {
   text-align: center;
   padding: var(--space-12);
   background: linear-gradient(135deg, var(--color-primary-50), #ede9fe);
   border: 2px solid var(--color-primary-200);
   border-radius: var(--radius-xl);
}

[data-theme="dark"] .sec-commitment-box {
   background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
   border-color: rgba(99, 102, 241, 0.3);
}

.sec-commitment-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 72px;
   height: 72px;
   background: var(--color-primary-100);
   color: var(--color-primary-600);
   border-radius: 50%;
   margin-bottom: var(--space-6);
}

[data-theme="dark"] .sec-commitment-icon {
   background: rgba(99, 102, 241, 0.2);
   color: var(--color-primary-400);
}

.sec-commitment-title {
   font-size: var(--text-3xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   margin-bottom: var(--space-4);
}

.sec-commitment-text {
   font-size: var(--text-lg);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   max-width: 600px;
   margin: 0 auto var(--space-8);
}

.sec-commitment-actions {
   display: flex;
   gap: var(--space-4);
   justify-content: center;
   flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 640px) {
   .sec-hero { padding-top: calc(var(--nav-height) + var(--space-8)); }
   .sec-hero-title { font-size: var(--text-2xl); }
   .sec-hero-text { font-size: var(--text-base); }
   .sec-detail { padding: var(--space-10) 0; }
   .sec-detail-title { font-size: var(--text-xl); }
   .sec-detail-text { font-size: var(--text-sm); }
   .sec-commitment-title { font-size: var(--text-2xl); }
   .sec-commitment-box { padding: var(--space-8) var(--space-6); }
}