/* ═══════════════════════════════════════════════════════════
   YORAI ADMIN — components.css
   Cards, tabelas, badges, modais, botões, forms, progress,
   log items, alerts, skeleton, toasts, toggle, etc.
═══════════════════════════════════════════════════════════ */

@keyframes spin { to { transform: rotate(360deg) } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }
@keyframes modalIn { from { opacity: 0; transform: scale(0.96) translateY(4px) } to { opacity: 1; transform: scale(1) translateY(0) } }
@keyframes modalOut { from { opacity: 1; transform: scale(1) translateY(0) } to { opacity: 0; transform: scale(0.96) translateY(4px) } }
@keyframes shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
@keyframes rowFlash { 0% { background: rgba(92,200,194,0.18) } 100% { background: transparent } }
@keyframes highlight { 0% { background: rgba(92,200,194,0.22); transform: scale(1.008) } 60% { background: rgba(92,200,194,0.08) } 100% { background: transparent; transform: scale(1) } }

/* CARD */
.card {
  background: var(--surface);
  border-radius: var(--r);
  border: 1px solid var(--border);
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.03);
}
.card-sm { padding: 16px 18px }
.card-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* KPI */
.kpi-val { font-family: "Cormorant Garamond", serif; font-size: 28px; font-weight: 700; margin: 4px 0; line-height: 1; color: var(--text) }
.kpi-label { font-size: 12px; color: var(--text2); font-weight: 500 }
.kpi-delta { font-size: 11px; margin-top: 4px; font-weight: 600 }
.up { color: #0d9488 }
.dn { color: var(--red) }
.neu { color: var(--text3) }

/* KPI DELTA BADGE */
.kpi-delta-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 100px; margin-top: 4px }
.kpi-delta-badge.up { background: rgba(34,197,94,0.1); color: #15803d; border: 1px solid rgba(34,197,94,0.2) }
.kpi-delta-badge.dn { background: rgba(239,68,68,0.1); color: #dc2626; border: 1px solid rgba(239,68,68,0.2) }
.kpi-delta-badge.neu { background: rgba(107,107,138,0.08); color: var(--text3); border: 1px solid var(--border) }

/* KPI TOOLTIP */
.kpi-tooltip { position: relative; display: inline-flex; align-items: center; gap: 4px }
.kpi-tooltip-icon { width: 14px; height: 14px; border-radius: 50%; background: var(--surface3); border: 1px solid var(--border2); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--text3); cursor: help; flex-shrink: 0; line-height: 1 }
.kpi-tooltip-box { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--dark); color: #fff; font-size: 11px; font-weight: 400; line-height: 1.5; padding: 8px 12px; border-radius: 8px; width: 210px; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 100; white-space: normal; box-shadow: 0 4px 16px rgba(0,0,0,0.25) }
.kpi-tooltip-box::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--dark) }
.kpi-tooltip-icon:hover + .kpi-tooltip-box,
.kpi-tooltip-icon:focus + .kpi-tooltip-box { opacity: 1 }

