/**
 * ADHC Phase 2 — Sprint 3B — Trust & Consent Styles
 * ===================================================
 * Healthcare-grade, premium, senior-friendly.
 * All selectors prefixed .consent-* .trust-* .privacy-* .con-*
 * Zero conflict with Phase 1 or any prior sprint.
 */

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --trust-teal:       #0d9488;
  --trust-teal-dark:  #0f766e;
  --trust-teal-light: #ccfbf1;
  --trust-panel-w:    380px;
  --trust-radius:     20px;
  --trust-radius-sm:  12px;
  --trust-shadow:     0 8px 40px rgba(0,0,0,0.18);
  --trust-font:       'Inter', system-ui, sans-serif;
}

/* ── Overlay ────────────────────────────────────────────────────────────── */
#adhc-consent-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(15,23,42,0.42);
  z-index:    11200;
  backdrop-filter: blur(2px);
  opacity:    0;
  transition: opacity 0.3s ease;
}
#adhc-consent-overlay.consent-overlay-visible {
  display: block;
  opacity: 1;
}

/* ── Panel ──────────────────────────────────────────────────────────────── */
#adhc-consent-panel {
  position:        fixed;
  top:             0;
  right:           0;
  bottom:          0;
  width:           var(--trust-panel-w);
  max-width:       100vw;
  z-index:         11201;
  display:         flex;
  flex-direction:  column;
  background:      #ffffff;
  border-left:     1.5px solid rgba(13,148,136,0.12);
  box-shadow:      var(--trust-shadow);
  font-family:     var(--trust-font);
  overflow:        hidden;
  transform:       translateX(100%);
  transition:      transform 0.35s cubic-bezier(0.25,1,0.5,1);
  will-change:     transform;
}
#adhc-consent-panel.consent-panel-open { transform: translateX(0); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.consent-panel-header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          1rem 1.1rem 0.85rem;
  background:       linear-gradient(135deg, #1e3a5f 0%, #0d9488 100%);
  color:            #fff;
  flex-shrink:      0;
}

.consent-panel-title-wrap {
  display:     flex;
  align-items: center;
  gap:         0.65rem;
}

.consent-panel-icon {
  font-size:   1.5rem;
  background:  rgba(255,255,255,0.18);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.28);
  flex-shrink: 0;
}

.consent-panel-title    { font-size: 1rem; font-weight: 800; line-height: 1.2; }
.consent-panel-subtitle { font-size: 0.68rem; opacity: 0.82; font-weight: 500; }

.consent-panel-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.28);
  color: #fff; font-size: 1rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0; min-width: 36px; min-height: 36px;
}
.consent-panel-close:hover { background: rgba(255,255,255,0.3); transform: scale(1.1); }

/* ── Tab Bar ────────────────────────────────────────────────────────────── */
.consent-tab-bar {
  display:        flex;
  border-bottom:  2px solid #f1f5f9;
  flex-shrink:    0;
  background:     #fafbfc;
  overflow-x:     auto;
}

