/* Mobile overrides (loaded only <=900px) */
:root { --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); }

html, body { overflow-x: hidden !important; }
body { -webkit-text-size-adjust: 100%; }

/* Make header compact and prevent it from making the page wider */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  overflow: hidden;
}
.topbar .brand{ min-width: 0; padding-right: 72px; } /* room for burger */
.topbar .brand .brandtext{ min-width:0; }
.topbar .brand .title{ font-size: 18px; line-height: 1.15; }
.topbar .brand .sub{ font-size: 12px; opacity:.85; }

/* Hide desktop actions on mobile, show burger instead */
.top-actions{ display:none !important; }

/* Burger button: always visible at top-right (no horizontal scroll needed) */
#burgerBtn{
  display: inline-flex !important;
  position: absolute;
  right: calc(14px + var(--safe-right));
  top: calc(12px + var(--safe-top));
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.30);
}

/* Drawer overlay + panel */
#drawerOverlay{
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
#drawerOverlay.open{ opacity: 1; pointer-events: auto; }

#drawer{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  width: min(92vw, 380px);
  padding: calc(18px + var(--safe-top)) 16px 18px 16px;
  background: rgba(15,22,33,.92);
  border-left: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateX(110%);
  transition: transform .20s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#drawer.open{ transform: translateX(0); }

/* Drawer header */
#drawer .drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
#drawer .drawer-title{ font-size: 20px; font-weight: 750; letter-spacing: .2px; }
#drawer .drawer-close{
  width: 44px; height: 44px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

/* Drawer buttons: full-width, clean */
#drawer .drawer-pills{ display:flex; gap:10px; flex-wrap:wrap; margin: 8px 0 14px; }
#drawer .drawer-pills .pill{ margin:0 !important; }

#drawer .drawer-links{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
#drawer .drawer-links a.btn{
  width: 100%;
  justify-content: center;
  padding: 16px 14px;
  border-radius: 18px;
  font-size: 18px;
}

/* Prevent wide calendar from causing body scroll: keep horizontal scroll inside calendar box */
.card, .panel{ max-width: 100%; }
.table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table{ min-width: 720px; } /* keep table scroll only within wrap */

/* Admin – Sperren: Inline-Grids müssen auf Mobile stapeln, sonst verschwinden die Felder */
.hp-grid{
  grid-template-columns: 1fr !important;
}

/* --- FIX: Admin-Sperren Grid auf Mobile stapeln (kein Seitenscroll, keine unsichtbaren Felder) --- */
@media (max-width: 900px) {
  .hp-grid,
  .hp-grid-2,
  .hp-grid-3,
  .hp-grid-5 {
    grid-template-columns: 1fr !important;
  }

  .hp-grid {
    gap: 12px !important;
  }

  .hp-grid > * {
    min-width: 0 !important;
  }
}


/* --------------------------------------------------------------------------
   Mobile Kalender: logische Navigation (Woche oben, Tag darunter)
   + echtes Day-View (nur 1 Tag sichtbar, keine horizontale Scroll-Leiste)
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Week controls row (existing toolbar div gets this class via app.js) */
  .hp-cal-toolbar{
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    justify-items: stretch;
    margin-bottom: 8px !important;
  }
  .hp-cal-toolbar #weekStart{ min-width: 0; }

  /* Day controls row (inserted via app.js) */
  .hp-daybar{
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    margin: 6px 0 12px;
  }
  .hp-daybar #dayLabel{
    width: 100%;
    text-align: center;
    font-weight: 750;
    letter-spacing: .2px;
    max-width: 260px;
    justify-self: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Calendar sizing: remove desktop min-width + make tiles bigger */
  .calendar{ min-width: 0 !important; }
  .cal-wrap{ overflow-x: hidden !important; }
  .cell{ min-height: 56px; padding: 12px; font-size: 13px; }
  .cell.day{ font-size: 13px; }
  .tag{ padding: 10px 12px; border-radius: 16px; }
  .tag .who{ font-size: 14px; }
  .tag .what{ font-size: 12px; }

  /* Collapse non-active day columns to 0-width (keeps column indices intact) */
  body.mday-0 #calendar{ grid-template-columns: 86px 1fr 0 0 0 0 0 0 !important; }
  body.mday-1 #calendar{ grid-template-columns: 86px 0 1fr 0 0 0 0 0 !important; }
  body.mday-2 #calendar{ grid-template-columns: 86px 0 0 1fr 0 0 0 0 !important; }
  body.mday-3 #calendar{ grid-template-columns: 86px 0 0 0 1fr 0 0 0 !important; }
  body.mday-4 #calendar{ grid-template-columns: 86px 0 0 0 0 1fr 0 0 !important; }
  body.mday-5 #calendar{ grid-template-columns: 86px 0 0 0 0 0 1fr 0 !important; }
  body.mday-6 #calendar{ grid-template-columns: 86px 0 0 0 0 0 0 1fr !important; }

  /* Hide cells from other days (header + slots) */
  body.mday-0 #calendar .cell[data-day]:not([data-day="0"]) { display: none !important; }
  body.mday-1 #calendar .cell[data-day]:not([data-day="1"]) { display: none !important; }
  body.mday-2 #calendar .cell[data-day]:not([data-day="2"]) { display: none !important; }
  body.mday-3 #calendar .cell[data-day]:not([data-day="3"]) { display: none !important; }
  body.mday-4 #calendar .cell[data-day]:not([data-day="4"]) { display: none !important; }
  body.mday-5 #calendar .cell[data-day]:not([data-day="5"]) { display: none !important; }
  body.mday-6 #calendar .cell[data-day]:not([data-day="6"]) { display: none !important; }
}