/* ═══════════════════════════════════════════════════════
   TradeForge Certification Expiry Tracker — Styles
   ═══════════════════════════════════════════════════════ */

/* ── Expiry Alert Banner ── */
.cert-expiry-banner{border-radius:12px;padding:16px 20px;margin:0 0 16px;display:flex;align-items:flex-start;gap:14px}
.cert-expiry-banner.critical{background:rgba(231,76,60,.08);border:1px solid rgba(231,76,60,.25)}
.cert-expiry-banner.warning{background:rgba(243,156,18,.08);border:1px solid rgba(243,156,18,.25)}
.cert-expiry-banner.notice{background:rgba(230,126,34,.06);border:1px solid rgba(230,126,34,.2)}
.cert-expiry-banner-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cert-expiry-banner.critical .cert-expiry-banner-icon{background:rgba(231,76,60,.15);color:#e74c3c}
.cert-expiry-banner.warning .cert-expiry-banner-icon{background:rgba(243,156,18,.15);color:#f39c12}
.cert-expiry-banner.notice .cert-expiry-banner-icon{background:rgba(230,126,34,.12);color:#e67e22}
.cert-expiry-banner-content{flex:1;min-width:0}
.cert-expiry-banner-title{font-size:14px;font-weight:700;margin:0 0 3px}
.cert-expiry-banner.critical .cert-expiry-banner-title{color:#e74c3c}
.cert-expiry-banner.warning .cert-expiry-banner-title{color:#f39c12}
.cert-expiry-banner.notice .cert-expiry-banner-title{color:#e67e22}
.cert-expiry-banner-msg{font-size:13px;color:var(--muted);line-height:1.4}

/* ── Expiry Status Badges (inline) ── */
.cert-exp-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.cert-exp-badge.expired{background:rgba(231,76,60,.12);color:#e74c3c}
.cert-exp-badge.expiring-soon{background:rgba(243,156,18,.12);color:#f39c12}
.cert-exp-badge.expiring{background:rgba(230,126,34,.10);color:#e67e22}
.cert-exp-badge.valid{background:rgba(39,174,96,.12);color:#27ae60}
.cert-exp-badge.no-expiry{background:rgba(181,183,185,.1);color:var(--muted)}

/* ── Certification Expiry Table ── */
.cert-expiry-table{width:100%;border-collapse:collapse;margin:0 0 12px}
.cert-expiry-table th{text-align:left;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:10px 12px;border-bottom:1px solid rgba(181,183,185,.1)}
.cert-expiry-table td{font-size:13px;color:var(--text);padding:12px;border-bottom:1px solid rgba(181,183,185,.06);vertical-align:middle}
.cert-expiry-table tr.row-expired{background:rgba(231,76,60,.04)}
.cert-expiry-table tr.row-expired td{color:#e74c3c}
.cert-expiry-table tr.row-expiring-soon{background:rgba(243,156,18,.03)}
.cert-expiry-table tr:hover{background:rgba(140,106,62,.04)}
.cert-expiry-table .cert-name{font-weight:600;color:#fff}
.cert-expiry-table .cert-days{font-weight:700;text-align:right;white-space:nowrap}
.cert-expiry-table .cert-days.overdue{color:#e74c3c}
.cert-expiry-table .cert-days.soon{color:#f39c12}
.cert-expiry-table .cert-days.ok{color:#e67e22}
.cert-expiry-table .cert-days.good{color:#27ae60}
@media(max-width:640px){.cert-expiry-table th:nth-child(3),.cert-expiry-table td:nth-child(3),.cert-expiry-table th:nth-child(5),.cert-expiry-table td:nth-child(5){display:none}}

/* ── Expiry Summary Row ── */
.cert-expiry-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 16px}
@media(max-width:520px){.cert-expiry-summary{grid-template-columns:1fr 1fr}}
.cert-expiry-stat{background:linear-gradient(180deg,rgba(46,49,54,.96),rgba(46,49,54,.82));border:1px solid rgba(181,183,185,.10);border-radius:10px;padding:14px 16px;text-align:center}
.cert-expiry-stat-value{font-size:22px;font-weight:800;letter-spacing:-.02em}
.cert-expiry-stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:2px 0 0}
.cert-expiry-stat.expired .cert-expiry-stat-value{color:#e74c3c}
.cert-expiry-stat.expiring .cert-expiry-stat-value{color:#f39c12}
.cert-expiry-stat.valid .cert-expiry-stat-value{color:#27ae60}
.cert-expiry-stat.total .cert-expiry-stat-value{color:var(--bronze)}

/* ── Supervisor Crew Certification View ── */
.crew-cert-card{background:linear-gradient(180deg,rgba(46,49,54,.96),rgba(46,49,54,.82));border:1px solid rgba(181,183,185,.10);border-radius:12px;padding:16px;margin:0 0 10px;transition:border-color .15s}
.crew-cert-card:hover{border-color:rgba(140,106,62,.35)}
.crew-cert-card.has-expired{border-color:rgba(231,76,60,.3)}
.crew-cert-card.has-expiring{border-color:rgba(243,156,18,.25)}
.crew-cert-card-header{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.crew-cert-avatar{width:40px;height:40px;border-radius:50%;background:rgba(140,106,62,.15);color:var(--bronze);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.crew-cert-card.has-expired .crew-cert-avatar{background:rgba(231,76,60,.15);color:#e74c3c}
.crew-cert-card.has-expiring .crew-cert-avatar{background:rgba(243,156,18,.12);color:#f39c12}
.crew-cert-name{font-size:15px;font-weight:700;color:#fff}
.crew-cert-meta{font-size:12px;color:var(--muted)}
.crew-cert-badges{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.crew-cert-inline{display:flex;align-items:center;gap:6px;font-size:12px;padding:5px 10px;border-radius:8px;background:rgba(181,183,185,.04);border:1px solid rgba(181,183,185,.06)}
.crew-cert-inline.expired{border-color:rgba(231,76,60,.2);background:rgba(231,76,60,.04);color:#e74c3c}
.crew-cert-inline.expiring-soon{border-color:rgba(243,156,18,.2);background:rgba(243,156,18,.03);color:#f39c12}
.crew-cert-inline.expiring{border-color:rgba(230,126,34,.15);color:#e67e22}
.crew-cert-inline.valid{color:#27ae60}
.crew-cert-inline .cert-type-label{font-weight:600}
.crew-cert-inline .cert-exp-label{font-size:11px;opacity:.8}

/* ── Supervisor Alerts Panel ── */
.supervisor-alerts{margin:0 0 20px}
.supervisor-alert-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;margin:0 0 6px;font-size:13px}
.supervisor-alert-item.critical{background:rgba(231,76,60,.06);border:1px solid rgba(231,76,60,.18);color:#e74c3c}
.supervisor-alert-item.warning{background:rgba(243,156,18,.06);border:1px solid rgba(243,156,18,.18);color:#f39c12}
.supervisor-alert-item svg{flex-shrink:0;width:16px;height:16px}
.supervisor-alert-msg{flex:1;line-height:1.4}
.supervisor-alert-days{font-weight:700;white-space:nowrap}

/* ── Pulse dot for active alerts ── */
.cert-pulse{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;animation:certPulse 2s ease-in-out infinite}
.cert-pulse.red{background:#e74c3c}
.cert-pulse.yellow{background:#f39c12}
@keyframes certPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Mobile Cert Tracking Optimization ── */
@media(max-width:900px){
  /* Touch targets — min 44px for jobsite cert checks */
  .crew-cert-card{padding:18px;min-height:44px}
  .crew-cert-inline{min-height:44px;padding:8px 12px;font-size:13px}
  .supervisor-alert-item{min-height:44px;padding:12px 16px;font-size:14px}

  /* Prevent iOS zoom on any inputs */
  .cert-expiry-table td{font-size:14px;padding:14px 12px}
  .cert-expiry-table th{font-size:12px;padding:12px}

  /* Readable text for outdoor cert verification */
  .cert-expiry-banner-title{font-size:15px}
  .cert-expiry-banner-msg{font-size:14px}
  .crew-cert-name{font-size:16px}
  .crew-cert-meta{font-size:13px}
  .cert-expiry-stat-value{font-size:24px}
  .cert-expiry-stat-label{font-size:12px}
  .cert-exp-badge{font-size:12px;padding:5px 12px}

  /* Card spacing for mobile */
  .crew-cert-card{margin:0 0 12px}
  .crew-cert-badges{gap:8px;margin:10px 0 0}
  .cert-expiry-banner{padding:18px;gap:16px}
  .supervisor-alert-item{margin:0 0 8px}
  .crew-cert-card-header{gap:14px}
  .crew-cert-avatar{width:44px;height:44px;font-size:15px}
}