/* ================================================================ */
/* SOBRE PLANOS - TEMA CLARO                                       */
/* ================================================================ */

/* Variáveis com prefixo para evitar conflito */
.admin-container {
   --sp-background: #ffffff;
   --sp-background-secondary: #f8fafc;
   --sp-card: #ffffff;
   --sp-primary: 220 90% 56%;
   --sp-primary-color: #3b82f6;
   --sp-primary-hover: #2563eb;
   --sp-secondary: #f1f5f9;
   --sp-muted: #94a3b8;
   --sp-accent: #10b981;
   --sp-border: #e2e8f0;
   --sp-border-dark: #cbd5e1;
   --sp-text-primary: #1e293b;
   --sp-text-secondary: #475569;
   --sp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --sp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
   --sp-radius: 0.75rem;
}

/* ================================================================ */
/* CONTAINER PRINCIPAL                                              */
/* ================================================================ */

.admin-container {
   max-width: 1400px;
   margin: 0 auto;
   padding: 2rem;
   padding-top: 100px;
   background: var(--sp-background);
   min-height: 100vh;
}

/* ================================================================ */
/* HERO / TÍTULO DA PÁGINA                                          */
/* ================================================================ */

.admin-container .page-hero {
   text-align: center;
   margin-bottom: 3rem;
   padding: 2rem 1rem;
   background: linear-gradient(135deg, hsl(var(--sp-primary) / 0.05), hsl(var(--sp-primary) / 0.02));
   border-radius: var(--sp-radius);
   border: 1px solid hsl(var(--sp-primary) / 0.1);
}

.admin-container .page-title {
   font-size: 2.25rem;
   font-weight: 700;
   color: var(--sp-text-primary);
   margin-bottom: 0.75rem;
   background: linear-gradient(135deg, var(--sp-primary-color), var(--sp-primary-hover));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.admin-container .page-subtitle {
   font-size: 1.1rem;
   color: var(--sp-text-secondary);
   max-width: 600px;
   margin: 0 auto;
   line-height: 1.6;
}

/* ================================================================ */
/* SEÇÕES                                                           */
/* ================================================================ */

.admin-container .section {
   margin-bottom: 3rem;
}

.admin-container .section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 1.5rem;
}

.admin-container .section-title {
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--sp-text-primary);
}

.admin-container .section-badge {
   background: var(--sp-primary-color);
   color: white;
   padding: 0.25rem 0.75rem;
   border-radius: 9999px;
   font-size: 0.75rem;
   font-weight: 600;
}

/* ================================================================ */
/* CARDS                                                            */
/* ================================================================ */

.admin-container .card {
   background: var(--sp-card);
   border: 1px solid var(--sp-border);
   border-radius: var(--sp-radius);
   box-shadow: var(--sp-shadow-sm);
   overflow: hidden;
}

.admin-container .card-header {
   padding: 1.25rem 1.5rem;
   border-bottom: 1px solid var(--sp-border);
   background: var(--sp-background-secondary);
}

.admin-container .card-body {
   padding: 0;
}

/* ================================================================ */
/* TABELA DE PLANOS                                                 */
/* ================================================================ */

.admin-container .table-container {
   overflow-x: auto;
}

.admin-container .data-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.875rem;
}

.admin-container .data-table thead {
   background: var(--sp-background-secondary);
}

.admin-container .data-table th {
   padding: 1rem 1.25rem;
   text-align: left;
   font-weight: 600;
   color: var(--sp-text-secondary);
   text-transform: uppercase;
   font-size: 0.75rem;
   letter-spacing: 0.05em;
   border-bottom: 2px solid var(--sp-border);
   white-space: nowrap;
}

.admin-container .data-table td {
   padding: 1rem 1.25rem;
   border-bottom: 1px solid var(--sp-border);
   vertical-align: middle;
}

.admin-container .data-table tbody tr {
   transition: background-color 0.15s ease;
}

.admin-container .data-table tbody tr:hover {
   background: var(--sp-background-secondary);
}

.admin-container .data-table tbody tr:last-child td {
   border-bottom: none;
}

