/**
 * Inscricoes SaaS - Componentes UI
 * Cards, botões, tabelas, inputs, badges, empty states
 */

/* ========== UI APP BG ========== */
.ui-app-bg {
  background: #070A12;
  background-image:
    radial-gradient(ellipse 80% 50% at 80% -10%, rgba(124, 92, 255, 0.07), transparent),
    radial-gradient(ellipse 50% 40% at 100% 50%, rgba(79, 140, 255, 0.04), transparent);
  min-height: 100vh;
}

/* ========== UI CONTAINER ========== */
.ui-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}
@media (min-width: 768px) {
  .ui-container { padding: 0 var(--space-6); }
}
@media (min-width: 1200px) {
  .ui-container { padding: 0 var(--space-8); }
}

/* ========== UI CARD (Glass) ========== */
.ui-card,
.card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-3);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.ui-card:hover,
.card:hover {
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}

.ui-card-header,
.card-header {
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 0.875rem 1.25rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.88);
  border-radius: var(--radius-3) var(--radius-3) 0 0;
  letter-spacing: -0.01em;
}

.ui-card-body,
.card-body {
  padding: var(--space-5);
  color: var(--text);
}

.card-body p, .card-body li, .card-body strong, .card-body small, .card-body span,
.card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5, .card-body h6 {
  color: inherit;
}

.card-body .text-muted { color: var(--muted) !important; }
.card-body h6 { color: var(--text) !important; font-weight: 600; }
.card-body hr { border-color: var(--card-border); opacity: 1; }

@media (min-width: 768px) {
  .card-body { padding: var(--space-6); }
}

/* ========== UI KPI (Stat cards) ========== */
.ui-kpi,
.stat-card,
.ui-stat {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-3);
  padding: 1.25rem 1.375rem;
  transition: all var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}
.ui-kpi::before,
.stat-card::before,
.ui-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--primary-3));
  border-radius: 3px 0 0 3px;
}

.ui-kpi:hover,
.stat-card:hover,
.ui-stat:hover {
  border-color: rgba(124,92,255,0.18);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.ui-kpi__label,
.stat-card .stat-label,
.ui-stat__label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ui-kpi__value,
.stat-card .stat-value,
.ui-stat__value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text);
  margin-top: var(--space-2);
  letter-spacing: -0.03em;
}

@media (min-width: 768px) {
  .ui-kpi__value, .stat-card .stat-value, .ui-stat__value { font-size: var(--text-3xl); }
}

/* ========== UI BTN ========== */
.ui-btn,
.btn {
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-2);
  transition: all var(--duration) var(--ease);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.btn-primary,
.ui-btn--primary {
  background: linear-gradient(135deg, var(--primary) 0%, #6B4CE6 100%);
  border: none;
  color: white;
  box-shadow: 0 2px 8px var(--primary-glow);
}

.btn-primary:hover,
.ui-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--primary-glow);
}

.btn-secondary,
.ui-btn--secondary {
  background: var(--bg-3);
  border: 1px solid var(--card-border);
  color: var(--text);
}

.btn-secondary:hover,
.ui-btn--secondary:hover {
  background: var(--bg-2);
  border-color: var(--card-border-hover);
  transform: translateY(-1px);
}

.btn-outline-primary,
.ui-btn--ghost {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary-2);
}

.btn-outline-primary:hover,
.ui-btn--ghost:hover {
  background: var(--primary-muted);
  transform: translateY(-1px);
}

.btn-outline-secondary { border-color: var(--card-border); color: var(--muted); }
.btn-outline-secondary:hover { background: var(--primary-muted); color: var(--primary-2); }
.btn-outline-info { border-color: var(--info); color: var(--info); }
.btn-outline-info:hover { background: var(--info-muted); }
.btn-outline-danger { border-color: var(--danger); color: var(--danger); }
.btn-outline-danger:hover { background: var(--danger-muted); }
.btn-success { background: linear-gradient(135deg, var(--success) 0%, #16a34a 100%); border: none; color: white; }
.btn-success:hover { transform: translateY(-1px); }

@media (max-width: 768px) {
  .btn { min-height: 44px; padding: var(--space-3) var(--space-4); }
}

/* ========== UI BADGE ========== */
.ui-badge,
.badge {
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: 9999px;
  font-size: var(--text-xs);
}

.badge.bg-success { background: var(--success-muted) !important; color: var(--success) !important; }
.badge.bg-warning { background: var(--warning-muted) !important; color: var(--warning) !important; }
.badge.bg-danger { background: var(--danger-muted) !important; color: var(--danger) !important; }
.badge.bg-info { background: var(--info-muted) !important; color: var(--info) !important; }
.badge.bg-secondary { background: var(--bg-4) !important; color: var(--muted) !important; }

/* ========== UI TABLE ========== */
.ui-table,
.table,
table.dataTable {
  color: var(--text) !important;
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02) !important;
  --bs-table-hover-bg: var(--primary-muted) !important;
  background-color: transparent !important;
}

.table thead th,
table.dataTable thead th {
  font-weight: 600;
  color: var(--muted) !important;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid var(--card-border) !important;
  padding: var(--space-4);
}

.table tbody td,
table.dataTable tbody td {
  padding: var(--space-4);
  vertical-align: middle;
  border-bottom: 1px solid var(--card-border);
  background: transparent !important;
  color: var(--text) !important;
}

.table tbody tr:hover,
table.dataTable tbody tr:hover {
  background: var(--primary-muted) !important;
}

.table a,
table.dataTable a {
  color: var(--primary-2) !important;
  text-decoration: none;
  font-weight: 500;
}

.table a:hover,
table.dataTable a:hover { text-decoration: underline; }

/* ========== UI INPUT ========== */
.ui-input,
.form-control,
.form-select {
  background: var(--bg-2) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-2);
  padding: var(--space-3) var(--space-4);
  transition: all var(--duration) var(--ease);
}

