/* Admin Panel - Extended Styles (complements style.css) */

/* Badge variants not in style.css */
.badge-info { background: #0ea5e9; color: #fff; }

/* Grid layouts */
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
}

/* Form textarea override */
.form-area { min-height: 80px; resize: vertical; }

/* Spacing utilities */
.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }

#page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  view-transition-name: page-content;
}

.content {
  min-height: 0;
}

.nav-item[href] {
  text-decoration: none;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(page-content) {
  animation: pageOut 180ms ease-in both;
}

::view-transition-new(page-content) {
  animation: pageIn 220ms ease-out both;
}

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

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