/**
 * Unimarket - Marketplace Styles
 * Estilos para o marketplace Unitá no estilo do marketplace GLPI
 */

/* Container principal */
.marketplace.unita {
   display: flex;
   flex-direction: column;
   padding: 1rem;
}

.marketplace.unita .top-panel {
   display: flex;
   gap: 0.75rem;
   align-items: center;
   flex-wrap: wrap;
   margin-bottom: 1rem;
}

.marketplace.unita .top-panel .unimarket-filter {
   flex: 1 1 260px;
}

.marketplace.unita .top-panel .unimarket-sort {
   flex: 0 0 220px;
   max-width: 240px;
}

/* Lista de plugins */
.marketplace.unita .plugins {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
   gap: 1rem;
}

/* Card de plugin */
.marketplace.unita li.plugin {
   border: 1px solid var(--tblr-border-color, #e6e7e9);
   border-radius: 0.375rem;
   background: var(--tblr-card-bg, #fff);
   padding: 1rem;
   display: flex;
   flex-direction: column;
   transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
   position: relative;
}

.marketplace.unita li.plugin:hover {
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Plugin com atualização disponível */
.marketplace.unita li.plugin.plugin-update-available {
   border-color: var(--tblr-warning, #f59f00);
   border-width: 2px;
}

.marketplace.unita li.plugin.plugin-update-available::before {
   content: '';
   position: absolute;
   top: -1px;
   right: -1px;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 28px 28px 0;
   border-color: transparent var(--tblr-warning, #f59f00) transparent transparent;
   border-radius: 0 0.375rem 0 0;
}

/* Main content do card */
.marketplace.unita li.plugin .main {
   display: flex;
   gap: 1rem;
   flex: 1;
}

/* Ícone do plugin */
.marketplace.unita li.plugin .icon {
   flex-shrink: 0;
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.marketplace.unita li.plugin .icon img,
.marketplace.unita li.plugin .icon .plugin-icon {
   max-width: 48px;
   max-height: 48px;
   border-radius: 0.25rem;
}

.marketplace.unita li.plugin .icon .icon-text {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   font-size: 1.25rem;
   border-radius: 0.375rem;
   text-transform: uppercase;
}

/* Detalhes do plugin */
.marketplace.unita li.plugin .details {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
}

.marketplace.unita li.plugin .title {
   margin: 0 0 0.25rem;
   font-size: 1rem;
   font-weight: 600;
   color: var(--tblr-body-color, #1e293b);
   line-height: 1.3;
}

.marketplace.unita li.plugin .description {
   color: var(--tblr-muted, #626976);
   font-size: 0.8125rem;
   margin: 0;
   line-height: 1.4;
   display: -webkit-box;
   line-clamp: 2;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* Botões de ação */
.marketplace.unita li.plugin .buttons {
   display: flex;
   gap: 0.25rem;
   align-items: flex-start;
   flex-shrink: 0;
}

.marketplace.unita li.plugin .buttons form {
   display: inline-flex;
}

.marketplace.unita li.plugin .buttons button,
.marketplace.unita li.plugin .buttons .modify_plugin {
   padding: 0.375rem 0.5rem;
   border: none;
   background: var(--tblr-bg-surface, #f8fafc);
   cursor: pointer;
   border-radius: 0.25rem;
   color: var(--tblr-body-color, #1e293b);
   transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 32px;
   min-height: 32px;
}

.marketplace.unita li.plugin .buttons button:hover,
.marketplace.unita li.plugin .buttons .modify_plugin:hover {
   background: var(--tblr-primary-lt, #e7f1ff);
   color: var(--tblr-primary, #206bc4);
}

.marketplace.unita li.plugin .buttons button i,
.marketplace.unita li.plugin .buttons .modify_plugin i {
   font-size: 1rem;
}

.marketplace.unita li.plugin .buttons .text-warning {
   color: var(--tblr-warning, #f59f00) !important;
}

.marketplace.unita li.plugin .buttons .text-danger {
   color: var(--tblr-danger, #d63939) !important;
}

/* Footer do card */
.marketplace.unita li.plugin .footer {
   margin-top: 0.75rem;
   padding-top: 0.75rem;
   border-top: 1px solid var(--tblr-border-color, #e6e7e9);
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 0.75rem;
   color: var(--tblr-muted, #626976);
}

.marketplace.unita li.plugin .footer .misc-left,
.marketplace.unita li.plugin .footer .misc-right {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.marketplace.unita li.plugin .footer .version {
   display: flex;
   align-items: center;
   gap: 0.25rem;
}

.marketplace.unita li.plugin .footer .badge {
   font-size: 0.6875rem;
   padding: 0.25em 0.5em;
}

/* Badges de status */
.bg-success-lt {
   background-color: rgba(47, 179, 68, 0.1) !important;
   color: #2fb344 !important;
}

.bg-warning-lt {
   background-color: rgba(245, 159, 0, 0.1) !important;
   color: #f59f00 !important;
}

.bg-secondary-lt {
   background-color: rgba(98, 105, 118, 0.1) !important;
   color: #626976 !important;
}

/* Indicador de atualização no marketplace GLPI */
li.plugin.unimarket-update-available {
   border-color: var(--tblr-warning, #f59f00) !important;
}

.unimarket-update-btn {
   animation: pulse 2s infinite;
}

@keyframes pulse {
   0% {
      opacity: 1;
   }
   50% {
      opacity: 0.6;
   }
   100% {
      opacity: 1;
   }
}

/* Responsividade */
@media (max-width: 768px) {
   .marketplace.unita .plugins {
      grid-template-columns: 1fr;
   }

   .marketplace.unita li.plugin .main {
      flex-wrap: wrap;
   }

   .marketplace.unita li.plugin .buttons {
      width: 100%;
      justify-content: flex-end;
      margin-top: 0.5rem;
   }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
   .marketplace.unita li.plugin {
      background: var(--tblr-card-bg, #1e2433);
      border-color: var(--tblr-border-color, #2c3547);
   }

   .marketplace.unita li.plugin .buttons button,
   .marketplace.unita li.plugin .buttons .modify_plugin {
      background: var(--tblr-bg-surface, #edeff5);
   }
}

/* Aba Unitá no marketplace */
.unimarket-tab .nav-link {
   display: flex;
   align-items: center;
   gap: 0.25rem;
}

.unimarket-tab .nav-link i {
   font-size: 1rem;
}