.consent-tab {
  flex:          1;
  min-width:     0;
  padding:       0.65rem 0.4rem;
  border:        none;
  background:    transparent;
  font-size:     0.72rem;
  font-weight:   700;
  color:         #64748b;
  cursor:        pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  transition:    all 0.18s ease;
  font-family:   var(--trust-font);
  white-space:   nowrap;
  min-height:    44px;
}
.consent-tab.active {
  color:              var(--trust-teal);
  border-bottom-color: var(--trust-teal);
  background:         #f0fdfb;
}
.consent-tab:hover:not(.active) { background: #f8fafc; color: #374151; }

/* ── Content Area ───────────────────────────────────────────────────────── */
.consent-content {
  flex:          1;
  overflow-y:    auto;
  padding:       0.85rem;
  -webkit-overflow-scrolling: touch;
}
.consent-content::-webkit-scrollbar { width: 4px; }
.consent-content::-webkit-scrollbar-thumb { background: rgba(13,148,136,0.2); border-radius: 2px; }

.con-empty {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  padding:        3rem 1rem;
  gap:            0.75rem;
  color:          #64748b;
  font-size:      0.88rem;
  font-weight:    600;
  text-align:     center;
}

/* ── Consent Tab ────────────────────────────────────────────────────────── */
.con-intro {
  background:   #f0fdfb;
  border:       1.5px solid rgba(13,148,136,0.15);
  border-radius: var(--trust-radius-sm);
  padding:      0.75rem 0.85rem;
  margin-bottom: 0.85rem;
}
.con-intro-text {
  font-size:  0.8rem;
  color:      #475569;
  font-weight: 500;
  line-height: 1.45;
}

.con-list {
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
}

/* ── Consent Row ────────────────────────────────────────────────────────── */
.con-row {
  background:    #fff;
  border:        1.5px solid #e2e8f0;
  border-radius: var(--trust-radius-sm);
  padding:       0.85rem 0.9rem;
  box-shadow:    0 2px 6px rgba(0,0,0,0.04);
  transition:    border-color 0.2s;
}
.con-row-granted {
  border-color: rgba(13,148,136,0.3);
  background:   rgba(240,253,250,0.6);
}

.con-row-top {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             0.5rem;
  margin-bottom:   0.6rem;
}
.con-row-info { flex: 1; }
.con-row-title { font-size: 0.88rem; font-weight: 800; color: #0f172a; line-height: 1.2; margin-bottom: 3px; }
.con-row-desc  { font-size: 0.75rem; color: #64748b; font-weight: 500; line-height: 1.4; }
.con-expiry    { font-size: 0.65rem; color: #94a3b8; display: block; margin-top: 3px; }

/* ── Consent Badges (Component 11) ─────────────────────────────────────── */
.con-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           3px;
  padding:       3px 9px;
  border-radius: 999px;
  font-size:     0.62rem;
  font-weight:   800;
  white-space:   nowrap;
}
.badge-granted  { background: #dcfce7; color: #15803d; }
.badge-revoked  { background: #fee2e2; color: #dc2626; }
.badge-pending  { background: #f1f5f9; color: #64748b; }
.badge-expired  { background: #fef3c7; color: #92400e; }
.badge-expiring { background: #fef9c3; color: #854d0e; }

/* ── Consent Actions ────────────────────────────────────────────────────── */
.con-row-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

.con-grant-wrap {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
  flex-wrap:   wrap;
}

.con-expiry-sel {
  padding:       0.35rem 0.5rem;
  border-radius: 999px;
  border:        1px solid #e2e8f0;
  font-size:     0.72rem;
  font-weight:   600;
  font-family:   var(--trust-font);
  color:         #475569;
  background:    #fff;
  cursor:        pointer;
  max-width:     100px;
}

.con-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           0.3rem;
  padding:       0.42rem 0.85rem;
  border-radius: 999px;
  border:        none;
  font-size:     0.75rem;
  font-weight:   700;
  cursor:        pointer;
  font-family:   var(--trust-font);
  min-height:    34px;
  transition:    all 0.18s ease;
}
.con-btn-grant  { background: var(--trust-teal); color: #fff; }
.con-btn-grant:hover { background: var(--trust-teal-dark); }
.con-btn-revoke { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.con-btn-revoke:hover { background: #fecaca; }

/* ── Emergency Notice ───────────────────────────────────────────────────── */
.con-emergency-notice {
  display:       flex;
  gap:           0.6rem;
  align-items:   flex-start;
  background:    #fff7ed;
  border:        1.5px solid #fed7aa;
  border-radius: var(--trust-radius-sm);
  padding:       0.75rem 0.85rem;
  margin-top:    0.85rem;
  font-size:     0.75rem;
  color:         #92400e;
  font-weight:   500;
  line-height:   1.45;
}
.con-emg-icon { font-size: 1.1rem; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   TRUST DASHBOARD STYLES
   ══════════════════════════════════════════════════════════════════════════ */

#trust-dashboard-container { padding: 0.25rem 0; }

/* ── Score Ring ─────────────────────────────────────────────────────────── */
.trust-score-section {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  background:    linear-gradient(135deg, #f0fdfb 0%, #fff 100%);
  border:        1.5px solid rgba(13,148,136,0.15);
  border-radius: var(--trust-radius);
  padding:       1rem 1.1rem;
  margin-bottom: 0.85rem;
}

.trust-score-ring {
  position:       relative;
  width:          80px;
  height:         80px;
  border-radius:  50%;
  background:     conic-gradient(
    var(--tier-color, #0d9488) calc(var(--score, 0) * 3.6deg),
    #e2e8f0 0
  );
  display:        flex;
  align-items:    center;
  justify-content: center;
  flex-shrink:    0;
}

.trust-score-ring::before {
  content:       '';
  position:      absolute;
  inset:         8px;
  border-radius: 50%;
  background:    #fff;
}

.trust-score-inner {
  position:      relative;
  z-index:       1;
  text-align:    center;
  line-height:   1.1;
}
.trust-score-icon  { font-size: 1.1rem; }
.trust-score-value { font-size: 1.1rem; font-weight: 900; color: #0f172a; }
.trust-score-label { font-size: 0.5rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; }

.trust-score-meta       { flex: 1; }
.trust-meta-title       { font-size: 0.78rem; font-weight: 800; color: #0f172a; margin-bottom: 2px; }
.trust-meta-sub         { font-size: 0.72rem; color: #64748b; font-weight: 600; margin-bottom: 3px; }
.trust-meta-consents    { font-size: 0.65rem; color: var(--trust-teal); font-weight: 700; }

/* ── Verification Grid ──────────────────────────────────────────────────── */
.trust-verif-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0.4rem;
  margin-bottom:         0.85rem;
}

.trust-verif-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        0.65rem 0.4rem;
  border-radius:  var(--trust-radius-sm);
  border:         1.5px solid #e2e8f0;
  background:     #fff;
  text-align:     center;
  gap:            3px;
  transition:     all 0.18s ease;
}
.trust-verif-item.verified {
  border-color: rgba(13,148,136,0.3);
  background:   rgba(240,253,250,0.7);
}
.trust-verif-icon  { font-size: 1.1rem; }
.trust-verif-label { font-size: 0.6rem; font-weight: 700; color: #374151; line-height: 1.2; }
.trust-verif-tip   { font-size: 0.55rem; color: var(--trust-teal); font-weight: 700; }

/* ── Action Cards ───────────────────────────────────────────────────────── */
.trust-action-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0.4rem;
}

.trust-action-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        0.75rem 0.4rem;
  border-radius:  var(--trust-radius-sm);
  border:         1.5px solid #e2e8f0;
  background:     #fff;
  cursor:         pointer;
  text-align:     center;
  gap:            4px;
  transition:     all 0.2s ease;
  font-family:    var(--trust-font);
  box-shadow:     0 2px 6px rgba(0,0,0,0.04);
  min-height:     80px;
}
.trust-action-card:hover {
  border-color: var(--trust-teal);
  background:   #f0fdfb;
  transform:    translateY(-2px);
  box-shadow:   0 6px 16px rgba(13,148,136,0.15);
}
.trust-action-icon  { font-size: 1.3rem; }
.trust-action-label { font-size: 0.72rem; font-weight: 800; color: #0f172a; }
.trust-action-sub   { font-size: 0.58rem; color: #64748b; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   PRIVACY STYLES
   ══════════════════════════════════════════════════════════════════════════ */

.privacy-body { display: flex; flex-direction: column; gap: 0.75rem; }

.privacy-section {
  background:    #fafbfc;
  border:        1.5px solid #e2e8f0;
  border-radius: var(--trust-radius-sm);
  padding:       0.85rem 0.9rem;
}
.privacy-section h4 {
  font-size:   0.82rem;
  font-weight: 800;
  color:       #0f172a;
  margin:      0 0 0.45rem;
}
.privacy-section ul {
  margin:      0;
  padding-left: 1.1rem;
  display:     flex;
  flex-direction: column;
  gap:         4px;
}
.privacy-section li {
  font-size:   0.78rem;
  color:       #475569;
  font-weight: 500;
  line-height: 1.4;
}
.privacy-section p {
  font-size:   0.78rem;
  color:       #475569;
  font-weight: 500;
  line-height: 1.5;
  margin:      0;
}

.privacy-dpdp {
  background:    #f0fdfb;
  border:        1.5px solid rgba(13,148,136,0.2);
  border-radius: var(--trust-radius-sm);
  padding:       0.65rem 0.85rem;
  font-size:     0.72rem;
  font-weight:   700;
  color:         var(--trust-teal-dark);
  text-align:    center;
}

/* ══════════════════════════════════════════════════════════════════════════
   HISTORY STYLES
   ══════════════════════════════════════════════════════════════════════════ */

.consent-hist-list {
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
}

.consent-hist-row {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  padding:         0.65rem 0.75rem;
  background:      #fff;
  border:          1px solid #f1f5f9;
  border-radius:   var(--trust-radius-sm);
  gap:             0.5rem;
}

.consent-hist-left  { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.consent-hist-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }

.consent-hist-action {
  font-size:  0.68rem;
  font-weight: 800;
  border-radius: 999px;
  padding:    2px 7px;
  display:    inline-block;
}
.hist-granted { background: #dcfce7; color: #15803d; }
.hist-revoked { background: #fee2e2; color: #dc2626; }
.hist-expired { background: #fef3c7; color: #92400e; }
.hist-updated { background: #dbeafe; color: #1d4ed8; }

.consent-hist-type { font-size: 0.72rem; color: #475569; font-weight: 600; }
.consent-hist-ts   { font-size: 0.62rem; color: #94a3b8; }
.consent-hist-by   { font-size: 0.58rem; color: #94a3b8; }

/* ══════════════════════════════════════════════════════════════════════════
   SweetAlert2 Trust popup override (privacy/history via Swal)
   ══════════════════════════════════════════════════════════════════════════ */

.trust-swal-popup .swal2-html-container { text-align: left !important; }

.trust-privacy-body,
.trust-history-list { display: flex; flex-direction: column; gap: 0.65rem; }

.trust-privacy-section {
  background: #f8fafc; border-radius: 10px;
  padding: 0.75rem; border: 1px solid #e2e8f0;
}
.trust-privacy-section h4 {
  font-size: 0.82rem; font-weight: 800; color: #0f172a; margin: 0 0 0.4rem;
}
.trust-privacy-section ul { margin: 0; padding-left: 1rem; }
.trust-privacy-section li, .trust-privacy-section p {
  font-size: 0.78rem; color: #475569; font-weight: 500; line-height: 1.4;
}
.trust-privacy-dpdp {
  background: #f0fdfb; border-radius: 8px;
  padding: 0.55rem 0.75rem; font-size: 0.7rem;
  font-weight: 700; color: #0f766e; text-align: center;
  border: 1px solid rgba(13,148,136,0.2);
}
.trust-hist-row {
  display: flex; gap: 0.5rem; align-items: center;
  padding: 0.5rem 0.6rem; background: #fff;
  border: 1px solid #f1f5f9; border-radius: 8px; flex-wrap: wrap;
}
.trust-hist-action { font-size: 0.7rem; font-weight: 800; }
.trust-hist-type   { font-size: 0.72rem; color: #475569; flex: 1; }
.trust-hist-ts     { font-size: 0.62rem; color: #94a3b8; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 414px) {
  #adhc-consent-panel { width: 100vw; border-left: none; }
  .trust-verif-grid  { grid-template-columns: repeat(3, 1fr); }
  .trust-action-grid { grid-template-columns: repeat(3, 1fr); }
  .con-btn           { font-size: 0.7rem; padding: 0.38rem 0.65rem; }
  .consent-tab       { font-size: 0.65rem; padding: 0.55rem 0.3rem; }
}

@media (max-width: 375px) {
  .trust-score-ring  { width: 68px; height: 68px; }
  .trust-verif-grid  { grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
}

/* ── Reduce motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #adhc-consent-panel, .con-btn, .trust-action-card {
    transition: none !important;
  }
}