/* ============================================================
   Global mobile-responsive overrides
   Loaded last so it wins specificity wars without !important
   spam. Targets the patterns that recur across the codebase:
   inline-styled cards, fixed-width tables, multi-column rows
   that don't stack, sticky elements, and overflow.
   ============================================================ */

/* ------------ TABLETS & SMALL LAPTOPS (≤ 991px) ------------ */
@media (max-width: 991.98px) {
    .container, .container-fluid { padding-left: 14px; padding-right: 14px; }
    .table-container { padding: 18px !important; border-radius: 12px !important; }
    h1, .h1 { font-size: 1.6rem !important; }
    h2, .h2 { font-size: 1.4rem !important; }
    h3, .h3 { font-size: 1.2rem !important; }
    h4, .h4 { font-size: 1.1rem !important; }
    h5, .h5 { font-size: 1rem !important; }
    h6, .h6 { font-size: 0.92rem !important; }
}

/* ------------ MOBILE (≤ 767px) ----------------------------- */
@media (max-width: 767.98px) {

    /* ----- Body / global ----- */
    body { font-size: 14px; -webkit-text-size-adjust: 100%; }

    /* ----- Layout containers ----- */
    .container, .container-fluid, .px-4, .px-md-4 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* ----- Cards / panels with hard-coded inline padding ----- */
    [style*="padding:28px"], [style*="padding: 28px"],
    [style*="padding:30px"], [style*="padding: 30px"],
    [style*="padding:32px"], [style*="padding: 32px"],
    [style*="padding:24px"], [style*="padding: 24px"] {
        padding: 16px !important;
    }
    .table-container { padding: 14px !important; margin-bottom: 14px !important; }
    .card-body { padding: 14px !important; }

    /* ----- Page header rows (title left, actions right) ----- */
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 10px;
    }
    .d-flex.justify-content-between > div { flex: 1 1 100%; }
    .d-flex.justify-content-between > .d-flex.gap-2 { flex: 1 1 100%; }
    .d-flex.justify-content-between .btn { flex: 1 1 auto; }

    /* ----- Action button rows wrap nicely on mobile ----- */
    .action-buttons, .d-flex.gap-2 { flex-wrap: wrap; gap: 6px !important; }
    .btn { white-space: normal; }
    .btn-sm { padding: 6px 12px; font-size: 12.5px; }

    /* ----- Tables: scroll horizontally instead of squashing ----- */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    table { font-size: 12.5px; }
    table th, table td { padding: 8px 6px !important; }
    /* Wrap any naked .table inside a scroll container via overflow on parent */
    .table-container > table,
    .table-container .table { display: block; overflow-x: auto; white-space: nowrap; }

    /* ----- Any fixed-width left label (180px etc.) ----- */
    [style*="width:180px"], [style*="width: 180px"],
    [style*="width:200px"], [style*="width: 200px"],
    [style*="width:160px"], [style*="width: 160px"] {
        width: auto !important;
        min-width: 110px !important;
        max-width: 45% !important;
    }

    /* ----- Forms: stop forcing two-column rows ----- */
    .row.g-3 > .col-md-6, .row.g-4 > .col-md-6,
    .row.g-3 > .col-md-4, .row.g-4 > .col-md-4,
    .row.g-3 > .col-md-3, .row.g-4 > .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .form-control, .form-select { font-size: 14.5px; padding: 10px !important; }
    .form-label { font-size: 13px !important; }

    /* ----- Modals ----- */
    .modal-dialog { margin: 10px; }
    .modal-body { padding: 14px !important; }

    /* ----- Sidebar mobile sizing — keep fixed positioning intact ----- */
    /* The admin layout's own @media rule slides the sidebar off-screen via
       left: -264px until the .show class is applied. Don't override width
       here or the slide-out math breaks. */

    /* ----- Tabs scroll instead of overflow-hide ----- */
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .nav-tabs::-webkit-scrollbar { height: 0; }
    .nav-tabs .nav-link { white-space: nowrap; flex: 0 0 auto; }

    /* ----- Tighten inline status badges & icons ----- */
    .badge { font-size: 11px; padding: 4px 8px; }

    /* ----- Page hero / banner sections often have huge padding ----- */
    [class*="hero"], .page-header { padding: 20px 14px !important; }

    /* ----- Footer columns stack ----- */
    footer .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

    /* ----- DataTables ----- */
    .dataTables_wrapper .row { flex-direction: column; gap: 8px; }
    .dataTables_filter, .dataTables_length { text-align: left !important; }
    .dataTables_filter input { width: 100% !important; margin: 0 !important; }

    /* ----- Email show / settings detail rows (label-value pairs) ----- */
    [style*="display:flex"][style*="align-items:center"][style*="padding:12px 20px"] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 4px;
        padding: 10px 14px !important;
    }

    /* ----- Login-as / impersonate banner stays sticky and readable ----- */
    [style*="position:sticky"][style*="z-index:10000"] form {
        display: block !important;
        margin: 6px 0 0 !important;
    }
    [style*="position:sticky"][style*="z-index:10000"] {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
}

