/**
 * EduSlot Mobile Overhaul
 * Phones + Tablets ≤ 1024px — einheitliches Layout für alle Unterseiten
 */

/* ── Tablet & Phone: Topbar + Bottom-Nav (schließt 769–960px-Lücke) ── */
@media (max-width: 1024px) {
    .mobile-topbar {
        display: flex !important;
    }

    .mobile-bottom-nav {
        display: flex !important;
    }

    .sidebar-toggle-btn {
        display: none !important;
    }

    .notification-container {
        display: none !important;
    }

    #nachrichtenToggle {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        max-width: 100vw !important;
        overflow-x: hidden;
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
        padding-top: calc(54px + 0.75rem) !important;
        padding-bottom: calc(62px + 1rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    .sidebar {
        top: 54px !important;
        height: calc(100dvh - 54px) !important;
        width: min(320px, 88vw) !important;
        z-index: 9998 !important;
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0) !important;
        box-shadow: 8px 0 28px rgba(15, 23, 42, 0.18) !important;
    }

    .sidebar.collapsed {
        transform: translateX(-100%) !important;
    }

    /* Auf Mobile/Tablet: Einklapp-Pfeil weg, klarer Schließen-Button (✕) zeigen */
    .sidebar-collapse-btn {
        display: none !important;
    }
    .sidebar-close-btn {
        display: flex !important;
    }

    .sidebar-overlay {
        top: 0 !important;
        z-index: 9997 !important;
        display: none;
        background: rgba(15, 23, 42, 0.55) !important;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }
    .sidebar-overlay.visible {
        display: block !important;
    }

    .sidebar-nav {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1.25rem !important;
    }

    .sidebar-fav-list {
        display: block !important;
        max-height: none !important;
    }

    .sidebar-fav-header #sidebarFavToggleBtn {
        display: none !important;
    }

    /* Explizite display-Werte statt 'revert' (verzerrt sonst die Sidebar). */
    .sidebar-link-text { display: inline-block !important; }
    .sidebar-school-name { display: inline-block !important; }
    .sidebar-category { display: block !important; flex-shrink: 0 !important; line-height: 1.2 !important; }
    .sidebar-fav-star { display: inline-block !important; }
    .sidebar-user-info { display: block !important; }
    .sidebar-tier-row { display: flex !important; }
    .sidebar-version { display: block !important; }
    .sidebar-link { flex-shrink: 0 !important; }

    .sidebar-link {
        justify-content: flex-start !important;
    }

    .footer-legal {
        margin-left: 0 !important;
        padding-bottom: calc(62px + 0.75rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    .pinboard-sidebar {
        top: 54px !important;
        height: calc(100dvh - 54px) !important;
    }

    #notificationDropdown {
        position: fixed !important;
        top: 54px !important;
        right: 8px !important;
        left: 8px !important;
        min-width: unset !important;
        max-width: unset !important;
        width: auto !important;
    }

    .nachr-panel {
        top: 54px !important;
        height: calc(100dvh - 54px) !important;
    }

    /* Cookie-Banner über Bottom-Nav */
    #cookieBanner,
    .cookie-banner {
        bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 850 !important;
    }
}

/* ── Wochenplan: Agenda statt Tabelle auf Mobile/Tablet ── */
@media (max-width: 1024px) {
    .week-table-wrapper {
        display: none !important;
    }

    .mobile-day-strip {
        display: flex !important;
    }

    .mobile-agenda-wrapper {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        margin-top: 0.75rem;
    }
}

/* ── Mobile Tages-Umschalter (Dashboard) ── */
.mobile-day-strip {
    display: none;
    gap: 0.4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0 0.75rem;
    margin: 0 -0.25rem;
    scrollbar-width: none;
}

.mobile-day-strip::-webkit-scrollbar {
    display: none;
}

