/* ============================================
   IPTV Panel - Mobile App-Like Experience
   ============================================ */

/* Desktop: hide auto-injected mobile search */
.dt-mobile-search {
    display: none;
}

/* PWA - Full screen feel */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

body {
    -webkit-font-smoothing: antialiased;
    touch-action: manipulation;
}

/* Prevent pull-to-refresh on mobile */
body.mobile-app {
    overscroll-behavior-y: contain;
}

/* ============================================
   MOBILE BOTTOM NAVIGATION
   ============================================ */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 4px 0;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}

.mobile-bottom-nav .nav-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
}

.mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #a1a5b7;
    font-size: 10px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.2s;
    min-width: 56px;
}

.mobile-bottom-nav .nav-item i {
    font-size: 20px;
    margin-bottom: 2px;
}

.mobile-bottom-nav .nav-item.active,
.mobile-bottom-nav .nav-item:active {
    color: #7239EA;
}

.mobile-bottom-nav .nav-item.primary-btn {
    background: linear-gradient(135deg, #7239EA, #5014d0);
    color: #fff;
    border-radius: 14px;
    padding: 8px 16px;
    margin-top: -15px;
    box-shadow: 0 4px 15px rgba(114,57,234,0.4);
}

.mobile-bottom-nav .nav-item.primary-btn i {
    font-size: 22px;
}

.mobile-bottom-nav .nav-item.primary-btn:active {
    color: #fff;
    transform: scale(0.95);
}

/* ============================================
   MOBILE RESPONSIVE OVERRIDES
   ============================================ */
@media (max-width: 991.98px) {

    /* Show bottom nav */
    .mobile-bottom-nav {
        display: block;
    }

    /* Add bottom padding for nav */
    body {
        padding-bottom: 75px !important;
    }

    /* The footer carries Metronic's .py-3, whose !important padding beat the
       plain override here and left the copyright line sitting under the fixed
       bottom nav. Clear the nav (55px) plus the raised "Add" button (15px),
       and win on ID specificity. */
    #pagefooter, #kt_footer {
        padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    }

    /* Hide desktop sidebar completely on mobile */
    .aside.aside-extended {
        z-index: 1060;
        display: none !important;
    }

    /* When drawer is opened via hamburger menu, show it */
    .aside.aside-extended.drawer-on {
        display: flex !important;
    }

    /* Wrapper takes full width on mobile */
    .wrapper {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    .page {
        padding-left: 0 !important;
    }

    body[data-kt-aside-minimize="on"] .wrapper,
    body .wrapper {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Compact header on mobile */
    .topbar_base {
        gap: 4px !important;
    }

    .topbar_base .btn-sm {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    .topbar_base .d-none.d-md-block,
    .topbar_base .d-none.d-lg-block {
        display: none !important;
    }

    /* Page title compact */
    #kt_header h1.fs-2 {
        font-size: 1.1rem !important;
    }

    .breadcrumb {
        font-size: 11px !important;
    }

    #kt_header {
        padding: 8px 0 !important;
        margin-top: 0 !important;
    }

    .header {
        margin-top: 0 !important;
    }

    /* ============================================
       CARDS - Mobile optimized
       ============================================ */
    .card {
        border-radius: 12px;
        margin-bottom: 12px !important;
    }

    .card-header {
        padding: 12px 16px !important;
        min-height: auto !important;
    }

    .card-body {
        padding: 12px 16px !important;
    }

    .card-title h3 {
        font-size: 15px !important;
    }

    /* Stats cards - 2 per row */
    .row.g-5.g-xl-8 > [class*="col-xl-3"] {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 4px !important;
    }

    .row.g-5.g-xl-8 > [class*="col-xl-3"] .card-body {
        padding: 10px 12px !important;
    }

    .row.g-5.g-xl-8 > [class*="col-xl-3"] .fs-2 {
        font-size: 1.2rem !important;
    }

    .row.g-5.g-xl-8 > [class*="col-xl-3"] .fs-2x {
        font-size: 1.3rem !important;
    }

    /* ============================================
       TABLES - Card layout on mobile (NO horizontal scroll)
       ============================================ */
    .table-responsive,
    .dataTables_scrollBody,
    .dataTables_wrapper {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        margin: 0;
        padding: 0;
    }

    /* Kill any table fixed width and scrollX wrapper */
    table.table,
    table.dataTable {
        width: 100% !important;
        table-layout: auto !important;
    }

    .dataTables_scrollHead,
    .dataTables_scrollBody {
        overflow: visible !important;
    }

    .dataTables_scroll {
        overflow: hidden !important;
    }

    .table-mobile-cards thead {
        display: none;
    }

    .table-mobile-cards,
    .table-mobile-cards tbody,
    .table-mobile-cards tr,
    .table-mobile-cards td {
        display: block;
        width: 100%;
    }

    .table-mobile-cards tr {
        background: #fff;
        border: 1px solid #f1f1f4;
        border-radius: 10px;
        margin-bottom: 10px;
        /* !important: the tables carry Metronic's gs-0 / gy-4 spacing utilities,
           which zero the row's horizontal padding on some pages and not others -
           cards then started at different left offsets from page to page. */
        padding: 14px 16px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }

    /* Cells sit flush inside that one row padding, so every page indents the
       same regardless of which gs-* utility its table uses. */
    .table-mobile-cards td,
    .table-mobile-cards td:first-child,
    .table-mobile-cards td:last-child {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .table-mobile-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 7px 0 !important;
        border: none !important;
        font-size: 13px;
        text-align: right;
        min-width: 0;
    }

    /* Every value shares the line with the label, so it must be allowed to
       shrink before it can ellipsis. */
    .table-mobile-cards td > * {
        min-width: 0;
    }

    .table-mobile-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #a1a5b7;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        flex: 0 0 auto;
        max-width: 45%;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .table-mobile-cards td[data-label="#"] {
        display: none;
    }

    /* Bulk-select checkbox: its column header is empty, so give it a label of
       its own and keep it at the top-left of the card instead of floating
       right on a blank row. */
    .table-mobile-cards td.mobile-select-cell {
        justify-content: flex-start;
        padding-bottom: 10px !important;
        margin-bottom: 4px;
        border-bottom: 1px solid #f1f1f4 !important;
    }

    .table-mobile-cards td.mobile-select-cell::before {
        content: "Select";
        order: 2;
        margin-left: 2px;
    }

    .table-mobile-cards td.mobile-select-cell .form-check {
        order: 1;
        margin: 0;
    }

    /* Cells holding more than one element (name + URL, name + meta) stack them
       right-aligned so the first line keeps its width instead of being
       squeezed to a couple of characters. */
    .table-mobile-cards td.mobile-stacked {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .table-mobile-cards td.mobile-stacked::before {
        flex: 0 0 auto;
        padding-top: 1px;
    }

    .table-mobile-cards td.mobile-stacked > * {
        text-align: right;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* The first value line sits beside the label... */
    .table-mobile-cards td.mobile-stacked > *:first-child {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
    }

    /* ...and every later line takes a row of its own. `flex: 0 0 100%` with the
       max-width cleared is what forces the break: .cell-truncate caps its own
       width at 180px, which otherwise leaves room for it to sit on line one. */
    .table-mobile-cards td.mobile-stacked > *:not(:first-child) {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 2px;
    }

    /* Actions row: a wrapping row of natural-width buttons, not a rigid
       two-column grid that stretches icon buttons out of shape. */
    .table-mobile-cards td.actions-cell,
    .table-mobile-cards td[data-label="Actions"],
    .table-mobile-cards td:last-child:not([data-label]) {
        padding-top: 10px !important;
        margin-top: 4px;
        border-top: 1px solid #f1f1f4 !important;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        text-align: left;
    }

    .table-mobile-cards td.actions-cell::before,
    .table-mobile-cards td[data-label="Actions"]::before,
    .table-mobile-cards td:last-child:not([data-label])::before {
        display: none;
    }

    .table-mobile-cards td.actions-cell form,
    .table-mobile-cards td[data-label="Actions"] form,
    .table-mobile-cards td:last-child form {
        display: inline-flex !important;
        margin: 0;
        width: auto;
    }

    .table-mobile-cards td.actions-cell .btn,
    .table-mobile-cards td[data-label="Actions"] .btn,
    .table-mobile-cards td:last-child .btn {
        width: auto;
        min-height: 38px;
    }

    /* Icon-only buttons stay square instead of stretching. */
    .table-mobile-cards td.actions-cell .btn-icon,
    .table-mobile-cards td[data-label="Actions"] .btn-icon,
    .table-mobile-cards td:last-child .btn-icon {
        width: 38px;
        min-width: 38px;
        flex: 0 0 auto;
        margin: 0 !important;
    }

    /* Thumbnails keep their box and never spill past the card padding. */
    .table-mobile-cards td .table-thumb,
    .table-mobile-cards td .table-thumb-wide {
        flex: 0 0 auto;
        max-width: 60%;
        height: auto;
    }

    /* Single-line values truncate instead of wrapping. Stacked and action
       cells lay out their own children above, so they opt out here. */
    .table-mobile-cards td:not(.mobile-stacked):not(.actions-cell) > code,
    .table-mobile-cards td:not(.mobile-stacked):not(.actions-cell) > span:not(.badge),
    .table-mobile-cards td:not(.mobile-stacked):not(.actions-cell) > .fw-bolder,
    .table-mobile-cards td:not(.mobile-stacked):not(.actions-cell) > .fw-bold,
    .table-mobile-cards td:not(.mobile-stacked):not(.actions-cell) > .text-muted {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
        display: inline-block;
    }

    /* ------------------------------------------------------------------
       One type scale for every card row.

       Pages were built with whatever Metronic size utility suited the desktop
       table (fs-5/fs-6/fs-7/fs-8, fw-bold/fw-bolder), so the same kind of value
       rendered at 13px/400 on one screen, 13px/500 on another and 13.4px/600 on
       a third. These four rules pin the scale so every list reads identically:
       value 13px, primary/name line 13.5px, secondary line 12px, badge 11px.
       ------------------------------------------------------------------ */
    .table-mobile-cards td {
        font-size: 13px !important;
        font-weight: 500 !important;
    }

    .table-mobile-cards td .fw-bolder,
    .table-mobile-cards td .fw-bold,
    .table-mobile-cards td .fs-5,
    .table-mobile-cards td .fs-6 {
        font-size: 13.5px !important;
        font-weight: 600 !important;
    }

    .table-mobile-cards td .text-muted,
    .table-mobile-cards td .fs-7,
    .table-mobile-cards td .fs-8,
    .table-mobile-cards td code {
        font-size: 12px !important;
        font-weight: 500 !important;
    }

    .table-mobile-cards td .badge {
        font-size: 11px !important;
        font-weight: 600 !important;
    }

    .table-mobile-cards .btn-sm {
        min-height: 36px;
    }

    /* ApexCharts lays legend entries out in a row and lets long category names
       collide on a phone ("Tamil Nadu Cha...Karnataka Channels" overlapping).
       One entry per line removes the overlap entirely. */
    .apexcharts-legend {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0 8px !important;
        /* ApexCharts caps the legend's height inline; with a column direction
           that cap makes entries wrap into a second column instead of a list.
           Only the height/wrap is relaxed - the container keeps the absolute
           position ApexCharts gives it, or the legend lands on top of the
           chart instead of below it. */
        flex-wrap: nowrap !important;
        max-height: none !important;
        height: auto !important;
    }

    .apexcharts-legend-series {
        margin: 2px 0 !important;
        display: flex !important;
        align-items: center;
    }

    .apexcharts-legend-text {
        font-size: 12px !important;
    }

    /* DataTables integration */
    .dataTables_wrapper .table-mobile-cards tr.odd,
    .dataTables_wrapper .table-mobile-cards tr.even {
        background: #fff;
    }

    .dataTables_wrapper .dataTables_info {
        font-size: 12px;
        padding: 8px 0;
    }

    .dataTables_wrapper .dataTables_length {
        display: none;
    }

    /* Auto-injected mobile search (from header.php JS) */
    .dt-mobile-search {
        display: block !important;
    }

    /* Export buttons - compact row on mobile */
    .dt-buttons,
    .dt-buttons .btn,
    /* ============================================
       FORMS - Touch friendly
       ============================================ */
    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 16px !important;
    }

    .form-control-lg {
        min-height: 50px;
        font-size: 18px !important;
    }

    .form-control-solid {
        border: 1px solid #e4e6ef;
    }

    .btn {
        min-height: 44px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .btn-lg {
        min-height: 50px;
        font-size: 16px !important;
    }

    .btn-sm {
        min-height: 36px;
    }

    .btn-icon.btn-sm {
        min-height: 36px;
        width: 36px;
        height: 36px;
    }

    /* Taller tap target for switches, but no left indent: this theme lays the
       input out in normal flow (no float / negative margin), so a padding-left
       here just pushed the switch 50px right of the label column it belongs to. */
    .form-check.form-switch {
        padding: 12px 0;
        margin-left: 0;
    }

    .form-check.form-switch .form-check-input {
        width: 44px !important;
        height: 24px !important;
        margin-left: 0;
    }

    .form-check.form-switch .form-check-label {
        padding-left: 10px;
    }

    /* Plain checkboxes stay square - the switch sizing above used to apply to
       every .form-check-input, which stretched the row-select boxes into wide
       rectangles. */
    .form-check:not(.form-switch) .form-check-input {
        width: 22px !important;
        height: 22px !important;
    }

    /* ============================================
       MODALS - Scrollable on mobile
       ============================================ */
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
        min-height: auto;
        max-height: calc(100vh - 20px);
    }

    .modal-content {
        border: none;
        border-radius: 14px;
        min-height: auto;
        max-height: calc(100vh - 20px);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .modal-header {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 10;
        border-radius: 14px 14px 0 0;
        padding: 14px 16px;
        flex-shrink: 0;
        border-bottom: 1px solid #f1f1f4;
    }

    .modal-body {
        padding: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        overscroll-behavior: contain;
    }

    .modal-footer {
        position: sticky;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #f1f1f4;
        flex-shrink: 0;
    }

    /* Large modals - nearly full screen */
    .modal-lg,
    .modal-xl {
        max-width: calc(100% - 20px) !important;
    }

    .modal-dialog-scrollable .modal-body {
        max-height: none;
    }

    .modal-footer {
        padding: 12px 16px;
        gap: 8px;
    }

    .modal-footer .btn {
        flex: 1;
    }

    .modal.show {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .modal.show .modal-dialog {
        animation: modalSlideUp 0.25s ease-out;
        margin: 10px;
    }

    @keyframes modalSlideUp {
        from { transform: translateY(30px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .modal-lg .modal-dialog,
    .modal-dialog.modal-lg {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    /* ============================================
       BADGES
       ============================================ */
    .badge {
        font-size: 11px;
        padding: 5px 8px;
    }

    .badge {
        user-select: none;
    }

    /* ============================================
       ALERTS - full width on mobile
       ============================================ */
    .position-fixed.top-0.end-0 {
        left: 10px !important;
        right: 10px !important;
    }

    .position-fixed .alert {
        width: auto !important;
    }

    /* ============================================
       DATATABLES mobile fixes
       ============================================ */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 40px;
        min-height: 40px;
        line-height: 40px;
        padding: 0 !important;
        margin: 0 2px;
    }

    /* ============================================
       Tab strips (Settings, Ads) - scrollable on mobile
       ============================================ */
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Without this the tabs shrink to fit rather than scrolling, which clipped
       "Administrators" and "Privacy Policy" out of reach. */
    .nav-tabs .nav-item {
        flex: 0 0 auto;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
        font-size: 13px;
        padding: 10px 14px;
    }

    /* Settings form buttons full width */
    .tab-content .btn-primary,
    .tab-content .btn-warning {
        width: 100%;
        margin-top: 10px;
    }

    .tab-content .form-label {
        font-size: 13px;
        margin-bottom: 4px;
    }

    /* ============================================
       PROFILE page
       ============================================ */
    .row.g-5 > .col-xl-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ============================================
       CONTAINER - reduce excess padding
       ============================================ */
    .container-fluid,
    #kt_content_container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* ============================================
       UTILITY
       ============================================ */
    .d-mobile-none {
        display: none !important;
    }

    .d-mobile-block {
        display: block !important;
    }

    .fs-mobile-7 {
        font-size: 0.85rem !important;
    }
}

/* Phones: the list filter bars are laid out col-6 (two per row), which at
   phone widths leaves ~155px per control. Combined with the 16px font the
   forms need to stop iOS zooming on focus, long options ("Channel No (low to
   high)") truncate and run under the select's chevron. Give each filter its
   own row instead - tablets keep the two-up layout. */
@media (max-width: 575.98px) {
    .card-body form.row > [class*="col-6"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .card-body form.row > [class*="col-6"] .btn {
        flex: 1 1 0;
    }
}

/* Small phones */
@media (max-width: 375px) {
    .row.g-5.g-xl-8 > [class*="col-xl-3"] .card-body {
        padding: 8px !important;
    }

    .row.g-5.g-xl-8 > [class*="col-xl-3"] .fs-2 {
        font-size: 1rem !important;
    }

    .modal-body {
        padding: 12px !important;
    }
}

/* ============================================
   PWA STANDALONE MODE
   ============================================ */
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
    }

    .powered-by-link {
        display: none;
    }
}