/**
 * Responsive Design System v1.0
 * Zentrale responsive Styles für alle Bereiche
 * (Admin, Member, Frontend)
 */

/* =====================================================
   CSS VARIABLES - Responsive Breakpoints
   ===================================================== */
:root {
    /* Breakpoints (für JavaScript-Zugriff) */
    --bp-xs: 480px;
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1400px;
    
    /* Touch-freundliche Mindestgrößen */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
    
    /* Abstände - Mobile First */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
}

/* =====================================================
   BASE - Mobile First Defaults
   ===================================================== */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Touch-freundliche interaktive Elemente */
button,
[type="button"],
[type="submit"],
[type="reset"],
a.btn,
.btn,
.item-action,
.quick-action-btn,
.nav-item {
    min-height: var(--touch-target-min);
    touch-action: manipulation;
}

/* Verhindert Text-Auswahl bei schnellem Tippen */
button,
.btn,
.nav-item {
    -webkit-user-select: none;
    user-select: none;
}

/* =====================================================
   TYPOGRAPHY - Responsive Schriftgrößen
   ===================================================== */
h1, .h1 { font-size: clamp(1.25rem, 4vw, 1.75rem); }
h2, .h2 { font-size: clamp(1.1rem, 3.5vw, 1.5rem); }
h3, .h3 { font-size: clamp(1rem, 3vw, 1.25rem); }
h4, .h4 { font-size: clamp(0.95rem, 2.5vw, 1.1rem); }

/* =====================================================
   HEADER - Responsive
   ===================================================== */
.work-hours-header,
.page-header,
.cashbook-header,
.fees-header,
.booking-header,
.gallery-hero,
.section-header {
    padding: 1.25rem 1rem !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: 1rem !important;
}

.work-hours-header h1,
.page-header h1,
.section-header h1 {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

.work-hours-header h1 i,
.page-header h1 i,
.section-header h1 i {
    font-size: 1.15rem !important;
}

.work-hours-header p,
.page-header p,
.section-header p {
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
    opacity: 0.9 !important;
}

/* =====================================================
   STAT CARDS - Responsive Grid
   ===================================================== */
.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    margin-bottom: 1.25rem !important;
}

.stat-card {
    padding: 0.875rem 1rem !important;
    border-radius: var(--radius-md) !important;
}

.stat-card .stat-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: var(--radius-sm) !important;
}

.stat-card .stat-icon svg,
.stat-card .stat-icon i {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
}

.stat-value {
    font-size: 1.25rem !important;
}

.stat-label {
    font-size: 0.75rem !important;
}

/* =====================================================
   CARDS - Responsive
   ===================================================== */
.admin-card,
.content-card,
.pending-list,
.members-card {
    border-radius: var(--radius-md) !important;
    margin-bottom: 1rem !important;
}

.pending-list-header,
.card-header {
    padding: 0.875rem 1rem !important;
}

.pending-list-header h3,
.card-header h3 {
    font-size: 0.9rem !important;
}

/* =====================================================
   DETAIL ROWS - Responsive (Stack auf Mobile)
   ===================================================== */
.detail-row {
    display: flex !important;
    flex-direction: column !important;
    padding: 0.75rem 1rem !important;
    gap: 0.25rem !important;
}

.detail-label {
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.detail-value {
    font-size: 0.9rem !important;
    word-break: break-word !important;
}

/* =====================================================
   BUTTONS - Touch-freundlich
   ===================================================== */
.btn,
.item-action,
.quick-action-btn,
.btn-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    min-height: var(--touch-target-min) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.quick-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
}

.quick-action-btn {
    flex: 1 1 auto !important;
    min-width: 140px !important;
    text-align: center !important;
}

/* Action Buttons in Listen */
.item-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
}

.item-action {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
}

/* =====================================================
   FORMS - Responsive
   ===================================================== */
.form-group {
    margin-bottom: 1rem !important;
}

.form-label {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.4rem !important;
    display: block !important;
}

.form-control,
.form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    min-height: var(--touch-target-min);
    font-size: 16px; /* Verhindert iOS Zoom */
    border-radius: var(--radius-sm);
    box-sizing: border-box;
}