/* BADGE */
.badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 100px; font-size: 11px; font-weight: 600; border: 1px solid transparent }
.b-green { background: rgba(34,197,94,0.08); color: #15803d; border-color: rgba(34,197,94,0.2) }
.b-teal { background: rgba(92,200,194,0.1); color: #0d9488; border-color: rgba(92,200,194,0.25) }
.b-red { background: rgba(239,68,68,0.08); color: #dc2626; border-color: rgba(239,68,68,0.2) }
.b-gold { background: rgba(245,158,11,0.08); color: #b45309; border-color: rgba(245,158,11,0.2) }
.b-purple { background: rgba(139,92,246,0.08); color: #7c3aed; border-color: rgba(139,92,246,0.2) }
.b-blue { background: rgba(59,130,246,0.08); color: #1d4ed8; border-color: rgba(59,130,246,0.2) }
.b-gray { background: rgba(107,107,138,0.06); color: var(--text2); border-color: var(--border2) }

/* HEALTH SCORE */
.health-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; border: 1px solid transparent }
.health-high { background: rgba(34,197,94,0.08); color: #15803d; border-color: rgba(34,197,94,0.2) }
.health-mid { background: rgba(245,158,11,0.08); color: #b45309; border-color: rgba(245,158,11,0.2) }
.health-low { background: rgba(239,68,68,0.08); color: #dc2626; border-color: rgba(239,68,68,0.2) }

/* CHURN PREDICTION SCORE */
.churn-score { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; border: 1px solid transparent; cursor: help }
.churn-low { background: rgba(34,197,94,0.08); color: #166534; border-color: rgba(34,197,94,0.2) }
.churn-mid { background: rgba(245,158,11,0.1); color: #92400e; border-color: rgba(245,158,11,0.25) }
.churn-high { background: rgba(239,68,68,0.12); color: #991b1b; border-color: rgba(239,68,68,0.3) }

/* TABLE */
.table-wrap { overflow-x: auto }
table { width: 100%; border-collapse: collapse; font-size: 13px }
thead th { padding: 9px 14px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); border-bottom: 1px solid var(--border); background: var(--surface2) }
tbody tr { border-bottom: 1px solid var(--border); transition: background .12s, transform .12s, border-color .12s; cursor: pointer }
tbody tr:last-child { border-bottom: none }
tbody tr:hover { background: rgba(92,200,194,0.04); transform: translateX(2px) }
td { padding: 12px 14px; color: var(--text2) }
td.strong { color: var(--text); font-weight: 500 }
td.mono { font-variant-numeric: tabular-nums; font-size: 12px }

/* PLAN CARD */
.plan-card { border: 1px solid var(--border); border-radius: var(--r); padding: 18px; cursor: pointer; transition: border-color .15s, box-shadow .15s; background: var(--surface) }
.plan-card:hover { border-color: var(--border2); box-shadow: 0 4px 16px rgba(92,200,194,0.08) }
.plan-card.hidden-plan { border-style: dashed; border-color: rgba(139,92,246,0.3) }
.plan-card-featured { box-shadow: 0 4px 20px rgba(92,200,194,0.15) !important }
.plan-card.hidden-plan:hover { border-color: var(--purple) }
.plan-name { font-family: "Cormorant Garamond", serif; font-size: 18px; font-weight: 700; color: var(--text) }
.plan-price { font-size: 22px; font-weight: 700; margin: 4px 0; color: var(--teal) }

/* PROGRESS */
.prog-track { height: 4px; background: var(--surface3); border-radius: 100px; overflow: hidden }
.prog-fill { height: 100%; border-radius: 100px; background: var(--teal) }

/* METRIC ROW */
.mrow { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border) }
.mrow:last-child { border-bottom: none }
.mrow-label { font-size: 13px; color: var(--text2) }
.mrow-val { font-size: 13px; color: var(--dark); font-weight: 600 }

/* LOG ITEM */
.log-item { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--border) }
.log-item:last-child { border-bottom: none }
.log-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0 }
.log-dot.ok { background: var(--teal) }
.log-dot.warn { background: var(--gold) }
.log-dot.err { background: var(--red) }
.log-dot.info { background: var(--blue) }
.log-msg { font-size: 13px; color: var(--text); line-height: 1.4 }
.log-meta { font-size: 11px; color: var(--text3); margin-top: 2px }

/* ALERT ITEM */
.alert-item { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border-radius: 12px; margin-bottom: 6px; border-left: 3px solid transparent }
.alert-item.a-ok { background: rgba(92,200,194,0.04); border-left-color: var(--teal) }
.alert-item.a-warn { background: rgba(245,158,11,0.04); border-left-color: var(--gold) }
.alert-item.a-err { background: rgba(239,68,68,0.04); border-left-color: var(--red) }

/* FORM */
.form-group { margin-bottom: 14px }
.form-label { display: block; font-size: 11.5px; color: var(--text2); margin-bottom: 5px; font-weight: 600; letter-spacing: .3px }
.form-input { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; font-size: 13px; color: var(--text); outline: none; font-family: inherit; transition: border-color .2s }
.form-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(92,200,194,0.1) }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B6B8A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

/* BTN */
.btn { display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer; border-radius: 50px; font-family: inherit; font-weight: 600; transition: background .15s, border-color .15s, opacity .15s, box-shadow .15s }
.btn-primary { background: var(--cta-gradient); color: white; padding: 10px 20px; font-size: 13px; box-shadow: 0 2px 12px rgba(92,200,194,0.3) }
.btn-primary:hover { opacity: .88 }
.btn-outline { background: transparent; border: 1px solid var(--border2); color: var(--text2); padding: 9px 16px; font-size: 12.5px }
.btn-outline:hover { border-color: var(--teal); color: #0d9488 }
.btn-danger { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); color: var(--red); padding: 9px 16px; font-size: 12.5px }
.btn-danger:hover { background: rgba(239,68,68,0.15) }
.btn-purple { background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.2); color: #7c3aed; padding: 9px 16px; font-size: 12.5px }
.btn-purple:hover { background: rgba(139,92,246,0.15) }
.btn-sm { padding: 5px 13px; font-size: 11.5px }

/* MODAL */
.modal-overlay { position: fixed; inset: 0; background: rgba(26,26,46,.5); z-index: 200; display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px) }
.modal-overlay.open { display: flex }
.modal-close { background: none; border: none; color: var(--text3); font-size: 20px; cursor: pointer; padding: 0 4px }
.modal-close:hover { color: var(--text) }
.modal.closing { animation: modalOut .15s ease-in forwards }
.modal { background: var(--white); border: 1px solid var(--border2); border-radius: 20px; padding: 28px; width: 480px; max-width: 95vw; animation: modalIn .18s ease-out; box-shadow: 0 20px 60px rgba(92,200,194,0.15) }
.modal-title { font-family: "Cormorant Garamond", serif; font-size: 20px; font-weight: 700; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; color: var(--dark) }

/* TOGGLE */
.toggle { width: 40px; height: 22px; border-radius: 100px; background: var(--surface3); border: 1px solid var(--border); position: relative; cursor: pointer; transition: background .2s, border-color .2s; flex-shrink: 0 }
.toggle::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--text3); position: absolute; top: 3px; left: 3px; transition: left .2s, background .2s }
.toggle.on { background: linear-gradient(135deg, var(--teal), var(--teal-light)); border-color: var(--teal) }
.toggle.on::after { left: 22px; background: white }

/* SKELETON LOADER */
.skeleton { background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px; display: inline-block }
.skeleton-val { height: 28px; width: 80px }
.skeleton-delta { height: 12px; width: 60px; margin-top: 6px }

/* TOAST */
.toast { border-radius: 12px; padding: 12px 18px; font-size: 13px; font-weight: 500; box-shadow: 0 8px 32px rgba(0,0,0,0.15); animation: fadeIn .25s ease; display: flex; align-items: center; gap: 8px }
.toast.t-success { background: #0f2e1e; color: #4ade80; border: 1px solid rgba(74,222,128,0.25) }
.toast.t-error { background: #2e0f0f; color: #f87171; border: 1px solid rgba(248,113,113,0.25) }
.toast.t-warn { background: #2e230a; color: #fbbf24; border: 1px solid rgba(251,191,36,0.25) }
.toast.t-info { background: #1a1a2e; color: white; border: 1px solid rgba(255,255,255,0.1) }

/* INLINE ACTIONS */
.inline-actions { display: none; gap: 4px; align-items: center }
tr:hover .inline-actions { display: flex }
tr:hover .action-hide { display: none }
.row-actions-wrap { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap }
.row-expand-actions { display: none; gap: 4px; align-items: center; animation: fadeIn .15s ease }
tr:hover .row-expand-actions { display: flex }
tr:hover .row-hide-on-hover { display: none }

/* ROW FLASH */
.row-flash { animation: rowFlash 1.2s ease-out }
.updated { animation: highlight 0.7s ease-out }

/* EXPORT BTN */
.export-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text3); background: var(--surface2); border: 1px solid var(--border); border-radius: 50px; padding: 5px 12px; cursor: pointer; font-family: inherit; font-weight: 600; transition: border-color .15s, color .15s }
.export-btn:hover { border-color: var(--teal); color: #0d9488 }

/* HIDDEN LABEL */
.hidden-label { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px; border-radius: 100px; background: rgba(139,92,246,0.08); color: #7c3aed; border: 1px solid rgba(139,92,246,0.2); font-weight: 700 }

/* PAGINATION */
.pagination { display: flex; align-items: center; gap: 6px; justify-content: flex-end; padding: 12px 14px 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text3) }
.pagination-btn { padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border2); background: var(--white); color: var(--text2); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: border-color .15s, color .15s }
.pagination-btn:hover:not(:disabled) { border-color: var(--teal); color: #0d9488 }
.pagination-btn:disabled { opacity: .35; cursor: not-allowed }
.pagination-btn.active { background: linear-gradient(135deg, var(--teal), var(--teal-light)); color: #fff; border-color: transparent }