.form-control::placeholder { color: var(--muted); opacity: 0.9; }

.form-control:focus,
.form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-muted) !important;
}

.form-label {
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

/* Select2 dark - cores alinhadas ao tema roxo/azul */
.select2-container--bootstrap-5 .select2-selection {
  background: var(--bg-2) !important;
  border-color: var(--card-border) !important;
  color: var(--text) !important;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-muted) !important;
}
.select2-container--bootstrap-5 .select2-selection__rendered {
  color: var(--text) !important;
}
.select2-container--bootstrap-5 .select2-dropdown {
  background: var(--bg-2) !important;
  border-color: var(--card-border) !important;
}
.select2-container--bootstrap-5 .select2-results__option {
  color: var(--text) !important;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background: var(--primary-muted) !important;
  color: var(--primary-2) !important;
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
  background: var(--bg-3) !important;
  border-color: var(--card-border) !important;
  color: var(--text) !important;
}
.select2-container--bootstrap-5 .select2-search__field::placeholder {
  color: var(--muted);
}

/* ========== UI EMPTY ========== */
.ui-empty {
  text-align: center;
  padding: var(--space-10);
}

.ui-empty__icon {
  font-size: 3.5rem;
  color: var(--muted-2);
  margin-bottom: var(--space-4);
}

.ui-empty__text {
  color: var(--muted);
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
}

.ui-empty .btn { margin-top: var(--space-2); }

/* ========== UI MODAL ========== */
.ui-modal .modal-content,
.modal-content {
  background: var(--bg-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-4);
}

.modal-header { border-bottom-color: var(--card-border); }
.modal-footer { border-top-color: var(--card-border); }
.modal-title { color: var(--text); }

/* ========== UI TOAST ========== */
.ui-toast {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-2);
  font-weight: 500;
  z-index: 9999;
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-3);
  animation: uiToastIn 0.3s var(--ease);
}

.ui-toast--success { background: var(--success-muted); color: var(--success); }
.ui-toast--error { background: var(--danger-muted); color: var(--danger); }
.ui-toast--info { background: var(--primary-muted); color: var(--primary-2); }

@keyframes uiToastIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== UI PAGE HEADER ========== */
.page-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.page-header h2, .page-header h1 {
  font-weight: 800;
  font-size: 1.25rem;
  margin: 0;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.025em;
}

@media (min-width: 768px) {
  .page-header h2, .page-header h1 { font-size: 1.5rem; }
}

/* ========== ALERTAS ========== */
.alert {
  border: none;
  border-radius: var(--radius-2);
  padding: var(--space-4);
}

.alert-success { background: var(--success-muted); color: var(--success); }
.alert-danger { background: var(--danger-muted); color: #f87171; }
.alert-warning { background: var(--warning-muted); color: var(--warning); }
.alert .btn-close { filter: invert(1); opacity: 0.7; }

/* ========== ADMIN NAV ========== */
.admin-nav {
  background: var(--card) !important;
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  border-bottom: 1px solid var(--card-border);
  padding: var(--space-3) 0;
}

.admin-nav .navbar-brand {
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--text) !important;
  letter-spacing: -0.02em;
}

.admin-nav .nav-link {
  color: var(--muted) !important;
  font-weight: 500;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-1);
  transition: all var(--duration) var(--ease);
}

.admin-nav .nav-link:hover,
.admin-nav .nav-link:focus {
  color: var(--text) !important;
  background: var(--primary-muted);
}

.admin-nav .nav-link i { margin-right: var(--space-2); opacity: 0.8; }

.admin-nav .dropdown-menu {
  background: var(--bg-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-3);
  padding: var(--space-2);
}

.admin-nav .dropdown-item {
  color: var(--text);
  border-radius: var(--radius-1);
  padding: var(--space-3);
}

.admin-nav .dropdown-item:hover { background: var(--primary-muted); }

.admin-nav .navbar-toggler {
  border-color: var(--card-border);
  color: var(--text);
}

.admin-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.admin-wrapper { min-height: 100vh; }

/* ========== DataTables Dark ========== */
.dataTables_wrapper { color: var(--text); }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--muted); }

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: var(--bg-2) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-2);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--bg-2) !important;
  border-color: var(--card-border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-1);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--primary-muted) !important;
  border-color: var(--primary) !important;
  color: var(--primary-2) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  background: var(--bg-3) !important;
  border-color: var(--card-border) !important;
  color: var(--muted-2) !important;
  opacity: 0.7;
}

.dataTables_wrapper .dataTables_info { color: var(--muted); }
.dataTables_wrapper .dataTables_scrollBody,
.dataTables_wrapper .dataTables_scrollBody table { background: transparent !important; }
.dataTables_wrapper .dataTables_processing {
  background: var(--bg-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--card-border);
}

/* ========== Bootstrap Overrides ========== */
.card, .card-body, .ui-card, .admin-main, .public-main { color: var(--text); }
.text-muted { color: var(--muted) !important; }
.text-primary { color: var(--primary-2) !important; }
.text-secondary { color: var(--muted) !important; }

.card .table, .card table.dataTable, .ui-card .table, .ui-card table.dataTable {
  --bs-table-bg: transparent !important;
}

.card .table tbody tr, .card .table tbody td,
.card table.dataTable tbody tr, .card table.dataTable tbody td,
.ui-card .table tbody tr, .ui-card .table tbody td {
  background: transparent !important;
  color: var(--text) !important;
}

.table > :not(caption) > * > *,
table.dataTable > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--text) !important;
  border-bottom-color: var(--card-border) !important;
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}