/* Células específicas */
.admin-container .plan-name {
   font-weight: 600;
   color: var(--sp-text-primary);
   display: flex;
   align-items: center;
   gap: 0.75rem;
}

.admin-container .plan-image {
   width: 40px;
   height: 40px;
   border-radius: 8px;
   object-fit: cover;
   border: 1px solid var(--sp-border);
}

.admin-container .plan-description {
   color: var(--sp-text-secondary);
   max-width: 300px;
   line-height: 1.4;
}

.admin-container .price-cell {
   font-weight: 600;
   color: var(--sp-accent);
}

.admin-container .price-monthly {
   color: var(--sp-primary-color);
}

.admin-container .price-annual {
   color: var(--sp-accent);
}

.admin-container .price-label {
   display: block;
   font-size: 0.7rem;
   color: var(--sp-muted);
   font-weight: 400;
   text-transform: uppercase;
   margin-top: 2px;
}

/* Tags de robôs */
.admin-container .robot-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 0.375rem;
   max-width: 280px;
}

.admin-container .robot-tag {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
   padding: 0.25rem 0.625rem;
   background: hsl(var(--sp-primary) / 0.1);
   color: var(--sp-primary-color);
   border-radius: 9999px;
   font-size: 0.75rem;
   font-weight: 500;
   white-space: nowrap;
}

.admin-container .robot-tag i {
   width: 12px;
   height: 12px;
}

/* ================================================================ */
/* GRADE DE ROBÔS                                                   */
/* ================================================================ */

.admin-container .robots-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 1.5rem;
   padding: 1.5rem;
}

.admin-container .robot-card {
   background: var(--sp-card);
   border: 1px solid var(--sp-border);
   border-radius: var(--sp-radius);
   overflow: hidden;
   transition: all 0.2s ease;
}

.admin-container .robot-card:hover {
   box-shadow: var(--sp-shadow-lg);
   transform: translateY(-2px);
   border-color: var(--sp-primary-color);
}

.admin-container .robot-card-header {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 1.25rem;
   background: linear-gradient(135deg, hsl(var(--sp-primary) / 0.05), hsl(var(--sp-primary) / 0.02));
   border-bottom: 1px solid var(--sp-border);
}

.admin-container .robot-avatar {
   width: 56px;
   height: 56px;
   border-radius: 12px;
   object-fit: cover;
   border: 2px solid var(--sp-border);
   background: var(--sp-background-secondary);
}

.admin-container .robot-info {
   flex: 1;
}

.admin-container .robot-name {
   font-weight: 600;
   font-size: 1.1rem;
   color: var(--sp-text-primary);
   margin-bottom: 0.25rem;
}

/* Link para lâmina */
.admin-container .lamina-link {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
   font-size: 0.8rem;
   color: var(--sp-primary-color);
   text-decoration: none;
   font-weight: 500;
   padding: 0.25rem 0.5rem;
   border-radius: 6px;
   transition: all 0.2s ease;
   background: hsl(var(--sp-primary) / 0.08);
}

.admin-container .lamina-link:hover {
   background: hsl(var(--sp-primary) / 0.15);
   color: var(--sp-primary-hover);
}

.admin-container .lamina-link i {
   width: 14px;
   height: 14px;
}

.admin-container .lamina-unavailable {
   font-size: 0.75rem;
   color: var(--sp-muted);
   font-style: italic;
}

.admin-container .robot-card-body {
   padding: 1.25rem;
}

.admin-container .robot-description {
   color: var(--sp-text-secondary);
   font-size: 0.875rem;
   line-height: 1.5;
   margin-bottom: 1rem;
}

.admin-container .robot-plans-label {
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--sp-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 0.625rem;
}

.admin-container .robot-plans-list {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
}

.admin-container .plan-badge {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
   padding: 0.375rem 0.75rem;
   background: linear-gradient(135deg, var(--sp-primary-color), var(--sp-primary-hover));
   color: white;
   border-radius: 8px;
   font-size: 0.8rem;
   font-weight: 500;
   box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.admin-container .no-plans {
   color: var(--sp-muted);
   font-size: 0.875rem;
   font-style: italic;
}

/* ================================================================ */
/* TABELA MATRICIAL ROBÔS X PLANOS                                  */
/* ================================================================ */

.admin-container .matrix-section {
   margin-top: 3rem;
}

.admin-container .matrix-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.875rem;
}

