/* Custom styles for the application */

/* Add some padding to the body */
body {
  @apply p-4 md:p-8;
}

/* Style for the main container */
.container {
  @apply mx-auto max-w-7xl;
}

/* Custom styles for tables */
.table-container {
  @apply overflow-x-auto rounded-lg shadow;
}

/* Custom styles for the starting-soon class */
.starting-soon {
  @apply bg-red-100 dark:bg-red-900;
}

/* Navbar styles */
.navbar-container {
  @apply sticky top-0 z-50 bg-base-100 shadow-md;
}

.navbar {
  @apply flex items-center justify-between px-4 py-3;
}

.navbar-brand {
  @apply text-xl font-bold text-primary;
}

.navbar-menu {
  @apply hidden md:flex md:items-center md:space-x-4;
}

/* Hide Home and Sign Up links in desktop menu when mobile menu is shown */
@media (max-width: 479px) {
  .navbar-container .navbar .navbar-menu a[href="/"],
  .navbar-container .navbar .navbar-menu a[href*="signup"] {
    display: none !important;
  }
}

.navbar-menu-item {
  @apply px-3 py-2 rounded-md text-base-content hover:bg-base-200 transition-colors duration-200;
}

.navbar-menu-item.active {
  @apply bg-primary/10 text-primary;
}

/* Mobile menu styles */
.mobile-menu-button {
  @apply block p-2 rounded-md text-base-content hover:bg-base-200 focus:outline-none;
  position: relative;
}

/* Ensure swap icons are positioned exactly the same */
.mobile-menu-button .swap-on,
.mobile-menu-button .swap-off {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (min-width: 480px) {
  .mobile-menu-button {
    @apply hidden;
  }
}

.mobile-menu {
  @apply w-full bg-base-100 shadow-md z-40 transition-all duration-300 ease-in-out;
}

/* Hide mobile menu on xs screens and larger, but still allow it to be toggled via JavaScript */
.mobile-menu.hidden {
  @apply hidden;
}

@media (min-width: 480px) {
  .mobile-menu {
    @apply hidden;
  }
}

.mobile-menu-container {
  @apply w-full bg-base-100;
}

.mobile-menu-header {
  @apply flex items-center justify-between p-4 border-b border-base-200;
}

.mobile-menu-close {
  @apply p-2 rounded-md text-base-content hover:bg-base-200;
}

.mobile-menu-items {
  @apply px-2 pt-2 pb-3 space-y-1;
}

/* Footer styles */
footer {
  @apply w-full bg-base-200 text-base-content p-4;
}

/* Mobile footer positioning */
@media (max-width: 767px) {
  body {
    @apply pb-16;
  }

  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }
}

/* Meeting card styles for mobile */
@media (max-width: 640px) {
  .card-body {
    @apply p-4;
  }

  .card-title {
    @apply mb-1;
  }

  .card-actions {
    @apply mt-3;
  }

  /* Make the meeting card more attractive */
  .card {
    @apply max-w-md mx-auto;
  }

  /* Improve button appearance */
  .btn {
    @apply h-12 min-h-12 px-4;
  }
}

/* Dropdown styles */
.dropdown {
  @apply relative;
}

.dropdown-button {
  @apply flex items-center px-3 py-2 rounded-md text-base-content hover:bg-base-200 transition-colors duration-200;
}

.dropdown-menu {
  @apply absolute right-0 mt-2 w-64 rounded-md shadow-lg bg-base-100 ring-1 ring-black ring-opacity-5 focus:outline-none z-50;
}

.dropdown-section {
  @apply py-2;
}

.dropdown-section:not(:last-child) {
  @apply border-b border-base-200;
}

.dropdown-section-title {
  @apply px-4 py-1 text-xs font-semibold text-base-content/70 uppercase;
}

.dropdown-item {
  @apply block px-4 py-2 text-sm text-base-content hover:bg-base-200;
}

/* Admin interface enhancements for proposal examples with DaisyUI */

/* Content preview styling */
.content-preview {
  @apply p-4 bg-base-200 rounded-lg border border-base-300 whitespace-pre-wrap font-mono max-w-lg max-h-[150px] overflow-auto;
}

/* Admin form styling */
.form-row {
  @apply form-control w-full max-w-4xl mb-4;
}

.form-row label {
  @apply label font-medium;
}

/* Submit button styling */
input[type="submit"] {
  @apply btn btn-primary mt-4;
}

/* Admin fieldset styling */
fieldset {
  @apply card bg-base-100 shadow-sm p-4 mb-6;
}

fieldset h2 {
  @apply card-title mb-4;
}

/* Admin list styling */
#changelist table {
  @apply table table-zebra w-full;
}

#changelist thead th {
  @apply bg-base-200 text-base-content font-bold;
}

#changelist tbody tr {
  @apply hover:bg-base-200;
}

/* Filter styling */
#changelist-filter {
  @apply bg-base-200 p-4 rounded-lg;
}

#changelist-filter h2 {
  @apply text-lg font-bold mb-2;
}

#changelist-filter ul {
  @apply menu bg-base-100 w-full rounded-box;
}

#changelist-filter li.selected {
  @apply bg-primary bg-opacity-20;
}

/* Search form styling */
#changelist #toolbar form input[type="text"] {
  @apply input input-bordered w-full max-w-xs;
}

#changelist #toolbar form input[type="submit"] {
  @apply btn btn-primary ml-2;
}

/* Pagination styling */
.paginator {
  @apply join mt-4;
}

.paginator a {
  @apply join-item btn btn-sm;
}

.paginator .this-page {
  @apply join-item btn btn-sm btn-active;
}