/* ------------ EXTRA SMALL (≤ 480px) ------------------------ */
@media (max-width: 480px) {
    body { font-size: 13.5px; }
    .container, .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }
    .btn { padding: 9px 14px; font-size: 13px; }
    .btn-sm { padding: 6px 10px; font-size: 12px; }
    .table-container { padding: 12px !important; border-radius: 10px !important; }
    h4, .h4 { font-size: 1rem !important; }

    /* Page header buttons go full-width below the title */
    .d-flex.justify-content-between .btn { width: 100%; }

    /* Card actions (Edit / Delete / Send / etc.) stack */
    .card-actions, .table-container .d-flex.gap-2 .btn { flex: 1 1 auto; }
}

/* ------------ ADMIN PANEL (≤ 992px includes tablets) ------ */
@media (max-width: 992px) {
    /* Admin top navbar — squeeze it on small screens */
    .top-navbar { padding: 0 14px !important; height: 56px !important; }
    .top-navbar .breadcrumb { font-size: 12px; margin: 0; }
    .top-navbar .user-info { display: none !important; }

    /* Content area padding */
    .content-area { padding: 16px !important; }

    /* Stat cards — typically col-md-3 — go to 2-up on tablet */
    .row.g-3 > .col-md-3, .row.g-4 > .col-md-3,
    .row.g-3 > .col-lg-3, .row.g-4 > .col-lg-3 {
        flex: 0 0 50%; max-width: 50%;
    }
}

@media (max-width: 600px) {
    /* On phones, stat cards stack 1-up */
    .row.g-3 > .col-md-3, .row.g-4 > .col-md-3,
    .row.g-3 > .col-lg-3, .row.g-4 > .col-lg-3,
    .row.g-3 > .col-sm-6, .row.g-4 > .col-sm-6 {
        flex: 0 0 100%; max-width: 100%;
    }
    /* Breadcrumbs collapse */
    .breadcrumb { font-size: 11.5px; padding: 4px 8px; }
    /* Datatable wrapper gets less padding */
    .dataTables_wrapper { padding: 0; }
    /* Pagination wraps */
    .pagination { gap: 3px; }
    .pagination .page-link { padding: 5px 9px !important; min-width: 32px !important; font-size: 12px !important; }
}

/* ------------ ADMIN LIST CARD VIEW (shared) -------------- */
/* Used on /admin/franchise, /admin/applications, /admin/proposals,
   /admin/invoices, /admin/payments, /admin/users — any list page
   that follows the .{slug}-mobile-list / .{slug}-mcard convention. */
.app-mobile-list, .franchise-mobile-list, .proposal-mobile-list,
.invoice-mobile-list, .payment-mobile-list, .user-mobile-list,
.noc-mobile-list, .agreement-mobile-list { display: flex; flex-direction: column; gap: 12px; }

.app-mcard, .franchise-mcard, .proposal-mcard, .invoice-mcard,
.payment-mcard, .user-mcard, .noc-mcard, .agreement-mcard {
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.app-mcard .mcard-head, .franchise-mcard .mcard-head, .proposal-mcard .mcard-head,
.invoice-mcard .mcard-head, .payment-mcard .mcard-head, .user-mcard .mcard-head,
.noc-mcard .mcard-head, .agreement-mcard .mcard-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-surface-secondary, #f9fafb);
}