.admin-container .matrix-table th,
.admin-container .matrix-table td {
   padding: 1rem;
   text-align: center;
   border: 1px solid var(--sp-border);
}

.admin-container .matrix-table thead th {
   background: linear-gradient(135deg, var(--sp-primary-color), var(--sp-primary-hover));
   color: white;
   font-weight: 600;
   text-transform: uppercase;
   font-size: 0.75rem;
   letter-spacing: 0.05em;
}

.admin-container .matrix-table thead th:first-child {
   text-align: left;
   background: var(--sp-background-secondary);
   color: var(--sp-text-primary);
}

.admin-container .matrix-table tbody td:first-child {
   text-align: left;
   font-weight: 500;
   background: var(--sp-background-secondary);
   white-space: nowrap;
}

.admin-container .matrix-table tbody tr:hover {
   background: hsl(var(--sp-primary) / 0.03);
}

.admin-container .check-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   background: rgba(16, 185, 129, 0.1);
   color: #059669;
   border-radius: 50%;
}

.admin-container .cross-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   background: rgba(239, 68, 68, 0.08);
   color: #dc2626;
   border-radius: 50%;
}

/* ================================================================ */
/* EMPTY STATE                                                      */
/* ================================================================ */

.admin-container .empty-state {
   text-align: center;
   padding: 4rem 2rem;
   color: var(--sp-muted);
}

.admin-container .empty-state i {
   width: 64px;
   height: 64px;
   margin-bottom: 1rem;
   opacity: 0.5;
}

.admin-container .empty-state h3 {
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--sp-text-secondary);
   margin-bottom: 0.5rem;
}

.admin-container .empty-state p {
   font-size: 0.875rem;
}

/* ================================================================ */
/* ANIMAÇÕES                                                        */
/* ================================================================ */

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.admin-container .animate-fade-in {
   animation: fadeIn 0.4s ease-out;
}

/* ================================================================ */
/* RESPONSIVO                                                       */
/* ================================================================ */

@media (max-width: 1024px) {
   .admin-container {
      padding: 1.5rem;
      padding-top: 100px;
   }

   .admin-container .robots-grid {
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1rem;
      padding: 1rem;
   }
}

@media (max-width: 768px) {
   .admin-container {
      padding: 1rem;
      padding-top: 90px;
   }

   .admin-container .page-hero {
      padding: 1.5rem 1rem;
      margin-bottom: 2rem;
   }

   .admin-container .page-title {
      font-size: 1.75rem;
   }

   .admin-container .page-subtitle {
      font-size: 1rem;
   }

   .admin-container .section-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
   }

   .admin-container .robots-grid {
      grid-template-columns: 1fr;
   }

   .admin-container .data-table th,
   .admin-container .data-table td {
      padding: 0.75rem;
   }

   .admin-container .robot-tags {
      max-width: 200px;
   }

   .admin-container .matrix-table {
      font-size: 0.75rem;
   }

   .admin-container .matrix-table th,
   .admin-container .matrix-table td {
      padding: 0.5rem;
   }
}
/* Header da característica com ícone */
.matrix-table th img {
   vertical-align: middle;
   border-radius: 4px;
}

/* Tooltip no hover do header */
.matrix-table th[title] {
   cursor: help;
}

@media (max-width: 480px) {
   .admin-container .plan-name {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
   }

   .admin-container .robot-card-header {
      flex-direction: column;
      text-align: center;
   }

   .admin-container .robot-info {
      text-align: center;
   }
}

/* ================================================================ */
/* SCROLL CUSTOMIZADO (APENAS NA ÁREA DE CONTEÚDO)                 */
/* ================================================================ */

.admin-container ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
}

.admin-container ::-webkit-scrollbar-track {
   background: var(--sp-background-secondary);
   border-radius: 4px;
}

.admin-container ::-webkit-scrollbar-thumb {
   background: var(--sp-border-dark);
   border-radius: 4px;
}

.admin-container ::-webkit-scrollbar-thumb:hover {
   background: var(--sp-muted);
}