/* ─────────────────────────────────────────────────────────────────────────────
   styles.css — Licence Management Dashboard
   Minor overrides / utilities on top of Bootstrap 5.
   ───────────────────────────────────────────────────────────────────────────── */

/* Hide elements with x-cloak until Alpine.js initializes */
[x-cloak] {
  display: none !important;
}

/* Smoother page background */
body {
  background-color: #f4f6f9;
}

/* ─── Login Modal Styling ──────────────────────────────────────────────────── */

.login-modal-content {
  border-radius: 1rem;
  border: none;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
}

.login-modal-content .modal-body {
  padding: 2rem;
}

@media (max-width: 480px) {
  .login-modal-content .modal-body {
    padding: 1.5rem;
  }
}

/* Navbar tweak */
.navbar {
  border-bottom: 1px solid #1a1a2e;
}

/* Card shadow lift on hover */
.card {
  border: none;
  border-radius: 0.75rem;
}

/* Table head separation */
.table thead th {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6c757d;
  border-bottom-width: 1px;
}

/* Monospace hash column — prevent wrapping on wider screens */
@media (min-width: 768px) {
  code {
    white-space: nowrap;
  }
}

/* Badge sizing */
.badge.rounded-pill {
  font-size: 0.7rem;
  padding: 0.35em 0.75em;
}

/* Fade-in for the table card */
.card {
  animation: fadeUp 0.25s ease both;
}

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

/* Action button group spacing */
.btn-sm {
  padding: 0.25rem 0.55rem;
}

/* Make the empty/loading states look nicer */
.display-4 {
  font-size: 3rem;
}

/* Toast — ensure it stacks above modals */
.toast-container {
  z-index: 1100;
}