/* ==========================================================================
   myPraesenz – Responsive Stylesheet
   Breakpoints:  mobile < 768px | tablet 768–1024px | desktop > 1024px
   ========================================================================== */

/* ── Sidebar transition ──────────────────────────────────────────────────── */
#sidebar {
  transition: width 200ms ease;
  overflow: hidden;
  flex-shrink: 0;
}

/* ── Desktop collapsed state ─────────────────────────────────────────────── */
#sidebar.collapsed {
  width: 60px;
}

#sidebar.collapsed .sidebar-label,
#sidebar.collapsed .sidebar-badge-wrap,
#sidebar.collapsed .sidebar-section-head,
#sidebar.collapsed .sidebar-logo-text,
#sidebar.collapsed .sidebar-footer-text,
#sidebar.collapsed .sidebar-notif-text {
  display: none !important;
}

#sidebar.collapsed .nav-link {
  justify-content: center !important;
  gap: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  margin-left: 4px !important;
  margin-right: 4px !important;
}

#sidebar.collapsed .sidebar-collapse-arrow {
  transform: rotate(180deg);
}

/* ── Tablet: auto-collapse, expand on hover ──────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  #sidebar {
    width: 60px;
  }
  #sidebar .sidebar-label,
  #sidebar .sidebar-badge-wrap,
  #sidebar .sidebar-section-head,
  #sidebar .sidebar-logo-text,
  #sidebar .sidebar-footer-text,
  #sidebar .sidebar-notif-text {
    display: none !important;
  }
  #sidebar .nav-link {
    justify-content: center !important;
    gap: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  /* Expand on hover */
  #sidebar:hover {
    width: 190px;
    z-index: 20;
    box-shadow: 4px 0 16px rgba(0,0,0,0.18);
  }
  #sidebar:hover .sidebar-label,
  #sidebar:hover .sidebar-footer-text,
  #sidebar:hover .sidebar-notif-text {
    display: block !important;
  }
  #sidebar:hover .sidebar-badge-wrap {
    display: flex !important;
  }
  #sidebar:hover .sidebar-section-head {
    display: block !important;
  }
  #sidebar:hover .sidebar-logo-text {
    display: block !important;
  }
  #sidebar:hover .nav-link {
    justify-content: flex-start !important;
    gap: 10px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
}

/* ── Mobile: hide sidebar, show mobile chrome ────────────────────────────── */
@media (max-width: 767px) {
  #sidebar {
    display: none !important;
  }
  #mobile-topbar {
    display: flex !important;
  }
  #bottom-nav {
    display: flex !important;
  }

  /* Switch from "scroll-inside-container" to natural page scroll on mobile.
     The desktop layout uses body{h-screen overflow-hidden} + main{overflow-y-auto}
     so the sidebar stays fixed while only main scrolls. On mobile there is no
     sidebar, so we let the full page scroll naturally instead. */
  body {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    overflow-x: hidden !important;
  }
  #main-content {
    overflow-y: visible !important;
    height: auto !important;
    flex: none !important;
    /* Space for fixed top-bar (56px) and fixed bottom-nav (64px + safe-area) */
    padding-top: 56px !important;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (min-width: 768px) {
  #mobile-topbar {
    display: none !important;
  }
  #bottom-nav {
    display: none !important;
  }
  #mobile-menu {
    display: none !important;
  }
  #sidebar-toggle-btn {
    display: flex;
  }
}

/* Bottom nav safe-area for iPhone home indicator */
#bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Responsive metric grids ─────────────────────────────────────────────── */
/* 4-column grids → 2 columns on mobile */
@media (max-width: 767px) {
  .mp-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .mp-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .mp-grid-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  /* Compact cards on mobile */
  .mp-grid-4 > div,
  .mp-grid-3 > div {
    padding: 12px 14px !important;
  }
  .mp-grid-4 .mp-card-number,
  .mp-grid-3 .mp-card-number {
    font-size: 22px !important;
  }
}

/* ── Dashboard two-column sections: stack on mobile ─────────────────────── */
@media (max-width: 767px) {
  .mp-two-col {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

/* ── Page content padding on mobile ─────────────────────────────────────── */
@media (max-width: 767px) {
  .mp-page {
    padding: 16px !important;
  }
  /* Reduce header text size */
  .mp-page h1 {
    font-size: 20px !important;
  }
}

/* ── Responsive tables: horizontal scroll + sticky first column ──────────── */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  border-radius: 0 0 8px 8px;
}

/* Right edge shadow as scroll hint */
.table-scroll-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(to right, transparent, rgba(90, 77, 128, 0.08));
  pointer-events: none;
  border-radius: 0 0 8px 0;
}