.form-control:focus,
.form-input:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--color-primary, #2C5F78) !important;
    box-shadow: 0 0 0 3px rgba(44, 95, 120, 0.15) !important;
}

/* Form Grid */
.form-row,
.form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
}

/* =====================================================
   TABLES - Responsive (Horizontal Scroll + Cards)
   ===================================================== */
.table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 1rem !important;
}

.admin-table,
.members-table,
table {
    width: 100% !important;
    min-width: 600px !important;
}

.admin-table th,
.members-table th,
table th {
    padding: 0.65rem 0.75rem !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
}

.admin-table td,
.members-table td,
table td {
    padding: 0.65rem 0.75rem !important;
    font-size: 0.85rem !important;
}

/* =====================================================
   LISTS - Responsive
   ===================================================== */
.pending-item,
.list-item {
    padding: 0.875rem 1rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
}

.pending-item .item-icon,
.list-item .item-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: var(--radius-sm) !important;
    flex-shrink: 0 !important;
}

.pending-item .item-info,
.list-item .item-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.pending-item .item-title,
.list-item .item-title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    word-break: break-word !important;
}

.pending-item .item-meta,
.list-item .item-meta {
    font-size: 0.8rem !important;
    color: #64748b !important;
    margin-top: 0.2rem !important;
}

.pending-item .item-badge,
.list-item .item-badge {
    order: 0 !important;
}

.pending-item .item-actions,
.list-item .item-actions {
    width: 100% !important;
    margin-top: 0.5rem !important;
}

/* =====================================================
   MODAL - Responsive
   ===================================================== */
.modal-content,
.modal-dialog {
    margin: 0.5rem !important;
    max-height: calc(100vh - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important;
    border-radius: var(--radius-lg) !important;
}

.modal-header,
.modal-footer {
    padding: 1rem !important;
}

.modal-body {
    padding: 1rem !important;
    max-height: 60vh !important;
    max-height: 60dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* =====================================================
   PAGINATION - Responsive
   ===================================================== */
.pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    padding: 1rem !important;
}

.pagination a,
.pagination span,
.pagination .page-item {
    min-width: var(--touch-target-min) !important;
    min-height: var(--touch-target-min) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.85rem !important;
}

/* =====================================================
   NAVIGATION - Responsive
   ===================================================== */
.back-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 0 !important;
    font-size: 0.8rem !important;
    min-height: var(--touch-target-min) !important;
}

/* =====================================================
   BADGES - Consistent Size
   ===================================================== */
.item-badge,
.status-badge,
.member-badge,
.role-badge,
.badge {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.75rem !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* =====================================================
   GRID LAYOUTS - Responsive
   ===================================================== */
.detail-grid,
.content-grid,
.two-column-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
}

.three-column-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
}

/* =====================================================
   EMPTY STATE
   ===================================================== */
.empty-state {
    padding: 2.5rem 1.5rem !important;
    text-align: center !important;
}

.empty-state i {
    font-size: 2.5rem !important;
    margin-bottom: 0.75rem !important;
    display: block !important;
    color: #cbd5e1 !important;
}

.empty-state h4 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
}

.empty-state p {
    font-size: 0.875rem !important;
    color: #64748b !important;
}

/* =====================================================
   CALENDAR - Responsive
   ===================================================== */
.calendar-grid,
.fc-daygrid {
    font-size: 0.8rem !important;
}

.calendar-day,
.fc-daygrid-day {
    min-height: 60px !important;
}

/* =====================================================
   ALERTS - Responsive
   ===================================================== */
.alert {
    padding: 0.875rem 1rem !important;
    border-radius: var(--radius-sm) !important;
    margin-bottom: 1rem !important;
    font-size: 0.875rem !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
}

.alert i {
    flex-shrink: 0 !important;
    margin-top: 0.1rem !important;
}

/* =====================================================
   TABLET BREAKPOINT (768px+)
   ===================================================== */
