/* ══════════════════════════════════════════════════════════════════
   UI Apple — Componentes estilo SF Design / Apple HIG
   Glassmorphism, spring animations, generous spacing
   Import: @import url('/core/ui-apple.css');
   Prefixo: ap-
   ══════════════════════════════════════════════════════════════════ */

/* ── VARIABLES ─────────────────────────────────────────────────── */
:root {
  --ap-bg: #000000;
  --ap-surface: rgba(28,28,30,.85);
  --ap-surface2: rgba(44,44,46,.65);
  --ap-glass: rgba(255,255,255,.06);
  --ap-glass-border: rgba(255,255,255,.08);
  --ap-text: #f5f5f7;
  --ap-text2: rgba(255,255,255,.55);
  --ap-blue: #0a84ff;
  --ap-green: #30d158;
  --ap-red: #ff453a;
  --ap-orange: #ff9f0a;
  --ap-purple: #bf5af2;
  --ap-teal: #64d2ff;
  --ap-gray: rgba(255,255,255,.12);
  --ap-radius: 16px;
  --ap-radius-sm: 10px;
  --ap-radius-lg: 22px;
  --ap-shadow: 0 8px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
  --ap-shadow-sm: 0 2px 12px rgba(0,0,0,.3);
  --ap-blur: blur(40px) saturate(180%);
  --ap-transition: .3s cubic-bezier(.2,.8,.2,1);
  --ap-spring: .5s cubic-bezier(.175,.885,.32,1.275);
}

/* ── BUTTONS ───────────────────────────────────────────────────── */
.ap-btn {
  padding: 10px 20px;
  border-radius: var(--ap-radius-sm);
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, 'SF Pro Text', 'Inter', sans-serif;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--ap-transition);
  letter-spacing: -.01em;
}
.ap-btn:active { transform: scale(.97); }

.ap-btn-primary {
  background: var(--ap-blue);
  color: #fff;
}
.ap-btn-primary:hover { background: #2196ff; box-shadow: 0 4px 20px rgba(10,132,255,.35); }

.ap-btn-secondary {
  background: var(--ap-glass);
  color: var(--ap-text);
  border: 1px solid var(--ap-glass-border);
  backdrop-filter: var(--ap-blur);
  -webkit-backdrop-filter: var(--ap-blur);
}
.ap-btn-secondary:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); }

.ap-btn-danger {
  background: rgba(255,69,58,.15);
  color: var(--ap-red);
  border: 1px solid rgba(255,69,58,.2);
}
.ap-btn-danger:hover { background: rgba(255,69,58,.25); }

.ap-btn-success {
  background: rgba(48,209,88,.15);
  color: var(--ap-green);
  border: 1px solid rgba(48,209,88,.2);
}
.ap-btn-success:hover { background: rgba(48,209,88,.25); }

.ap-btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 8px; }
.ap-btn-lg { padding: 14px 28px; font-size: 16px; border-radius: 14px; }

/* ── BADGES ────────────────────────────────────────────────────── */
.ap-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: -.01em;
  font-family: -apple-system, 'SF Pro Text', sans-serif;
}
.ap-badge-blue   { background: rgba(10,132,255,.15); color: var(--ap-blue); }
.ap-badge-green  { background: rgba(48,209,88,.15); color: var(--ap-green); }
.ap-badge-red    { background: rgba(255,69,58,.15); color: var(--ap-red); }
.ap-badge-orange { background: rgba(255,159,10,.15); color: var(--ap-orange); }
.ap-badge-purple { background: rgba(191,90,242,.15); color: var(--ap-purple); }
.ap-badge-gray   { background: rgba(255,255,255,.08); color: var(--ap-text2); }

/* ── CARD ──────────────────────────────────────────────────────── */
.ap-card {
  background: var(--ap-surface);
  backdrop-filter: var(--ap-blur);
  -webkit-backdrop-filter: var(--ap-blur);
  border: 1px solid var(--ap-glass-border);
  border-radius: var(--ap-radius);
  padding: 24px;
  transition: all var(--ap-transition);
}
.ap-card:hover {
  border-color: rgba(255,255,255,.12);
  box-shadow: var(--ap-shadow-sm);
}
.ap-card-interactive { cursor: pointer; }
.ap-card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--ap-shadow);
}
.ap-card-interactive:active { transform: translateY(0) scale(.99); }