.mcard-avatar {
    width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--border-color, #e5e7eb); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.mcard-avatar-fallback { background: var(--bg-surface-secondary, #f3f4f6); color: var(--text-muted, #9ca3af); font-size: 16px; }

.mcard-id { flex: 1; min-width: 0; }
.mcard-appno { font-weight: 700; color: var(--primary, #4f46e5); font-size: 13px; text-decoration: none; display: block; }
.mcard-name { font-weight: 700; color: var(--text-primary); font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard-email { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard-status { flex-shrink: 0; }

.app-mcard .mcard-body, .franchise-mcard .mcard-body, .proposal-mcard .mcard-body,
.invoice-mcard .mcard-body, .payment-mcard .mcard-body, .user-mcard .mcard-body,
.noc-mcard .mcard-body, .agreement-mcard .mcard-body {
    padding: 10px 14px;
    display: flex; flex-direction: column; gap: 6px;
    font-size: 13px; color: var(--text-secondary);
}
.mcard-row { display: flex; align-items: center; gap: 10px; line-height: 1.4; }
.mcard-row i { width: 16px; text-align: center; font-size: 11.5px; }

.app-mcard .mcard-actions, .franchise-mcard .mcard-actions, .proposal-mcard .mcard-actions,
.invoice-mcard .mcard-actions, .payment-mcard .mcard-actions, .user-mcard .mcard-actions,
.noc-mcard .mcard-actions, .agreement-mcard .mcard-actions {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-surface-secondary, #fafafa);
}
.app-mcard .mcard-actions .btn, .franchise-mcard .mcard-actions .btn,
.proposal-mcard .mcard-actions .btn, .invoice-mcard .mcard-actions .btn,
.payment-mcard .mcard-actions .btn, .user-mcard .mcard-actions .btn,
.noc-mcard .mcard-actions .btn, .agreement-mcard .mcard-actions .btn {
    flex: 1 1 auto; min-width: 0; padding: 6px 10px; font-size: 12.5px;
}

@media (max-width: 480px) {
    .app-mcard .mcard-head, .franchise-mcard .mcard-head, .proposal-mcard .mcard-head,
    .invoice-mcard .mcard-head, .payment-mcard .mcard-head, .user-mcard .mcard-head,
    .noc-mcard .mcard-head, .agreement-mcard .mcard-head { padding: 10px 12px; }
    .app-mcard .mcard-body, .franchise-mcard .mcard-body, .proposal-mcard .mcard-body,
    .invoice-mcard .mcard-body, .payment-mcard .mcard-body, .user-mcard .mcard-body,
    .noc-mcard .mcard-body, .agreement-mcard .mcard-body { padding: 8px 12px; font-size: 12.5px; }
    .app-mcard .mcard-actions, .franchise-mcard .mcard-actions, .proposal-mcard .mcard-actions,
    .invoice-mcard .mcard-actions, .payment-mcard .mcard-actions, .user-mcard .mcard-actions,
    .noc-mcard .mcard-actions, .agreement-mcard .mcard-actions { padding: 8px 10px; }
    .app-mcard .mcard-actions .btn, .franchise-mcard .mcard-actions .btn,
    .proposal-mcard .mcard-actions .btn, .invoice-mcard .mcard-actions .btn,
    .payment-mcard .mcard-actions .btn, .user-mcard .mcard-actions .btn,
    .noc-mcard .mcard-actions .btn, .agreement-mcard .mcard-actions .btn { font-size: 11.5px; padding: 5px 8px; }
}

/* Tighten the page-header / filter bar across all admin list pages */
@media (max-width: 767px) {
    .table-container { padding: 14px !important; }
    .table-header { gap: 8px; margin-bottom: 12px; }
    .table-header .table-title { font-size: 0.98rem; }
    .table-actions { width: 100%; }
    .table-actions .btn { flex: 1 1 auto; padding: 7px 10px; font-size: 12.5px; }
    .table-actions .btn-group { flex: 1 1 auto; }
    .filter-panel .col-md-3 { flex: 0 0 100%; max-width: 100%; }
}

/* ------------ TOUCH-FRIENDLY TARGETS (any small screen) ----- */
@media (hover: none) and (pointer: coarse) {
    .btn, .nav-link, .form-control, .form-select, a.btn-action {
        min-height: 38px;
    }
    button, .btn { touch-action: manipulation; }
}

/* ------------ PREVENT HORIZONTAL SCROLL EVER --------------- */
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }
pre, code { white-space: pre-wrap; word-wrap: break-word; }