/* Last update: 2025-10-26T01:40:00Z */
/* Email notifications preview components – consistent with app showcase theme */

.email-notifications .section-card { max-width: 1100px; margin: 0 auto; position: relative; }
.email-notifications .power-intro { color: rgba(231,241,247,.9); margin-top: 6px; margin-bottom: 10px; }
.email-notifications .section-card::before { content:""; position:absolute; inset:0; border-radius: 22px; pointer-events:none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.email-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 10px; }
.email-previews.realistic { align-items: start; }

/* Realistic email preview components (mirrors templates/) */
.email-preview { display:block; }
.mail-container { background: #ffffff; color: #333; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 42px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.04), 0 12px 48px rgba(102,126,234,.10), 0 10px 44px rgba(34,211,238,.08); border: 1px solid rgba(0,0,0,.06); position: relative; }
.email-previews.realistic .mail-container::before { content:""; position:absolute; inset:-10px; border-radius: 24px; pointer-events:none; background: radial-gradient(280px 80px at 20% -20%, rgba(34,211,238,.10), transparent), radial-gradient(260px 80px at 80% 120%, rgba(102,126,234,.10), transparent); filter: blur(10px); opacity:.9; }
.mail-header { padding: 22px 18px; text-align: center; color: #fff; }
.mail-header h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: .2px; }
.mail-header p { margin: 4px 0 0 0; opacity: .95; font-size: 13px; font-weight: 600; }
.mail-header.summary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.mail-header.critical { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); }

.mail-content { padding: 18px; }
.section-title { margin: 0 0 10px 0; font-size: 14px; font-weight: 800; color: #333; }

/* Summary grid (like weekly summary template) */
.mail-overview { background: #f8f9fa; border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.mail-grid { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 10px; }
.mail-grid .grid-item { background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: 12px; text-align: center; }
.mail-grid .value { font-size: 22px; font-weight: 800; color: #667eea; }
.mail-grid .value.ok { color: #28a745; }
.mail-grid .label { font-size: 11px; color: #6c757d; text-transform: uppercase; letter-spacing: .4px; }

/* Jobs table (compact, table-like) */
.mail-jobs .jobs-table { width: 100%; border: 1px solid #e9ecef; border-radius: 10px; overflow: hidden; background: #fff; }
.mail-jobs .row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 0; align-items: center; border-bottom: 1px solid #e9ecef; }
.mail-jobs .row > div { padding: 10px 12px; font-size: 13px; color: #2d3748; }
.mail-jobs .row.head { background: #f8f9fa; font-weight: 700; color: #333; }
.badge.status { display:inline-block; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge.status.success { background: #d4edda; color: #155724; }

/* Alert card and actions (matches critical alert template tones) */
.alert-card { background: #fff5f5; border: 2px solid #fed7d7; border-left: 4px solid #dc3545; border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.priority-pill { display:inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
.priority-pill.critical { background: #dc3545; color: #fff; }
.alert-title { margin: 0 0 6px 0; font-size: 16px; font-weight: 800; color: #c53030; }
.alert-message { margin: 0 0 10px 0; font-size: 14px; color: #2d3748; font-weight: 600; }
.safe-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; margin-left: 6px; border-radius:999px; background: #e6fffa; color:#0f766e; font-weight:800; box-shadow: inset 0 0 0 1px #99f6e4; }
.alert-details { background: #f7fafc; border-radius: 8px; padding: 10px; border: 1px solid #e2e8f0; }
.alert-details .kv { display:flex; align-items:center; justify-content: space-between; font-size: 13px; color: #4a5568; }
.alert-details .kv + .kv { margin-top: 6px; }

.mail-actions { background: #f8f9fa; border-radius: 10px; padding: 14px; border: 1px solid #e9ecef; }
.mail-actions .steps { margin: 8px 0 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 8px; }
.mail-actions .steps li { counter-increment: step; position: relative; padding: 10px 12px 10px 38px; background: #fff; border-radius: 8px; border: 1px solid #e9ecef; }
.mail-actions .steps li::before { content: counter(step); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: grid; place-items: center; font-weight: 900; font-size: 11px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #ff6b6b, #e64545); }
.mail-diagnostics { margin-top: 10px; display:inline-flex; align-items:center; gap:10px; }
.mail-diagnostics .label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #a61b1b; font-weight: 800; }
.mail-diagnostics code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 800; letter-spacing: .3px; color: #b91c1c; background: #fff5f5; padding: 4px 8px; border-radius: 8px; border: 1px solid #fecaca; }

.mail-footer { background: #f8f9fa; color: #6c757d; font-size: 12px; padding: 12px; text-align: center; border-top: 1px solid #e9ecef; }
.email-preview .mail-header, .email-preview .mail-overview, .email-preview .mail-jobs .jobs-table, .email-preview .mail-actions, .email-preview .alert-card { border-radius: 14px; }

/* Variants */
/* light drop for previews on dark page */
.email-preview.email-summary .mail-container { box-shadow: 0 12px 28px rgba(102,126,234,.18); }
.email-preview.email-critical .mail-container { box-shadow: 0 12px 28px rgba(220,53,69,.18); }

/* Responsive */
@media (max-width: 900px){
  .email-previews { grid-template-columns: 1fr; }
}