@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap");
body {
  padding-top: env(safe-area-inset-top); /* Add padding for iOS safe area */
  font-family: "Ubuntu Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.public-item .badge,
.public-item .bi-lock-fill {
  display: none !important;
  visibility: hidden !important;
}

/* Default: show plus, hide x */
input.btn-check + label .bi-plus {
  display: inline-block;
}
input.btn-check + label .bi-x {
  display: none;
}

/* When checkbox is checked: hide plus, show x */
input.btn-check:checked + label .bi-plus {
  display: none;
}
input.btn-check:checked + label .bi-x {
  display: inline-block;
}

.card .col-4 {
  overflow: hidden;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.modal {
  z-index: 9000 !important;
}

body.detail {
  padding-top: 56px; /* Height of navbar */
}

body.detail .navbar {
  background-color: rgba(
    33,
    37,
    41,
    0.7
  ); /* Same color, but with opacity of 0.7 */
  backdrop-filter: blur(8px); /* Blur anything behind */
  -webkit-backdrop-filter: blur(8px); /* Safari support */
}

/* Mobile Modal Styles */
.modal-fullscreen {
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  margin: 0 !important;
}

.modal-fullscreen .modal-dialog {
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important; /* Dynamic viewport height for mobile */
  margin: 0 !important;
  display: flex;
  align-items: stretch;
}

.modal-fullscreen .modal-content {
  height: 100vh !important;
  height: 100dvh !important; /* Dynamic viewport height for mobile */
  border-radius: 0 !important;
  border: none !important;
  display: flex;
  flex-direction: column;
}

#addItemModal .modal-content,
#editItemModal .modal-content {
  display: flex;
  flex-direction: column;
  height: 100vh !important;
  height: 100dvh !important; /* Dynamic viewport height for mobile */
  max-height: 100vh;
  max-height: 100dvh;
}

#addItemModal .modal-body,
#editItemModal .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  padding-bottom: 1rem !important; /* Space for footer visibility */
  min-height: 0; /* Important for flex scrolling */
}

#addItemModal .modal-footer,
#editItemModal .modal-footer {
  flex-shrink: 0;
  position: -webkit-sticky; /* Safari support */
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: #212529 !important;
  padding: 1rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: auto; /* Push footer to bottom */
}

/* Ensure form elements are touch-friendly on mobile */
@media (max-width: 768px) {
  .form-control {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  .modal-body {
    padding: 1rem !important;
  }
}

hr,
.border-top,
.modal-header,
.modal-footer {
  border-color: rgb(92, 99, 106) !important;
}

.btn-group .btn-primary:not(.active) {
  background-color: #212529 !important;
}

.btn-group .btn-primary:not(.active):hover {
  background-color: #212529 !important;
}

#page-home .card {
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  min-height: 180px;
}

#page-home .card-body {
  padding: 0.5rem !important;
}

#page-home .card-footer {
  border-bottom-left-radius: 0 !important;
  padding: 0.25rem 0.5rem !important;
}

.fst-italic {
  font-size: 0.75rem;
}

/* Bootstrap-based smooth animations */
.card-slide-out {
  transition: all 0.6s ease-out;
  transform: translateX(100%);
  opacity: 0;
}

.card-slide-left {
  transition: all 0.6s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}