/**
 * Responsive Optimizations for e-Pociecha
 * Optymalizacje responsywne dla urządzeń mobilnych, tabletów i komputerów
 */

/* ===================================
   CSS Variables for responsive design
   =================================== */
:root {
    --mobile-padding: 1rem;
    --tablet-padding: 1.5rem;
    --desktop-padding: 2rem;
    --card-border-radius: 0.75rem;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

/* ===================================
   Custom responsive utility classes
   =================================== */

/* Responsive image sizes */
.wh-60 {
    width: 60px !important;
    height: 60px !important;
}

.wh-sm-80 {
    width: 60px;
    height: 60px;
}

@media (min-width: 576px) {
    .wh-sm-80 {
        width: 80px !important;
        height: 80px !important;
    }
}

/* Responsive font sizes */
.fs-13 {
    font-size: 0.8125rem;
}

.fs-14 {
    font-size: 0.875rem;
}

.fs-sm-14 {
    font-size: 0.8125rem;
}

.fs-sm-16 {
    font-size: 0.875rem;
}

@media (min-width: 576px) {
    .fs-sm-14 {
        font-size: 0.875rem;
    }

    .fs-sm-16 {
        font-size: 1rem;
    }
}

/* ===================================
   Global responsive utilities
   =================================== */

/* Safe area for mobile devices with notch */
@supports (padding-top: env(safe-area-inset-top)) {
    .main-content {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Touch-friendly tap targets */
@media (pointer: coarse) {
    .btn, button, a.nav-link, .form-check-input, .form-select {
        min-height: 44px;
        min-width: 44px;
    }

    .btn-sm {
        min-height: 36px;
        padding: 0.5rem 1rem;
    }

    .form-check {
        padding-left: 2rem;
    }

    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* ===================================
   Mobile First (< 576px)
   =================================== */
@media (max-width: 575.98px) {
    /* Typography */
    h1, .h1 { font-size: 1.75rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
    h4, .h4 { font-size: 1.125rem; }
    h5, .h5 { font-size: 1rem; }

    /* Container adjustments */
    .container-fluid {
        padding-left: var(--mobile-padding);
        padding-right: var(--mobile-padding);
    }

    .main-content-container {
        padding: 0.5rem;
    }

    /* Cards */
    .card {
        border-radius: var(--card-border-radius);
        margin-bottom: 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    .card-header {
        padding: 0.75rem 1rem;
    }

    /* Module cards - stack vertically */
    .module-card .card {
        margin-bottom: 0.75rem;
    }

    .module-card .d-flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .module-card .flex-shrink-0 {
        margin-bottom: 0.5rem;
    }

    .module-card .wh-80 {
        width: 60px !important;
        height: 60px !important;
    }

    .module-card .card-body .d-flex.align-items-center {
        flex-direction: column;
        gap: 0.5rem;
    }

    .module-card .card-body .btn {
        width: 100%;
        margin-left: 0 !important;
    }

    .module-card .card-body form {
        width: 100%;
        margin-left: 0 !important;
    }

    .module-card .card-body form .btn {
        width: 100%;
    }

    /* Breadcrumbs - horizontal scroll */
    .breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .breadcrumb-item {
        flex-shrink: 0;
    }

    /* Header adjustments */
    .header-area {
        padding: 0.5rem;
    }

    .header-area .row {
        flex-direction: column;
    }

    .right-header-content ul {
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .header-right-item {
        margin: 0 0.25rem;
    }

    /* Tables - horizontal scroll */
    .table-responsive {
        border-radius: var(--card-border-radius);
    }

    .default-table-area {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .default-table-area table {
        min-width: 600px;
    }

    /* Forms */
    .form-control, .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Buttons - full width */
    .d-flex.justify-content-between.mt-4 {
        flex-direction: column;
        gap: 0.5rem;
    }

    .d-flex.justify-content-between.mt-4 .btn,
    .d-flex.justify-content-between.mt-4 form {
        width: 100%;
    }

    .d-flex.justify-content-between.mt-4 form .btn {
        width: 100%;
    }

    /* Modals */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-content {
        border-radius: var(--card-border-radius);
    }

    /* Dropdowns */
    .dropdown-menu {
        width: calc(100vw - 2rem) !important;
        max-width: 400px;
        right: 0 !important;
        left: auto !important;
    }

    /* Calendar */
    .calendar-grid .col {
        padding: 0.125rem;
    }

    .calendar-day {
        font-size: 0.75rem;
        padding: 0.25rem;
        min-height: 40px;
    }

    /* Sidebar - overlay mode */
    .sidebar-area {
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
    }

    .sidebar-area.active {
        transform: translateX(0);
    }

    /* Pagination */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination .page-link {
        padding: 0.5rem 0.75rem;
    }

    /* Custom stats in module card */
    .module-card .custom_stats li {
        font-size: 0.875rem;
    }

    /* Tabs - scroll horizontally */
    .nav-tabs, .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-link, .nav-pills .nav-link {
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
    }

    /* Info boxes */
    .col-md-4.mb-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Contact buttons */
    .btn-group-sm .btn {
        padding: 0.375rem 0.5rem;
    }

    /* Alert boxes */
    .alert {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .alert ul {
        padding-left: 1rem;
        margin-bottom: 0;
    }
}

/* ===================================
   Small tablets (576px - 767px)
   =================================== */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container-fluid {
        padding-left: var(--tablet-padding);
        padding-right: var(--tablet-padding);
    }

    .main-content-container {
        padding: 1rem;
    }

    /* Module cards - 2 columns */
    .module-card {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .module-card .wh-80 {
        width: 70px !important;
        height: 70px !important;
    }

    /* Info boxes - 2 columns */
    .col-md-4.mb-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Tables */
    .default-table-area table {
        min-width: 500px;
    }

    /* Cards */
    .card-body {
        padding: 1.25rem;
    }

    /* Calendar */
    .calendar-day {
        font-size: 0.875rem;
        min-height: 50px;
    }
}

/* ===================================
   Tablets (768px - 991px)
   =================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container-fluid {
        padding-left: var(--tablet-padding);
        padding-right: var(--tablet-padding);
    }

    /* Module cards - 2-3 columns */
    .module-card {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Info boxes - 3 columns */
    .col-md-4.mb-3 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    /* Sidebar - slide mode */
    .sidebar-area {
        width: 250px;
    }

    /* Header adjustments */
    .header-area .col-lg-4,
    .header-area .col-lg-8 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Tables - show more columns */
    .default-table-area table {
        min-width: auto;
    }

    /* Calendar */
    .calendar-day {
        min-height: 60px;
    }
}

/* ===================================
   Small desktops (992px - 1199px)
   =================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .container-fluid {
        padding-left: var(--desktop-padding);
        padding-right: var(--desktop-padding);
    }

    /* Module cards - 3 columns */
    .module-card {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    /* Sidebar - fixed */
    .sidebar-area {
        width: 280px;
    }
}

/* ===================================
   Large desktops (1200px+)
   =================================== */
@media (min-width: 1200px) {
    /* Module cards - 4 columns */
    .module-card {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .container-fluid {
        padding-left: var(--desktop-padding);
        padding-right: var(--desktop-padding);
    }

    /* Calendar - full size */
    .calendar-day {
        min-height: 80px;
    }
}

/* ===================================
   Extra large desktops (1400px+)
   =================================== */
@media (min-width: 1400px) {
    .container-fluid {
        max-width: 1600px;
        margin: 0 auto;
    }
}

/* ===================================
   Print styles
   =================================== */
@media print {
    .sidebar-area,
    .header-area,
    .footer-area,
    .btn,
    .modal,
    .dropdown-menu,
    .no-print {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .card {
        border: 1px solid #dee2e6 !important;
        box-shadow: none !important;
    }

    .table {
        border-collapse: collapse !important;
    }

    .table td, .table th {
        background-color: #fff !important;
        border: 1px solid #dee2e6 !important;
    }
}

/* ===================================
   Dark mode responsive adjustments
   =================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --card-bg: #1e1e1e;
        --text-color: #e0e0e0;
        --border-color: #333;
    }
}

/* ===================================
   Landscape orientation fixes
   =================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .modal-dialog {
        max-height: 90vh;
    }

    .modal-body {
        max-height: 60vh;
        overflow-y: auto;
    }

    .sidebar-area {
        height: 100vh;
        overflow-y: auto;
    }
}

/* ===================================
   Accessibility - reduced motion
   =================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===================================
   High contrast mode
   =================================== */
@media (prefers-contrast: high) {
    .btn {
        border-width: 2px;
    }

    .card {
        border: 2px solid currentColor;
    }

    .badge {
        border: 1px solid currentColor;
    }
}

/* ===================================
   Component-specific responsive fixes
   =================================== */

/* Notification dropdown */
@media (max-width: 767.98px) {
    .notifications .dropdown-menu {
        position: fixed !important;
        top: 60px !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
        max-height: 70vh;
        overflow-y: auto;
    }

    .notification-list {
        max-height: 50vh;
    }
}

/* Data tables responsive */
@media (max-width: 991.98px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
        margin-top: 0.5rem;
    }
}

/* Wyzywienie calendar */
@media (max-width: 767.98px) {
    #calendarGrid .day-cell {
        min-height: 60px;
        font-size: 0.75rem;
    }

    #calendarGrid .meal-indicator {
        font-size: 0.65rem;
        padding: 0.125rem 0.25rem;
    }
}

/* Children show page */
@media (max-width: 767.98px) {
    .dzieci-show .card-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .dzieci-show .card-header .d-flex.gap-2 {
        width: 100%;
        justify-content: space-between;
    }

    .dzieci-show .card-header .btn {
        flex: 1;
    }
}

/* Messages page */
@media (max-width: 991.98px) {
    .messages-container {
        flex-direction: column;
    }

    .messages-sidebar {
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color, #dee2e6);
    }

    .messages-content {
        width: 100%;
    }
}

/* Attendance view */
@media (max-width: 767.98px) {
    .attendance-grid .child-card {
        flex: 0 0 100%;
    }

    .attendance-stats {
        flex-direction: column;
        gap: 0.5rem;
    }

    .attendance-stats .stat-item {
        width: 100%;
        text-align: center;
    }
}

/* Payment forms */
@media (max-width: 575.98px) {
    .payment-summary {
        flex-direction: column;
    }

    .payment-summary .summary-item {
        width: 100%;
        border-bottom: 1px solid #dee2e6;
        padding: 0.5rem 0;
    }
}

/* Settings page */
@media (max-width: 767.98px) {
    .settings-tabs {
        flex-direction: column;
    }

    .settings-tabs .nav-link {
        width: 100%;
        text-align: left;
    }

    .settings-content {
        padding: 1rem;
    }
}

/* Fix for iOS input zoom */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    input[type="tel"] {
        font-size: 16px;
    }
}

/* Sticky elements adjustments */
@media (max-width: 991.98px) {
    .sticky-top {
        position: relative;
        top: auto;
    }
}

/* Fix Bootstrap grid for module cards */
@media (max-width: 575.98px) {
    .col-xxl-3.col-lg-4.col-sm-6.module-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .col-xxl-3.col-lg-4.col-sm-6.module-card {
        flex: 0 0 50%;
        max-width: 50%;
    }
}