/* ── INPUT ─────────────────────────────────────────────────────── */
.ap-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--ap-glass);
  border: 1px solid var(--ap-glass-border);
  border-radius: var(--ap-radius-sm);
  font-size: 15px;
  color: var(--ap-text);
  font-family: -apple-system, 'SF Pro Text', 'Inter', sans-serif;
  outline: none;
  transition: all var(--ap-transition);
  letter-spacing: -.01em;
}
.ap-input::placeholder { color: var(--ap-text2); }
.ap-input:focus {
  border-color: var(--ap-blue);
  box-shadow: 0 0 0 3px rgba(10,132,255,.2);
  background: rgba(255,255,255,.08);
}

.ap-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ap-text);
  margin-bottom: 8px;
  display: block;
  letter-spacing: -.01em;
}

.ap-field { margin-bottom: 20px; }

/* ── TOGGLE ────────────────────────────────────────────────────── */
.ap-toggle {
  position: relative;
  width: 51px;
  height: 31px;
  flex-shrink: 0;
  cursor: pointer;
  display: inline-flex;
}
.ap-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ap-toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(120,120,128,.32);
  border-radius: 16px;
  transition: background var(--ap-transition);
}
.ap-toggle-track::before {
  content: '';
  position: absolute;
  width: 27px;
  height: 27px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transition: transform var(--ap-spring);
}
.ap-toggle input:checked + .ap-toggle-track {
  background: var(--ap-green);
}
.ap-toggle input:checked + .ap-toggle-track::before {
  transform: translateX(20px);
}

/* ── ALERT ─────────────────────────────────────────────────────── */
.ap-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--ap-radius-sm);
  backdrop-filter: var(--ap-blur);
  -webkit-backdrop-filter: var(--ap-blur);
  font-size: 14px;
  line-height: 1.5;
}
.ap-alert-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.ap-alert-title { font-weight: 600; margin-bottom: 2px; }
.ap-alert-msg { font-size: 13px; opacity: .75; }
.ap-alert-info    { background: rgba(10,132,255,.1); color: var(--ap-blue); border: 1px solid rgba(10,132,255,.15); }
.ap-alert-success { background: rgba(48,209,88,.1); color: var(--ap-green); border: 1px solid rgba(48,209,88,.15); }
.ap-alert-warning { background: rgba(255,159,10,.1); color: var(--ap-orange); border: 1px solid rgba(255,159,10,.15); }
.ap-alert-error   { background: rgba(255,69,58,.1); color: var(--ap-red); border: 1px solid rgba(255,69,58,.15); }

/* ── TABLE ─────────────────────────────────────────────────────── */
.ap-table-wrap {
  background: var(--ap-surface);
  backdrop-filter: var(--ap-blur);
  -webkit-backdrop-filter: var(--ap-blur);
  border: 1px solid var(--ap-glass-border);
  border-radius: var(--ap-radius);
  overflow: hidden;
}
.ap-table { width: 100%; border-collapse: collapse; }
.ap-table th {
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ap-text2);
  text-align: left;
  border-bottom: 1px solid var(--ap-glass-border);
  letter-spacing: .02em;
}
.ap-table td {
  padding: 14px 20px;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background var(--ap-transition);
}
.ap-table tr:last-child td { border-bottom: none; }
.ap-table tr:hover td { background: rgba(255,255,255,.03); }

/* ── SEARCH ────────────────────────────────────────────────────── */
.ap-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ap-glass);
  border: 1px solid var(--ap-glass-border);
  border-radius: var(--ap-radius-sm);
  padding: 10px 16px;
  transition: all var(--ap-transition);
}
.ap-search:focus-within {
  border-color: var(--ap-blue);
  box-shadow: 0 0 0 3px rgba(10,132,255,.15);
}
.ap-search input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--ap-text);
  font-family: -apple-system, 'SF Pro Text', 'Inter', sans-serif;
  width: 100%;
  letter-spacing: -.01em;
}
.ap-search input::placeholder { color: var(--ap-text2); }
.ap-search-icon { color: var(--ap-text2); flex-shrink: 0; }

/* ── MODAL ─────────────────────────────────────────────────────── */
.ap-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.ap-overlay.open { display: flex; }

