/* Otloblana admin overrides on top of Vuexy */

.menu-inner > .menu-item > .menu-link {
  white-space: normal;
}

.otloblana-kpi-grid,
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.otloblana-kpi-card,
.metric-card {
  background: var(--bs-paper-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: var(--bs-box-shadow-xs);
}

.metric-card h3,
.otloblana-kpi-card h3 {
  font-size: 0.95rem;
  margin: 0;
  color: var(--bs-secondary-color);
}

.metric-card p,
.otloblana-kpi-card p {
  margin: 0.45rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bs-heading-color);
}

.otloblana-dashboard-grid,
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.dashboard-span-2,
.otloblana-span-2 {
  grid-column: span 2;
}

.glass-card {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  background: var(--bs-paper-bg);
  box-shadow: var(--bs-box-shadow-xs);
}

.status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.status-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed var(--bs-border-color);
}

.permissions-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stacked-form {
  display: grid;
  gap: 0.9rem;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: 0.45rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 0.4rem;
}

.swal2-container {
  z-index: 20000;
}

.otloblana-reveal {
  animation: otloblanaFadeInUp 0.5s ease both;
}

.otloblana-delay-1 {
  animation-delay: 0.08s;
}

.otloblana-delay-2 {
  animation-delay: 0.16s;
}

.otloblana-delay-3 {
  animation-delay: 0.24s;
}

.card .avatar-initial {
  transition: transform 0.25s ease;
}

.card:hover .avatar-initial {
  transform: translateY(-2px) scale(1.02);
}

@keyframes otloblanaFadeInUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

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

@media (max-width: 1199px) {
  .otloblana-kpi-grid,
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .otloblana-dashboard-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-span-2,
  .otloblana-span-2 {
    grid-column: auto;
  }
}

@media (max-width: 575px) {
  .otloblana-kpi-grid,
  .metrics-grid {
    grid-template-columns: 1fr;
  }
}