/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
  .grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; align-items: stretch; }

  /* Hide ONLY desktop nav links in header */
  .header-inner .nav-links { display: none; }
  .header-inner .nav-admin { display: none; }
  .icon-btn { display: grid; }
  .mobile-drawer .nav-links { display: flex; }

  .calendar-duo { grid-template-columns: 1fr; }
  .calendar-grid { gap: 5px; }
  .day { padding: 9px 0; }
}

/* =========================================================
   Footer
   ========================================================= */
.app-footer {
  border-top: 1px solid rgba(47,62,47,0.12);
  background: rgba(255,255,255,0.70);
  backdrop-filter: blur(8px);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}
.footer-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-nav a {
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 750;
}
.footer-nav a:hover { text-decoration: underline; }

/* =========================================================
  Utilities
   ========================================================= */

.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.mt-0 { margin-top: 0 !important; }
.mt-3 { margin-top: 12px; }

/* Page actions (rechts ausrichten, volle Breite wenn gewünscht) */
.page-actions-right{
  justify-content: flex-end;
  width: 100%;
}
.page-actions.page-actions-right{
  width: 100%;
}

/* Buttons: Links und echte Buttons identisch behandeln */
a.btn,
button.btn{
  display: inline-flex;
  align-items: center;
  font: inherit;
  line-height: 1.2;
  padding-top: 10px;
  padding-bottom: 10px;
}

button.btn{
  -webkit-appearance: none;
  appearance: none;
}

/* Mobile: Tabelle innerhalb der Card scrollbar */
.table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll .price-breakdown-table{
  min-width: 720px;
}