.ap-modal {
  background: var(--ap-surface);
  backdrop-filter: var(--ap-blur);
  -webkit-backdrop-filter: var(--ap-blur);
  border: 1px solid var(--ap-glass-border);
  border-radius: var(--ap-radius-lg);
  width: 480px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--ap-shadow);
  animation: apModalIn var(--ap-spring);
}
@keyframes apModalIn {
  from { opacity: 0; transform: scale(.92) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.ap-modal-hd {
  padding: 20px 24px;
  border-bottom: 1px solid var(--ap-glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ap-modal-title { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.ap-modal-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ap-gray);
  border: none;
  cursor: pointer;
  color: var(--ap-text2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ap-transition);
}
.ap-modal-close:hover { background: rgba(255,255,255,.15); color: var(--ap-text); }

.ap-modal-body { padding: 24px; }
.ap-modal-ft {
  padding: 16px 24px;
  border-top: 1px solid var(--ap-glass-border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ── TOAST ─────────────────────────────────────────────────────── */
.ap-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: var(--ap-surface);
  backdrop-filter: var(--ap-blur);
  -webkit-backdrop-filter: var(--ap-blur);
  border: 1px solid var(--ap-glass-border);
  border-radius: var(--ap-radius-sm);
  padding: 12px 20px;
  font-size: 14px;
  color: var(--ap-text);
  box-shadow: var(--ap-shadow);
  z-index: 9999;
  transition: transform var(--ap-spring);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ap-toast.show { transform: translateX(-50%) translateY(0); }

/* ── EMPTY STATE ───────────────────────────────────────────────── */
.ap-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--ap-text2);
}
.ap-empty-icon { margin-bottom: 16px; opacity: .3; }
.ap-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ap-text);
  margin-bottom: 8px;
  letter-spacing: -.02em;
}
.ap-empty-desc { font-size: 14px; line-height: 1.5; }

/* ── SKELETON ──────────────────────────────────────────────────── */
.ap-skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation: apShimmer 1.8s ease infinite;
}
@keyframes apShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── LOADER ────────────────────────────────────────────────────── */
.ap-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}
.ap-loader-ring {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255,255,255,.08);
  border-top-color: var(--ap-blue);
  border-radius: 50%;
  animation: apSpin .8s linear infinite;
}
@keyframes apSpin { to { transform: rotate(360deg); } }

/* ── SEGMENTED CONTROL ─────────────────────────────────────────── */
.ap-segmented {
  display: inline-flex;
  background: var(--ap-glass);
  border: 1px solid var(--ap-glass-border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.ap-segmented-item {
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ap-text2);
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: -apple-system, 'SF Pro Text', 'Inter', sans-serif;
  transition: all var(--ap-transition);
}
.ap-segmented-item:hover { color: var(--ap-text); }
.ap-segmented-item.active {
  background: rgba(255,255,255,.12);
  color: var(--ap-text);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* ── AVATAR ────────────────────────────────────────────────────── */
.ap-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ap-blue), var(--ap-purple));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}
.ap-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.ap-avatar-lg { width: 56px; height: 56px; font-size: 20px; }

/* ── DIVIDER ───────────────────────────────────────────────────── */
.ap-divider {
  height: 1px;
  background: var(--ap-glass-border);
  margin: 20px 0;
}

/* ── LIST / MENU ───────────────────────────────────────────────── */
.ap-list {
  background: var(--ap-surface);
  backdrop-filter: var(--ap-blur);
  -webkit-backdrop-filter: var(--ap-blur);
  border: 1px solid var(--ap-glass-border);
  border-radius: var(--ap-radius);
  overflow: hidden;
}
.ap-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background var(--ap-transition);
  cursor: pointer;
}
.ap-list-item:last-child { border-bottom: none; }
.ap-list-item:hover { background: rgba(255,255,255,.04); }
.ap-list-item:active { background: rgba(255,255,255,.06); }
.ap-list-item-title { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.ap-list-item-desc { font-size: 13px; color: var(--ap-text2); margin-top: 2px; }
.ap-list-item-chevron { color: var(--ap-text2); margin-left: auto; }

/* ── TOOLTIP ───────────────────────────────────────────────────── */
.ap-tooltip {
  background: var(--ap-surface);
  backdrop-filter: var(--ap-blur);
  -webkit-backdrop-filter: var(--ap-blur);
  border: 1px solid var(--ap-glass-border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--ap-text);
  box-shadow: var(--ap-shadow-sm);
  pointer-events: none;
  z-index: 9999;
}

/* ── PROGRESS BAR ──────────────────────────────────────────────── */
.ap-progress {
  height: 6px;
  background: var(--ap-gray);
  border-radius: 3px;
  overflow: hidden;
}
.ap-progress-bar {
  height: 100%;
  background: var(--ap-blue);
  border-radius: 3px;
  transition: width var(--ap-transition);
}

/* ── CHIP ──────────────────────────────────────────────────────── */
.ap-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--ap-glass);
  border: 1px solid var(--ap-glass-border);
  border-radius: 20px;
  font-size: 13px;
  color: var(--ap-text);
  font-family: -apple-system, 'SF Pro Text', sans-serif;
  cursor: pointer;
  transition: all var(--ap-transition);
}
.ap-chip:hover { background: rgba(255,255,255,.1); }
.ap-chip.active { background: var(--ap-blue); border-color: var(--ap-blue); color: #fff; }