@media (min-width: 768px) {
    body {
        font-size: 16px;
    }
    
    /* Header */
    .work-hours-header,
    .page-header,
    .section-header {
        padding: 1.5rem 1.75rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .work-hours-header h1,
    .page-header h1 {
        font-size: 1.5rem !important;
    }
    
    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 1rem !important;
    }
    
    .stat-card {
        padding: 1rem 1.25rem !important;
    }
    
    .stat-value {
        font-size: 1.4rem !important;
    }
    
    /* Detail Rows - Horizontal */
    .detail-row {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }
    
    .detail-label {
        width: 120px !important;
        flex-shrink: 0 !important;
    }
    
    .detail-value {
        flex: 1 !important;
    }
    
    /* Grids */
    .detail-grid,
    .two-column-grid {
        grid-template-columns: 1fr 320px !important;
        gap: 1.5rem !important;
    }
    
    .three-column-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Forms */
    .form-row,
    .form-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .form-row.three-col {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Lists */
    .pending-item .item-badge,
    .list-item .item-badge {
        order: unset !important;
    }
    
    .pending-item .item-actions,
    .list-item .item-actions {
        width: auto !important;
        margin-top: 0 !important;
    }
    
    /* Quick Actions */
    .quick-action-btn {
        flex: 0 1 auto !important;
        min-width: auto !important;
    }
    
    /* Tables */
    .admin-table th,
    .members-table th {
        font-size: 0.75rem !important;
        padding: 0.75rem 1rem !important;
    }
    
    .admin-table td,
    .members-table td {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* =====================================================
   DESKTOP BREAKPOINT (992px+)
   ===================================================== */
@media (min-width: 992px) {
    /* Header */
    .work-hours-header,
    .page-header,
    .section-header {
        padding: 1.75rem 2rem !important;
    }
    
    .work-hours-header h1,
    .page-header h1 {
        font-size: 1.65rem !important;
    }
    
    /* Stats */
    .stat-card .stat-icon {
        width: 48px !important;
        height: 48px !important;
    }
    
    .stat-value {
        font-size: 1.5rem !important;
    }
    
    /* Grids */
    .detail-grid,
    .two-column-grid {
        grid-template-columns: 1fr 360px !important;
    }
    
    .three-column-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Hover-Effekte */
    .pending-item:hover,
    .list-item:hover {
        background: #f8fafc !important;
    }
    
    .btn:hover,
    .item-action:hover,
    .quick-action-btn:hover {
        transform: translateY(-1px) !important;
    }
    
    /* Calendar */
    .calendar-day,
    .fc-daygrid-day {
        min-height: 80px !important;
    }
}

/* =====================================================
   LARGE DESKTOP (1200px+)
   ===================================================== */
@media (min-width: 1200px) {
    .work-hours-header,
    .page-header,
    .section-header {
        padding: 2rem 2.5rem !important;
    }
    
    .work-hours-header h1,
    .page-header h1 {
        font-size: 1.75rem !important;
    }
    
    .detail-grid,
    .two-column-grid {
        grid-template-columns: 2fr 1fr !important;
        max-width: 1400px !important;
    }
}

/* =====================================================
   EXTRA SMALL (max 480px)
   ===================================================== */
@media (max-width: 480px) {
    /* Header kompakter */
    .work-hours-header,
    .page-header,
    .section-header {
        padding: 1rem !important;
        border-radius: var(--radius-md) !important;
    }
    
    .work-hours-header h1,
    .page-header h1 {
        font-size: 1.15rem !important;
    }
    
    /* Stats - 1 Spalte */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    
    .stat-card {
        padding: 0.75rem !important;
    }
    
    .stat-value {
        font-size: 1.15rem !important;
    }
    
    /* Cards */
    .admin-card,
    .pending-list,
    .content-card {
        border-radius: var(--radius-sm) !important;
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        border-radius: 0 !important;
    }
    
    /* Buttons volle Breite */
    .quick-actions {
        flex-direction: column !important;
    }
    
    .quick-action-btn {
        width: 100% !important;
    }
    
    /* Listen kompakter */
    .pending-item,
    .list-item {
        padding: 0.75rem !important;
    }
    
    .pending-item .item-icon,
    .list-item .item-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }
    
    .pending-item .item-title,
    .list-item .item-title {
        font-size: 0.85rem !important;
    }
    
    /* Modals */
    .modal-content {
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        height: 100% !important;
    }
    
    /* Action Buttons Stack */
    .item-actions {
        flex-direction: column !important;
    }
    
    .item-action {
        width: 100% !important;
    }
}

/* =====================================================
   TOUCH DEVICE OPTIMIZATIONS
   ===================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Größere Touch-Targets */
    .btn,
    .item-action,
    .quick-action-btn,
    .btn-action {
        min-height: var(--touch-target-comfortable) !important;
    }
    
    /* Active statt Hover */
    .btn:active,
    .item-action:active,
    .quick-action-btn:active {
        transform: scale(0.98) !important;
        opacity: 0.9 !important;
    }
    
    /* Kein Hover-Effekt */
    .pending-item:hover,
    .list-item:hover {
        background: transparent !important;
    }
    
    .pending-item:active,
    .list-item:active {
        background: #f1f5f9 !important;
    }
}

/* =====================================================
   SAFE AREA (iPhone Notch/Home Indicator)
   ===================================================== */
@supports (padding: env(safe-area-inset-bottom)) {
    .admin-content,
    .member-content,
    main {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    }
    
    .modal-footer,
    .action-buttons {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    }
    
    .sidebar {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

/* =====================================================
   REDUCED MOTION (Accessibility)
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .btn:hover,
    .item-action:hover {
        transform: none !important;
    }
}

/* =====================================================
   PRINT STYLES
   ===================================================== */
@media print {
    .sidebar,
    .admin-header,
    .header-right,
    .quick-actions,
    .item-actions,
    .btn,
    .action-buttons,
    .pagination {
        display: none !important;
    }
    
    .admin-content,
    .member-content,
    main {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .admin-card,
    .pending-list,
    .content-card {
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
    }
}

/* =====================================================
   LANDSCAPE MOBILE
   ===================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .modal-body {
        max-height: 50vh !important;
    }
    
    .work-hours-header,
    .page-header {
        padding: 1rem !important;
    }
    
    .work-hours-header h1,
    .page-header h1 {
        font-size: 1.2rem !important;
    }
}

/* =====================================================
   HIGH CONTRAST MODE (Accessibility)
   ===================================================== */
@media (prefers-contrast: high) {
    .btn,
    .item-action,
    .quick-action-btn {
        border: 2px solid currentColor !important;
    }
    
    .admin-card,
    .pending-list,
    .content-card {
        border: 2px solid #1e293b !important;
    }
}

/* =====================================================
   DARK MODE PREPARATION (für spätere Verwendung)
   ===================================================== */
@media (prefers-color-scheme: dark) {
    /* Placeholder für Dark Mode Styles */
}

/* =====================================================
   OVERRIDE SECTION - Überschreibt View-spezifische Styles
   Diese Regeln haben höhere Spezifität durch !important
   ===================================================== */

/* ===== STATS GRID - Responsive Override ===== */
@media (max-width: 991px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 575px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .stat-card {
        padding: 0.875rem !important;
    }
    
    .stat-card .stat-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        font-size: 1rem !important;
    }
    
    .stat-card .stat-value {
        font-size: 1.25rem !important;
    }
}

/* ===== QUICK ACTIONS - Responsive Override ===== */
@media (max-width: 767px) {
    .quick-actions {
        flex-direction: column !important;
    }
    
    .quick-actions .quick-action-btn,
    .quick-actions a,
    .quick-actions button {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ===== FILTER ROW - Responsive Override ===== */
@media (max-width: 767px) {
    .filter-row,
    .filters,
    .toolbar {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .filter-row > *,
    .filters > *,
    .toolbar > * {
        width: 100% !important;
    }
    
    .filter-row select,
    .filters select,
    .toolbar select {
        width: 100% !important;
    }
}

/* ===== TABLE - Responsive Override ===== */
@media (max-width: 991px) {
    .table-responsive,
    .table-scroll,
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    table,
    .admin-table,
    .members-table,
    .data-table {
        min-width: 700px !important;
    }
}

@media (max-width: 575px) {
    table th,
    table td,
    .admin-table th,
    .admin-table td {
        padding: 0.5rem 0.625rem !important;
        font-size: 0.8rem !important;
    }
}

/* ===== PENDING ITEMS - Responsive Override ===== */
@media (max-width: 767px) {
    .pending-item {
        flex-wrap: wrap !important;
        padding: 0.875rem 1rem !important;
    }
    
    .pending-item .item-info {
        flex: 1 1 calc(100% - 60px) !important;
        min-width: 0 !important;
    }
    
    .pending-item .item-badge {
        order: 3 !important;
        margin-top: 0.5rem !important;
    }
    
    .pending-item .item-actions {
        order: 4 !important;
        width: 100% !important;
        margin-top: 0.75rem !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .pending-item .item-actions .item-action {
        flex: 1 1 auto !important;
        justify-content: center !important;
        min-width: 100px !important;
    }
}

/* ===== FORMS - Responsive Override ===== */
@media (max-width: 767px) {
    .form-row,
    .form-grid,
    .form-columns {
        display: block !important;
    }
    
    .form-row > *,
    .form-grid > *,
    .form-columns > * {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    select,
    textarea {
        width: 100% !important;
        font-size: 16px !important; /* Prevents iOS zoom */
    }
}

/* ===== MODAL - Responsive Override ===== */
@media (max-width: 575px) {
    .modal-dialog,
    .modal-content,
    .modal {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }
    
    .modal-body {
        max-height: calc(100vh - 140px) !important;
        max-height: calc(100dvh - 140px) !important;
        overflow-y: auto !important;
    }
}

/* ===== CALENDAR - Responsive Override ===== */
@media (max-width: 767px) {
    .calendar-grid,
    .fc-view,
    .fc-daygrid {
        font-size: 0.75rem !important;
    }
    
    .calendar-day,
    .fc-daygrid-day {
        min-height: 50px !important;
        padding: 0.25rem !important;
    }
    
    .fc-toolbar {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .fc-toolbar-chunk {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ===== CARDS GRID - Responsive Override ===== */
@media (max-width: 991px) {
    .cards-grid,
    .albums-grid,
    .news-grid,
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 575px) {
    .cards-grid,
    .albums-grid,
    .news-grid,
    .gallery-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== TWO COLUMN LAYOUTS - Responsive Override ===== */
@media (max-width: 991px) {
    .two-columns,
    .sidebar-layout,
    .content-sidebar {
        display: block !important;
    }
    
    .two-columns > *,
    .sidebar-layout > *,
    .content-sidebar > * {
        width: 100% !important;
        margin-bottom: 1.5rem !important;
    }
}

/* ===== ACTION BUTTONS - Touch Friendly Override ===== */
@media (max-width: 767px) {
    .btn-group,
    .action-buttons,
    .button-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .btn-group > *,
    .action-buttons > *,
    .button-row > * {
        flex: 1 1 auto !important;
        min-height: 44px !important;
    }
}

/* ===== HEADER - Responsive Override ===== */
@media (max-width: 767px) {
    .work-hours-header,
    .page-header,
    .section-header,
    .booking-header,
    .fees-header,
    .cashbook-header {
        padding: 1.25rem 1rem !important;
        border-radius: 12px !important;
    }
    
    .work-hours-header h1,
    .page-header h1,
    .section-header h1 {
        font-size: 1.25rem !important;
    }
    
    .work-hours-header p,
    .page-header p,
    .section-header p {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 575px) {
    .work-hours-header,
    .page-header,
    .section-header {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .work-hours-header h1,
    .page-header h1 {
        font-size: 1.15rem !important;
    }
}

/* ===== LISTS & CARDS - Responsive Override ===== */
@media (max-width: 575px) {
    .pending-list,
    .admin-card,
    .content-card,
    .members-card {
        border-radius: 8px !important;
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }
    
    .pending-list-header,
    .card-header {
        padding: 0.75rem !important;
    }
    
    .pending-list-header h3,
    .card-header h3 {
        font-size: 0.9rem !important;
    }
}

/* ===== PAGINATION - Responsive Override ===== */
@media (max-width: 575px) {
    .pagination {
        gap: 0.25rem !important;
    }
    
    .pagination a,
    .pagination span,
    .page-link {
        padding: 0.5rem 0.625rem !important;
        font-size: 0.8rem !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }
}

/* ===== IMAGES - Responsive Override ===== */
img {
    max-width: 100% !important;
    height: auto !important;
}

.gallery-image,
.album-cover,
.news-image {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* ===== ICONS IN HEADERS - Responsive Override ===== */
@media (max-width: 575px) {
    .work-hours-header h1 i,
    .page-header h1 i,
    .section-header h1 i {
        font-size: 1rem !important;
    }
    
    .stat-card .stat-icon i,
    .stat-card .stat-icon svg {
        font-size: 1rem !important;
        width: 18px !important;
        height: 18px !important;
    }
}

/* ===== SEARCH BOX - Responsive Override ===== */
@media (max-width: 767px) {
    .search-box,
    .search-form,
    .search-wrapper {
        width: 100% !important;
    }
    
    .search-box input,
    .search-form input {
        width: 100% !important;
    }
}

/* ===== TABS - Responsive Override ===== */
@media (max-width: 767px) {
    .tabs,
    .tab-list,
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    
    .tabs::-webkit-scrollbar,
    .tab-list::-webkit-scrollbar,
    .nav-tabs::-webkit-scrollbar {
        display: none !important;
    }
    
    .tab,
    .tab-item,
    .nav-tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
}

/* ===== DROPDOWN - Responsive Override ===== */
@media (max-width: 575px) {
    .dropdown-menu {
        position: fixed !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
        max-width: calc(100vw - 1rem) !important;
    }
}

/* ===== BADGES IN LISTS - Responsive Override ===== */
@media (max-width: 575px) {
    .item-badge,
    .status-badge,
    .badge {
        font-size: 0.7rem !important;
        padding: 0.2rem 0.4rem !important;
    }
}

/* ===== TEXT UTILITIES - Responsive Override ===== */
@media (max-width: 575px) {
    .text-truncate,
    .truncate {
        max-width: 150px !important;
    }
    
    .item-title {
        font-size: 0.875rem !important;
    }
    
    .item-meta {
        font-size: 0.75rem !important;
    }
}

/* ===== FOOTER - Responsive Override ===== */
@media (max-width: 767px) {
    .admin-footer,
    footer {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.5rem !important;
        padding: 1rem !important;
    }
}

/* =====================================================
   FRONTEND TYPOGRAPHY - Responsive
   Fonts: Inter (Body), Montserrat (Headings), Playfair (Hero)
   Colors: #F6F1E8 (Text), #0C1A21 (Overlay), #D9B26B/#6FA7A0 (Accents)
   ===================================================== */

/* ── Desktop defaults (>1024px) ── */
@media (min-width: 1025px) {
    .hero-tagline { font-size: clamp(0.85rem, 1.2vw, 1rem) !important; }
    .hero-title, .hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.5rem) !important; }
    .hero-text { font-size: clamp(1rem, 1.5vw, 1.15rem) !important; }
    .section-header h2 { font-size: clamp(1.5rem, 2.5vw, 2rem) !important; }
    .section-header p { font-size: 1.05rem !important; }
    .feature-card h3 { font-size: 1.15rem !important; }
    .feature-card p { font-size: 0.95rem !important; line-height: 1.6 !important; }
}

/* ── Tablet (769px - 1024px) ── */
@media (max-width: 1024px) {
    /* Nav */
    .nav-main a {
        padding: 0.45rem 0.9rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Hero */
    .hero-tagline {
        font-size: 0.8rem !important;
        letter-spacing: 0.15em !important;
    }
    .hero-title, .hero h1 {
        font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
    }
    .hero-text {
        font-size: 1rem !important;
        max-width: 600px !important;
    }
    
    /* Sections */
    .section-header h2 { font-size: 1.5rem !important; }
    .section-header p { font-size: 0.95rem !important; }
    
    /* Cards */
    .feature-card h3 { font-size: 1.05rem !important; }
    .feature-card p { font-size: 0.9rem !important; line-height: 1.6 !important; }
    
    /* Subpage Heroes */
    .about-hero h1,
    .gallery-hero h1,
    .news-hero h1,
    .contact-hero h1,
    .imprint-hero h1,
    .privacy-hero h1,
    .newsletter-hero h1 {
        font-size: 1.6rem !important;
    }
    .about-hero p,
    .gallery-hero p,
    .news-hero p,
    .contact-hero p {
        font-size: 0.95rem !important;
    }
}

/* ── Mobile (max-width: 768px) ── */
@media (max-width: 768px) {
    /* Body */
    body {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
    
    /* Hero */
    .hero { min-height: 55vh !important; }
    
    .hero-tagline {
        font-size: 0.65rem !important;
        letter-spacing: 0.12em !important;
        white-space: nowrap !important;
        font-family: 'Montserrat', sans-serif !important;
        text-transform: uppercase !important;
        color: rgba(246, 241, 232, 0.85) !important;
        text-shadow: 0 2px 6px rgba(0,0,0,0.5) !important;
    }
    
    .hero-title, .hero h1 {
        font-size: 1.5rem !important;
        white-space: nowrap !important;
        font-family: 'Playfair Display', serif !important;
        color: #F6F1E8 !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
        font-weight: 700 !important;
    }
    
    .hero-text {
        font-size: 0.88rem !important;
        line-height: 1.6 !important;
        font-family: 'Inter', sans-serif !important;
        color: rgba(246, 241, 232, 0.8) !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
        max-width: 90% !important;
    }
    
    .hero-logo-section { min-height: 130px !important; margin: 1rem 0 !important; }
    .hero-logo-img { max-width: 150px !important; }
    
    /* Nav Pills */
    .nav-main a {
        padding: 0.35rem 0.65rem !important;
        font-size: 0.8rem !important;
        border-radius: 999px !important;
        color: #F6F1E8 !important;
    }
    
    /* Section Headers */
    .section-header h2 {
        font-size: 1.25rem !important;
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
    }
    .section-header p {
        font-size: 0.88rem !important;
        font-family: 'Inter', sans-serif !important;
    }
    
    /* Page Headings */
    h1:not(.hero-title) { font-size: 1.4rem !important; }
    h2:not(.section-header h2) { font-size: 1.15rem !important; }
    h3 { font-size: 1rem !important; }
    
    /* Feature Cards */
    .feature-card h3, .feature-card h4 {
        font-size: 1rem !important;
        font-family: 'Montserrat', sans-serif !important;
    }
    .feature-card p {
        font-size: 0.85rem !important;
        font-family: 'Inter', sans-serif !important;
        line-height: 1.55 !important;
    }
    .feature-icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 1.5rem !important;
    }
    
    /* Subpage Heroes */
    .about-hero h1, .gallery-hero h1, .news-hero h1,
    .contact-hero h1, .imprint-hero h1, .privacy-hero h1,
    .newsletter-hero h1 {
        font-size: 1.3rem !important;
    }
    .about-hero p, .gallery-hero p, .news-hero p, .contact-hero p {
        font-size: 0.85rem !important;
    }
    
    /* Brand */
    .brand-text h1 {
        font-size: 0.75rem !important;
        font-family: 'Montserrat', sans-serif !important;
    }
    
    /* Buttons */
    .btn {
        font-size: 0.85rem !important;
        padding: 0.6rem 1.2rem !important;
        font-family: 'Montserrat', sans-serif !important;
    }
    
    /* Footer */
    .site-footer { font-size: 0.85rem !important; font-family: 'Inter', sans-serif !important; }
    
    /* Forms on frontend */
    .form-group label { font-size: 0.88rem !important; }
    .form-group input, .form-group textarea, .form-group select {
        font-size: 0.9rem !important;
    }
}

/* ── Small Mobile (max-width: 480px) ── */
@media (max-width: 480px) {
    .hero-title, .hero h1 {
        font-size: 1.15rem !important;
        white-space: nowrap !important;
    }
    .hero-tagline {
        font-size: 0.55rem !important;
        letter-spacing: 0.08em !important;
    }
    .hero-text { font-size: 0.82rem !important; }
    .hero-logo-section { min-height: 100px !important; }
    .hero-logo-img { max-width: 120px !important; }
    
    .section-header h2 { font-size: 1.1rem !important; }
    .section-header p { font-size: 0.82rem !important; }
    
    .feature-card h3 { font-size: 0.95rem !important; }
    .feature-card p { font-size: 0.8rem !important; }
    .feature-icon { width: 48px !important; height: 48px !important; font-size: 1.3rem !important; }
    
    .nav-main a { padding: 0.3rem 0.5rem !important; font-size: 0.75rem !important; }
    
    .about-hero h1, .gallery-hero h1, .news-hero h1,
    .contact-hero h1, .imprint-hero h1, .privacy-hero h1 {
        font-size: 1.1rem !important;
    }
    
    .btn { font-size: 0.8rem !important; padding: 0.5rem 1rem !important; }
}