.mobile-day-pill {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 3.4rem;
    padding: 0.5rem 0.65rem;
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 12px;
    background: var(--bg-card, #fff);
    color: var(--text-secondary);
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.mobile-day-pill .pill-wd {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-primary);
}

.mobile-day-pill .pill-dt {
    font-size: 0.68rem;
}

.mobile-day-pill.active {
    background: var(--primary, #6366f1);
    border-color: var(--primary, #6366f1);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent);
}

.mobile-day-pill.active .pill-wd,
.mobile-day-pill.active .pill-dt {
    color: #fff;
}

.mobile-day-pill.today:not(.active) {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
}

/* ── Dashboard ── */
@media (max-width: 1024px) {
    .dashboard {
        max-width: 100%;
        overflow-x: hidden;
    }

    .dashboard-top-section {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .dashboard-card-date,
    .dashboard-card-title {
        width: 100% !important;
    }

    .date-form-inline {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .date-input-inline {
        min-width: 0;
        flex: 1;
    }

    #roomTabsBar,
    #categoryTabsBar,
    .room-tabs-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
        max-width: 100%;
    }

    .room-tab-wrap {
        flex-shrink: 0;
    }

    .dashboard-layout {
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 0 !important;
    }

    .dashboard-widgets-row {
        flex-direction: column !important;
    }

    .dashboard-left-panel,
    #panel-right,
    .dashboard-right-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .week-header-with-nav {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .week-title {
        font-size: 0.95rem !important;
    }

    .week-dates {
        display: block;
        font-size: 0.78rem;
    }

    .dashboard-control-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .calendar-width-control,
    .week-plan-width-control {
        display: none !important;
    }

    .dashboard-control-bar.plan-width-controls .week-plan-width-control {
        display: inline-flex !important;
        width: 100%;
        justify-content: space-between;
    }

    .dashboard-control-bar.plan-width-controls .plan-width-reset-btn {
        width: 100%;
    }

    #weekOverviewCard {
        overflow: visible !important;
    }

    .agenda-slot-content .book-btn,
    .agenda-slot-content a.book-btn {
        min-height: 44px;
        font-size: 0.85rem !important;
    }

    .slot-card {
        font-size: 0.82rem !important;
    }

    .dashboard-notice-ticker {
        font-size: 0.78rem;
    }
}

/* ── Buchung / Formulare ── */
@media (max-width: 1024px) {
    .book-page,
    .book-container,
    .booking-form-wrapper {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .book-grid,
    .booking-grid,
    .form-row-2,
    .form-grid-2 {
        grid-template-columns: 1fr !important;
    }

    .student-row,
    .student-entry-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .modal-overlay {
        padding: 0.5rem !important;
        align-items: flex-end !important;
    }

    .modal-content,
    .qe-modal,
    .qe-overlay .qe-box {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 92dvh;
        overflow-y: auto;
    }

    #quickBookModal,
    #blockModal {
        align-items: flex-end !important;
        padding-top: 0 !important;
    }

    .modal-footer {
        flex-direction: column !important;
        gap: 0.5rem;
    }

    .modal-footer button,
    .modal-footer a,
    .modal-footer .btn {
        width: 100% !important;
    }
}

/* ── Kalender ── */
@media (max-width: 1024px) {
    .calendar-page {
        padding: 0 !important;
        max-width: 100%;
    }

    .calendar-header h2 {
        font-size: 1.2rem !important;
    }

    .calendar-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .calendar-week {
        grid-template-columns: repeat(7, minmax(36px, 1fr)) !important;
        gap: 2px !important;
    }

    .calendar-day {
        min-height: 52px !important;
        padding: 0.25rem !important;
        font-size: 0.72rem !important;
    }
}

/* ── Meine Buchungen / Kurse / Favoriten ── */
@media (max-width: 1024px) {
    .buchungen-list,
    .bookings-grid,
    .rf-grid,
    .rf-room-grid {
        grid-template-columns: 1fr !important;
    }

    .booking-card,
    .buchung-card,
    .rf-card {
        border-radius: 12px !important;
    }

    .meine-buchungen-header,
    .page-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
}

/* ── Posteingang / Nachrichten / Tickets ── */
@media (max-width: 1024px) {
    .inbox-layout,
    .messages-layout,
    .msg-layout,
    .thread-layout {
        flex-direction: column !important;
    }

    .inbox-sidebar,
    .msg-sidebar,
    .messages-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border);
    }

    .ticket-card,
    .inbox-item,
    .msg-list-item {
        padding: 0.85rem !important;
    }

    .ticket-detail-grid,
    .ticket-meta-row {
        flex-direction: column !important;
        gap: 0.5rem;
    }
}

/* ── Laufzettel ── */
@media (max-width: 1024px) {
    .laufzettel-page,
    .lz-page {
        max-width: 100% !important;
        width: 100%;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .laufzettel-page .lz-header-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .laufzettel-page .lz-header-row > div:last-child {
        justify-content: flex-start !important;
    }

    .lz-grid,
    .laufzettel-grid,
    .lz-two-col {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        width: 100%;
        max-width: 100%;
    }

    .laufzettel-grid > *,
    .laufzettel-page .lz-main-col,
    .laufzettel-page .lz-sidebar {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .laufzettel-page .lz-sidebar {
        position: static !important;
        top: auto !important;
        width: 100%;
    }

    /* Verlaufstabelle scrollt intern – darf Seite nicht verbreitern */
    .laufzettel-page .lz-history-card {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    /* Pädagogischer Check – Text vollständig umbrechen */
    .laufzettel-page .lz-ez-info {
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
    }

    .laufzettel-page .lz-ez-info-row {
        min-width: 0;
    }

    .laufzettel-page .lz-ez-info-body {
        min-width: 0 !important;
        flex: 1 1 auto;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .laufzettel-page .lz-ez-info p,
    .laufzettel-page .lz-ez-info ul,
    .laufzettel-page .lz-ez-info li {
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }

    .laufzettel-page .lz-ez-check-btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal !important;
        line-height: 1.35;
    }

    .lz-entry-card,
    .laufzettel-entry {
        padding: 0.85rem !important;
        overflow: visible !important;
    }

    .laufzettel-page .lz-entry-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
    }

    .laufzettel-page .lz-entry-main {
        min-width: 0 !important;
        width: 100%;
    }

    .laufzettel-page .lz-entry-actions {
        width: 100%;
        justify-content: flex-start !important;
        gap: 0.4rem !important;
    }

    .laufzettel-page .lz-entry-actions > form,
    .laufzettel-page .lz-entry-actions > a,
    .laufzettel-page .lz-entry-actions > span,
    .laufzettel-page .lz-entry-actions > div {
        flex: 0 1 auto;
    }

    .laufzettel-page .lz-entry-actions button,
    .laufzettel-page .lz-entry-actions a {
        font-size: 0.78rem !important;
        padding: 0.4rem 0.65rem !important;
    }

    .laufzettel-page .lz-float-panel {
        right: auto !important;
        left: 0 !important;
        max-width: min(100%, calc(100vw - 2.5rem));
        white-space: normal !important;
    }

    .laufzettel-page .lz-history-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0 0 0.5rem;
    }

    .laufzettel-page .lz-delete-row td {
        white-space: normal !important;
    }

    .laufzettel-page .lz-history-table {
        min-width: 640px;
    }

    .laufzettel-page .lz-edit-grid-2,
    .laufzettel-page .lz-edit-grid-dur {
        grid-template-columns: 1fr !important;
    }

    .lz-page {
        padding: 0.15rem 0 3rem !important;
    }

    .lz-form-row {
        flex-direction: column !important;
    }

    /* Meine Laufzettel */
    .lz-page .lz-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .lz-page .lz-room-links {
        width: 100%;
    }

    .lz-page .lz-room-btn {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
    }

    .lz-page .lz-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .lz-page .lz-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .lz-page .lz-filter-group {
        flex-wrap: wrap !important;
        width: 100%;
    }

    .lz-page .lz-role-filter,
    .lz-page .lz-filter-group select {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
    }

    /* Entry cards (Meine Laufzettel partial) */
    .lz-page .lzc,
    .laufzettel-page .lzc {
        padding: 0.85rem 1rem !important;
    }

    .lz-page .lzc-top,
    .laufzettel-page .lzc-top {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    .lz-page .lzc-student,
    .laufzettel-page .lzc-student {
        flex-wrap: wrap;
        font-size: 1rem !important;
    }

    .lz-page .lzc-room,
    .laufzettel-page .lzc-room {
        width: 100%;
        font-size: 0.78rem !important;
    }

    .lz-page .lzc-mid,
    .laufzettel-page .lzc-mid {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }

    .lz-page .lzc-actions,
    .laufzettel-page .lzc-actions {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    /* Pädagogischer Check */
    .lz-check-page .ez-card {
        padding: 1.1rem !important;
        border-radius: 12px !important;
    }

    .lz-check-page .ez-option-btn {
        padding: 0.75rem 0.85rem !important;
        font-size: 0.88rem !important;
    }

    .lz-check-page .ez-btn-row,
    .lz-check-page [style*="display:flex"][style*="justify-content:space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    /* Fehlverhalten-Muster */
    .laufzettel-page .student-row {
        padding: 0.75rem !important;
    }

    .laufzettel-page .severity-bar {
        margin-top: 0.35rem;
    }
}

@media (max-width: 480px) {
    .laufzettel-page h2 {
        font-size: 1.15rem !important;
        line-height: 1.3;
    }

    .laufzettel-page .lz-entry-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

    .laufzettel-page .lz-entry-actions > div[style*="position:relative"] {
        grid-column: 1 / -1;
    }
}

/* ── Admin-Bereich (Raum/Kurse/Benutzer) ── */
@media (max-width: 1024px) {
    .admin-section,
    .admin-page,
    .dashboard.admin-dashboard {
        padding: 0.5rem 0 !important;
        max-width: 100%;
        overflow-x: hidden;
    }

    .admin-header-row,
    .admin-toolbar,
    .admin-actions-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem;
    }

    .admin-card,
    .admin-card-full,
    .admin-panel {
        border-radius: 12px !important;
        overflow: hidden;
    }

    .users-list-row,
    .grid-room-row,
    .room-grid-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem;
        padding: 0.85rem !important;
    }

    .admin-table-wrap,
    .table-responsive,
    .cms-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }

    .admin-rooms-grid,
    .wizard-step-grid,
    .wiz-grid {
        grid-template-columns: 1fr !important;
    }

    .modal-select[size] {
        min-height: 120px;
    }

    /* Universeller Fallback: JEDE Tabelle im Inhaltsbereich wird horizontal
       scrollbar statt die ganze Seite zu verbreitern. Greift auch für Tabellen
       ohne eigenen .table-responsive-Wrapper (admin_classes, manage_slots,
       recurring_blocks, bulk_block …). Der Wochenplan ist hier ausgenommen,
       weil er auf Mobile ohnehin als Agenda gerendert wird (.week-table-wrapper
       ist display:none). display:block + overflow-x macht die Tabelle selbst
       zum Scroll-Container, die Zellen behalten via Anonymous-Table-Box ihr
       Tabellen-Layout. */
    .main-content table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Kurs-Dashboard (Partial) ── */
@media (max-width: 1024px) {
    .course-dash-header,
    .course-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .course-slot-grid,
    .course-students-grid {
        grid-template-columns: 1fr !important;
    }

    .course-enroll-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ── Raumfavoriten / Hilfe / Gruppen ── */
@media (max-width: 1024px) {
    .raumfavoriten-page,
    .hilfe-page,
    .groups-page {
        max-width: 100%;
        padding: 0 !important;
    }

    .help-grid {
        grid-template-columns: 1fr !important;
    }

    .group-card-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Profilseite ── */
@media (max-width: 1024px) {
    .profil-page {
        max-width: 100%;
    }

    .profil-avatar-img,
    .profil-avatar-fallback {
        width: 100px;
        height: 100px;
    }
}

/* ── Login (kleine Screens) ── */
@media (max-width: 480px) {
    .login-card,
    .login-box {
        margin: 0.5rem !important;
        padding: 1.25rem !important;
        width: calc(100% - 1rem) !important;
    }

    .mobile-topbar-name {
        display: none;
    }

    .week-room-tag {
        display: none !important;
    }
}

/* ── Touch: Mindestgrößen ── */
@media (max-width: 1024px) {
    button,
    .btn,
    .sidebar-link,
    .mobile-nav-item,
    .fav-toggle-btn,
    .room-tab,
    select,
    input[type="date"],
    input[type="text"],
    input[type="email"],
    input[type="number"],
    textarea {
        min-height: 44px;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .slot-block-mini {
        opacity: 1 !important;
        min-width: 36px;
        min-height: 36px;
    }
}

/* Safe area für iPhone */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 1024px) {
        .mobile-bottom-nav {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* ===========================================================================
   Sperren-/Schnellbuchungs-Modal: garantiert nutzbar auf JEDER Bildschirmgröße.
   Diese hohen Modals wurden bei ≤480px/≤1024px von !important-Regeln auf eine
   andere Scroll-Strategie umgestellt, sodass die Buttons unten unerreichbar
   waren. Hier wird EINE Strategie erzwungen (höhere Spezifität via #id):
   - Modal-Höhe auf 90% gedeckelt
   - Body scrollt intern (eigene Scrollbar)
   - Footer (Sperren/Freigeben) bleibt immer sichtbar
   =========================================================================== */
#blockModal .modal-content,
#quickBookModal .modal-content {
    max-height: 90vh !important;
    max-height: 90dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#blockModal .modal-body,
#quickBookModal .modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;
    flex: 1 1 auto !important;
}

#blockModal .modal-footer,
#quickBookModal .modal-footer {
    flex-shrink: 0 !important;
}