/* Foot Academy Responsive Styles
 * Handles: DataTables, AlpineJS, mobile tables, cards, print, Select2, column filters
 */

/* ── AlpineJS ── */
[x-cloak] { display: none !important; }
[x-collapse] { overflow: hidden; }

/* ── Responsive Table Containers ── */
.table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.5rem;
}
.table-scroll > table {
    min-width: 100%;
    margin-bottom: 0;
}

/* ── Base Table Styles ── */
main table { max-width: 100%; }
main table th, main table td { white-space: nowrap; }
main table th:first-child, main table td:first-child { white-space: normal; }

/* ── DataTables ── */
table.dataTable { border-collapse: collapse !important; }
table.dataTable thead th {
    background: #f0fdf4 !important;
    color: #166534 !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 2px solid #dcfce7 !important;
    padding: 0.75rem 1rem !important;
    white-space: nowrap;
}
table.dataTable tbody td {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 0.875rem !important;
    color: #334155 !important;
}
table.dataTable tbody td:first-child { white-space: normal; }
table.dataTable tbody tr:hover { background-color: #f0fdf4 !important; }
table.dataTable tbody tr:nth-child(even) { background-color: #fafbfc; }

/* DataTables controls */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #43A047;
    box-shadow: 0 0 0 3px rgba(67,160,71,0.1);
}
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 0.375rem !important;
    border: 1px solid #e2e8f0 !important;
    margin: 0 0.125rem !important;
    padding: 0.35rem 0.75rem !important;
    font-size: 0.875rem !important;
    transition: all 0.15s !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f0fdf4 !important;
    border-color: #43A047 !important;
    color: #166534 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #43A047 !important;
    border-color: #43A047 !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_info {
    font-size: 0.8rem;
    color: #94a3b8;
    padding-top: 0.75rem;
}