@media (max-width: 767px) {
  .table-scroll-wrap table {
    min-width: 560px;
  }
  /* Sticky first column */
  .table-scroll-wrap th:first-child,
  .table-scroll-wrap td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
  }
  .table-scroll-wrap thead th:first-child {
    background: #FAFAFD;
  }
  .table-scroll-wrap tbody td:first-child {
    background: white;
  }
  .table-scroll-wrap tbody tr:hover td:first-child {
    background: #F5F4F9;
  }
}

/* ── Stamp buttons: bigger touch targets on mobile ───────────────────────── */
@media (max-width: 767px) {
  #stamp-buttons button,
  #stamp-buttons [type="submit"] {
    min-height: 52px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    font-size: 15px !important;
  }
}

/* ── Touch targets: minimum 44px for all interactive elements ────────────── */
@media (max-width: 767px) {
  .touch-row {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* Table rows – click target */
  table tbody tr {
    cursor: pointer;
  }
  /* Nav links in mobile overlay */
  #mobile-menu .mob-nav-link {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-radius: 8px;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    transition: background-color 100ms;
  }
  #mobile-menu .mob-nav-link:hover,
  #mobile-menu .mob-nav-link:active {
    background: rgba(255,255,255,0.06);
    color: white;
  }
  #mobile-menu .mob-nav-link.active {
    background: rgba(191,160,74,0.15);
    color: #BFA04A;
  }
}

/* ── Bottom nav item styles ──────────────────────────────────────────────── */
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  color: #B8B4C0;
  font-size: 10px;
  font-weight: 500;
  min-height: 56px;
  text-decoration: none;
  transition: color 100ms;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item.active,
.bottom-nav-item:active {
  color: #BFA04A;
}
.bottom-nav-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}

/* ── Login page: already responsive with lg:flex ────────────────────────── */
@media (max-width: 767px) {
  .login-form-wrap {
    padding: 24px 20px !important;
  }
}

/* ── Nachtrag / form pages on mobile ─────────────────────────────────────── */
@media (max-width: 767px) {
  .max-w-2xl, .max-w-lg, .max-w-xl {
    max-width: 100% !important;
  }
  .grid.grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  .grid.grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}

/* ── Header flex on mobile: stack if needed ──────────────────────────────── */
@media (max-width: 480px) {
  .mp-page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
}

/* ── Sidebar toggle button ───────────────────────────────────────────────── */
#sidebar-toggle-btn {
  display: none; /* shown via @media (min-width:768px) rule above */
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 0;
  color: rgba(255,255,255,0.4);
  border-top: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  transition: color 150ms;
}
#sidebar-toggle-btn:hover {
  color: rgba(255,255,255,0.7);
}
.sidebar-collapse-arrow {
  transition: transform 200ms ease;
}
#sidebar.collapsed .sidebar-collapse-arrow {
  transform: rotate(180deg);
}

/* ── SA sidebar: Einstellungen collapsible ──────────────────────────────── */
/* Remove default browser disclosure marker from summary */
.sidebar-settings > summary::-webkit-details-marker { display: none; }
.sidebar-settings > summary::marker { content: none; }
/* Rotate chevron when details is open */
.sidebar-settings[open] > summary .details-chevron {
  transform: rotate(90deg);
}
/* Hide chevron in fully-collapsed sidebar (icon-only mode) */
#sidebar.collapsed .details-chevron { display: none !important; }
@media (min-width: 768px) and (max-width: 1024px) {
  #sidebar:not(:hover) .details-chevron { display: none !important; }
}

/* ── Monatsfreigabe: bottom-sheet on mobile ──────────────────────────────── */
@media (max-width: 767px) {
  /* Convert absolute dropdown to a slide-up bottom-sheet */
  #freigabe-dropdown {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    border-radius: 12px 12px 0 0 !important;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.14);
    z-index: 100 !important;
    /* Respect iPhone home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* Touch-friendly button heights in the dropdown */
  #freigabe-dropdown button {
    min-height: 44px;
  }
}
/* Backdrop: only visible on mobile (JS sets display:block, this overrides on desktop) */
@media (min-width: 768px) {
  #freigabe-backdrop {
    display: none !important;
  }
}