/* --- Global reset & base --- */
html, body {
  margin: 0;
  padding: 0;
  background: #f7f7f8;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1a1a1a;
}

/* Improve tap targets */
button, a {
  -webkit-tap-highlight-color: transparent;
}

/* --- Header --- */
.app-header {
  width: 100%;
  background: #1a1a1c;
  border-bottom: 1px solid #0c0c0d;
  padding: 10px 0;
}

.app-header .menu-btn {
  background: #2a2a2d;
  border-color: #3a3a3d;
  color: #f8f8fa;
}

.header-user {
  text-align: right;
  font-size: 13px;
  line-height: 1.2;
  color: #f2f2f3;    /* bright light gray */
}

#header-username {
  font-weight: 600;
  color: #ffffff;    /* pure white for best visibility */
}

#header-role {
  color: #d1d1d4;    /* light grey, still readable */
  font-size: 12px;
  margin-left: 4px;
}

/* Inner header: aligns with content width */
.header-inner {
  max-width: 28rem; /* same as Tailwind max-w-md */
  margin: 0 auto;
  padding: 0 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Menu button on the left (same style as main buttons) */
.menu-btn {
  padding: 8px 18px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

/* User info on the right */
.header-user {
  text-align: right;
  font-size: 13px;
  line-height: 1.2;
  color: #374151;
}

#header-username {
  font-weight: 600;
}

#header-role {
  color: #6b7280;
  font-size: 12px;
  margin-left: 4px;
}

/* --- Header menu (expands under header, full-width bar) --- */
.menu-panel {
  width: 100%;
  background: #e7e7ea;
  color: #1a1a1a;
  padding: 12px 0 16px;
  border-bottom: 1px solid #cfcfd1;
}

/* Inner container to match app/content width */
.menu-inner {
  max-width: 28rem;
  margin: 0 auto;
  padding: 0 16px;
}

/* Menu buttons (same shape as "Utwórz rezerwację") */
.menu-panel a,
.menu-panel button {
  display: block;
  width: 100%;              /* width of .menu-inner */
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #111827;
  color: #f9fafb;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  border: none;
  text-decoration: none;
}

/* Sign out style */
.menu-panel button#btn-signout {
  background: #dc2626;
}

/* --- Cards & content --- */
.card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Parent toggles (Dostępne rowery / Aktywne rezerwacje) */
.card-toggle {
  width: 100%;
  text-align: left;
  background: #e7e7ea;      /* a bit darker so the parent stands out */
  border: 1px solid #d1d5db;
  border-radius: 16px;
  padding: 16px;
  font-size: 16px;
}

/* List inside card (home details) */
.card-list {
  margin-top: 8px;
}

/* --- Primary button (for big actions) --- */
.btn-primary {
  width: 100%;
  background: #111827;
  color: #ffffff;
  padding: 12px;
  font-size: 16px;
  border-radius: 12px;
  font-weight: 500;
  text-align: center;
}

/* --- Form styling --- */
input, select {
  border-radius: 12px !important;
  padding: 12px !important;
  border: 1px solid #d1d5db !important;
  font-size: 16px !important;
}

/* Some fields may use .input-field class explicitly */
.input-field {
  width: 100%;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid #d1d5db;
  font-size: 16px;
  background: #ffffff;
}

/* --- Utility --- */
.hidden {
  display: none !important;
}

/* ===================================================
   Reservations-specific styles (do NOT affect home/header)
   Used only on reservations.html
=================================================== */

/* Slightly stronger shadow only for reservation cards */
.reservation-card {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Compact reservation buttons */
.btn-res {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-size: 0.8125rem;  /* ~13px */
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-res-sm {
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
}

.btn-res-primary {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}

.btn-res-outline {
  background: #ffffff;
  color: #111827;
  border-color: #d1d5db;
}

.btn-res-danger {
  background: #ffffff;
  color: #b91c1c;
  border-color: #fca5a5;
}

/* Today / All filter buttons on reservations page */
.filter-btn {
  background: #ffffff;
  color: #111827;
  border-radius: 9999px;
  border: 1px solid #d1d5db;
}

.filter-btn--active {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}