/* ── Column Filters Row ── */
tr.fa-colfilters { background: #f8fafc !important; }
tr.fa-colfilters th { border-bottom: 1px solid #e2e8f0 !important; padding: 6px 8px !important; }
tr.fa-colfilters select {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 4px 8px;
    font-size: 0.75rem;
    background: #fff;
    width: 100%;
    cursor: pointer;
}
tr.fa-colfilters select:focus {
    border-color: #43A047;
    outline: none;
}

/* ── Select2 brand-green theming ── */
.select2-container .select2-selection--single {
    height: 2.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.5rem;
    padding-left: 0.75rem;
    color: #374151;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 2.5rem; }
.select2-container--default .select2-selection--multiple {
    min-height: 2.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.75rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #E8F5E9;
    border: 1px solid #A5D6A7;
    color: #1B5E20;
    border-radius: 0.5rem;
    padding: 2px 8px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #1B5E20; margin-right: 4px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: #2E7D32; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: #43A047;
    box-shadow: 0 0 0 2px rgba(67,160,71,0.2);
}
.select2-dropdown { border-color: #d1d5db; border-radius: 0.75rem; }
.select2-search--dropdown .select2-search__field { border-radius: 0.5rem; border: 1px solid #e2e8f0; padding: 6px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { font-size: 0.813rem; }

/* ── Export/Filter toolbar ── */
.fa-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}
.fa-toolbar button, .fa-toolbar a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.813rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.15s;
}
.fa-toolbar .btn-csv { background: #E8F5E9; color: #1B5E20; border: 1px solid #A5D6A7; }
.fa-toolbar .btn-csv:hover { background: #C8E6C9; }
.fa-toolbar .btn-pdf { background: #FFEBEE; color: #B71C1C; border: 1px solid #EF9A9A; }
.fa-toolbar .btn-pdf:hover { background: #FFCDD2; }
.fa-toolbar .btn-print { background: #E3F2FD; color: #0D47A1; border: 1px solid #90CAF9; }
.fa-toolbar .btn-print:hover { background: #BBDEFB; }

/* ── Mobile search bar ── */
.fa-mobile-search {
    width: 100%;
    padding: 0.75rem 1rem;
    padding-left: 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239CA3AF' viewBox='0 0 20 20'%3E%3Cpath d='M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z'/%3E%3C/svg%3E") no-repeat 0.75rem center;
    background-size: 1.25rem;
}
.fa-mobile-search:focus { border-color: #43A047; box-shadow: 0 0 0 3px rgba(67,160,71,0.1); }

/* ── Touch-friendly Buttons ── */
@media (hover: none) {
    .btn-touch { padding: 0.625rem 1.25rem; min-height: 44px; }
}

/* ── Mobile (phones) ── */
@media (max-width: 767.98px) {
    .table-scroll { border: 1px solid #f1f5f9; }
    .btn-block-mobile { display: block; width: 100%; margin-bottom: 0.5rem; }
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        float: none;
        text-align: left;
        margin-bottom: 0.5rem;
        width: 100%;
    }
    .dataTables_wrapper .dataTables_filter input { width: 100%; }
    .card-mobile-full { margin-left: -1rem; margin-right: -1rem; border-radius: 0; border-left: 0; border-right: 0; }
    .fa-toolbar { flex-direction: column; align-items: stretch; }
    .fa-toolbar button, .fa-toolbar a { justify-content: center; }

    /* DataTables bottom controls — touch-friendly on phones */
    .dataTables_wrapper .dataTables_info {
        text-align: center;
        padding: 0.5rem 0;
        font-size: 0.8rem;
        line-height: 1.3;
    }
    .dataTables_wrapper .dataTables_length {
        text-align: center;
        margin-bottom: 0.75rem;
    }
    .dataTables_wrapper .dataTables_length select {
        min-height: 36px;
        padding: 0.375rem 0.75rem;
    }
    .dataTables_wrapper .dataTables_paginate {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.375rem;
        padding-top: 0.25rem;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 40px !important;
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.938rem !important;
        margin: 0.125rem !important;
        border-radius: 0.5rem !important;
        line-height: 1 !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
    .dataTables_wrapper .dataTables_paginate .paginate_button.next {
        min-width: auto !important;
        padding: 0.5rem 1rem !important;
        font-weight: 500;
    }
}

/* ── Very small screens (< 400px) ── */
@media (max-width: 399px) {
    main table.dataTable thead th,
    main table.dataTable tbody td {
        padding: 0.5rem 0.375rem !important;
        font-size: 0.75rem !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 34px !important;
        min-height: 34px !important;
        padding: 0.375rem 0.5rem !important;
        font-size: 0.8125rem !important;
    }
    .fa-toolbar {
        padding: 0.5rem;
    }
    .fa-toolbar button, .fa-toolbar a {
        font-size: 0.75rem;
        padding: 0.375rem 0.625rem;
    }
    .p-4 { padding: 0.75rem; }
    .p-6 { padding: 1rem; }
    .px-4 { padding-left: 0.75rem; padding-right: 0.75rem; }
    .px-6 { padding-left: 1rem; padding-right: 1rem; }
    .gap-4 { gap: 0.75rem; }
    .gap-6 { gap: 1rem; }
    .rounded-xl { border-radius: 0.625rem; }
}

/* ── Select2 mobile improvements ── */
@media (max-width: 767.98px) {
    .select2-container {
        width: 100% !important;
    }
    .select2-container--default .select2-selection--single {
        height: 2.75rem;
        font-size: 16px;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 2.75rem;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 2.75rem;
    }
    .select2-container--default .select2-selection--multiple {
        min-height: 2.75rem;
    }
}

/* ── Print ── */
@media print {
    aside, header, footer, nav, .fa-toolbar, .fa-mobile-search, .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dataTables_info, button[onclick*="print"], .fa-mobile-pagination { display: none !important; }
    main { padding: 0 !important; }
    .lg\:ml-72 { margin-left: 0 !important; }
    body { background: #fff !important; }
    .bg-white { background: #fff !important; box-shadow: none !important; border: none !important; }
    table { border-collapse: collapse !important; width: 100% !important; }
    table.dataTable thead th { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    a { text-decoration: none !important; color: inherit !important; }
}

/* ── Bootstrap-modal shim ── */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0,0,0,.5);
    overflow-y: auto;
}
.modal.show { display: flex; }
.modal .modal-dialog { width: 100%; max-width: 32rem; margin: auto; }
.modal .modal-content {
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
}
body.fa-modal-open { overflow: hidden; }

/* ── Fallback styles for legacy Bootstrap classes in planning editor ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    border: 1px solid transparent;
}
.btn-primary { background: #2E7D32; color: #fff; border-color: #2E7D32; }
.btn-primary:hover { background: #1B5E20; border-color: #1B5E20; }
.form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}
.form-control:focus { border-color: #43A047; box-shadow: 0 0 0 2px rgba(67,160,71,0.2); }
.card-body { padding: 1.5rem; }
.input.form-control { text-align: last center; }