/* =============================================================================
   ShareCenter -- Responsive UI Enhancements
   -----------------------------------------------------------------------------
   Layered on top of Bootstrap 5 to ensure first-class mobile, tablet, and
   desktop experiences for the existing dashboard, lists, and forms.

   Breakpoints (Bootstrap 5):
     xs  < 576px   (mobile)
     sm  >= 576px  (large mobile)
     md  >= 768px  (tablet)
     lg  >= 992px  (small desktop)
     xl  >= 1200px (desktop)
     xxl >= 1400px (large desktop)
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Global typography & box-sizing
   --------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }

/* Make all images, videos, embeds responsive by default */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Wrap long content in tables to prevent horizontal overflow on small screens */
table { word-break: break-word; }

/* Make every Bootstrap table horizontally scrollable on mobile */
.table-responsive,
.dataTable-wrapper,
.dataTables_wrapper {
    -webkit-overflow-scrolling: touch;
   
}

/* ---------------------------------------------------------------------------
   Layout: sidebar / content header collapse on tablet & smaller
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .main-menu,
    .vertical-layout .main-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100%;
        z-index: 1050;
        transition: left 0.25s ease-in-out;
        box-shadow: 0 0 18px rgba(0, 0, 0, 0.18);
    }
    .menu-open .main-menu,
    .menu-open .vertical-layout .main-menu {
        left: 0;
    }
    .menu-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1049;
    }

    .app-content,
    .content-wrapper,
    .vertical-layout .app-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .header-navbar .navbar-container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* ---------------------------------------------------------------------------
   Forms: stack labels on mobile, larger touch targets
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .form-group .row,
    .row.form-group {
        --bs-gutter-x: 0.5rem;
    }
    .form-control,
    .form-select,
    .input-group > * {
        font-size: 16px;            /* Prevent iOS zoom-on-focus */
        min-height: 44px;           /* WCAG/HIG touch target */
    }
    .btn {
        min-height: 44px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .btn-block-mobile {
        display: block;
        width: 100%;
    }
    .modal-dialog {
        margin: 0.5rem;
    }
    .modal-content {
        border-radius: 0.5rem;
    }
}

/* ---------------------------------------------------------------------------
   Cards / dashboards: tighter padding on small screens
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .card { margin-bottom: 1rem; }
    .card-body { padding: 0.875rem; }
    .card-header { padding: 0.75rem 0.875rem; }
    .card-footer { padding: 0.75rem 0.875rem; }

    /* Two-column dashboard becomes single column */
    .row > [class*="col-md-6"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Tables: switch dense lists to stacked rows on mobile
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .table-stack-mobile thead { display: none; }
    .table-stack-mobile tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid var(--bs-border-color, rgba(0,0,0,.125));
        border-radius: 0.5rem;
        background: var(--bs-body-bg, #fff);
    }
    .table-stack-mobile tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.5rem 0.75rem;
        border: none;
        border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,.075));
    }
    .table-stack-mobile tbody td:last-child { border-bottom: none; }
    .table-stack-mobile tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 0.75rem;
        color: var(--bs-secondary-color, #6c757d);
    }
}

/* ---------------------------------------------------------------------------
   File upload / drop-zone: larger hit area on mobile
   --------------------------------------------------------------------------- */
.filepond--drop-label,
.dropzone {
    min-height: 120px;
}

@media (max-width: 575.98px) {
    .filepond--drop-label,
    .dropzone {
        min-height: 160px;
        font-size: 0.95rem;
    }
}

/* ---------------------------------------------------------------------------
   Buttons row: wrap nicely on small screens
   --------------------------------------------------------------------------- */
.btn-group-responsive {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.btn-group-responsive > .btn {
    flex: 1 1 auto;
    min-width: 120px;
}

/* ---------------------------------------------------------------------------
   Navigation tabs: horizontal scroll on overflow
   --------------------------------------------------------------------------- */
.nav-tabs,
.nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.nav-tabs::-webkit-scrollbar,
.nav-pills::-webkit-scrollbar { height: 4px; }
.nav-tabs .nav-link,
.nav-pills .nav-link { white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Touch device hints
   --------------------------------------------------------------------------- */
@media (hover: none) {
    a, .btn, .nav-link, .dropdown-item {
        -webkit-tap-highlight-color: rgba(13, 110, 253, 0.15);
    }
}

/* ---------------------------------------------------------------------------
   Print: clean output
   --------------------------------------------------------------------------- */
@media print {
    .header-navbar, .main-menu, .footer, .no-print { display: none !important; }
    .card { break-inside: avoid; }
}

/* ---------------------------------------------------------------------------
   RESPONSIVE DATA TABLES (mobile card layout)
   ---------------------------------------------------------------------------
   On viewports ≤ 575px, transform Bootstrap / DataTables tables into stacked
   "card" blocks. The column header is shown via ::before using the data-label
   attribute injected by `responsive-tables.js`. Tables marked with
   `.no-card-mobile` keep their classic horizontal-scroll behaviour.
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    table.responsive-card-table:not(.no-card-mobile),
    .table-responsive-cards table:not(.no-card-mobile) {
        border: 0;
        width: 100% !important;
    }
    table.responsive-card-table:not(.no-card-mobile) thead,
    .table-responsive-cards table:not(.no-card-mobile) thead {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    table.responsive-card-table:not(.no-card-mobile) tr,
    .table-responsive-cards table:not(.no-card-mobile) tr {
        display: block;
        margin: 0 0 12px 0;
        background: #ffffff;
        border: 1px solid #e7eaf0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        padding: 8px 4px;
    }
    table.responsive-card-table:not(.no-card-mobile) td,
    .table-responsive-cards table:not(.no-card-mobile) td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 14px;
        border: 0;
        text-align: right;
        word-break: break-word;
    }
    table.responsive-card-table:not(.no-card-mobile) td::before,
    .table-responsive-cards table:not(.no-card-mobile) td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: left;
        flex: 0 0 38%;
    }
    table.responsive-card-table:not(.no-card-mobile) td:empty,
    .table-responsive-cards table:not(.no-card-mobile) td:empty { display: none; }

    /* DataTables wrapper tweaks on mobile */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        width: 100%;
        text-align: left;
        margin: 6px 0;
    }
    .dataTables_filter input { width: 100% !important; margin-left: 0 !important; }
    .dataTables_paginate .paginate_button { padding: 6px 10px; }
}