/* =========================================================================
   MOBILE LAYER (sirf chhoti screen par). style.css / theme.css ke baad load hota hai.
   Maksad: kuch bhi screen ya card se bahar na nikle; tables mein heading dikhe; popups fit aayein.
   ========================================================================= */
@media (max-width: 768px) {
    html, body { max-width: 100vw; overflow-x: hidden; }
    img, canvas, video, iframe { max-width: 100%; }

    /* ---- Page ka dhancha ---- */
    .main-wrapper { max-width: 100vw; overflow-x: hidden; }
    .content-area { padding: 8px !important; }
    .content-section { max-width: 100%; overflow-x: hidden; padding-left: 8px !important; padding-right: 8px !important; }
    .content-section * { max-width: 100%; }
    .content-section svg, .content-section svg * { max-width: none; }
    .content-section > div[style*="padding:25px"], .content-section > div[style*="padding: 25px"] { padding: 14px !important; }
    .content-section [style*="padding:24px"], .content-section [style*="padding: 24px"] { padding: 14px !important; }
    #dashboard-metric-cards { padding: 8px !important; gap: 10px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #dashboard-metric-cards > div { padding: 13px !important; }
    #dashboard-metric-cards h2 { font-size: 19px !important; overflow-wrap: anywhere; }
    [style*="margin:0 20px"] { margin-left: 8px !important; margin-right: 8px !important; }

    /* ---- Top bar: hamburger + search (poori chauri row) + chhota Refresh ---- */
    .topbar { height: auto !important; min-height: var(--topbar-height); flex-wrap: wrap; row-gap: 6px; padding: 8px 12px !important; position: sticky; top: 0; z-index: 900; }
    .topbar .search-container { display: block !important; order: 3; flex: 0 0 100%; width: 100%; margin: 0 !important; }
    .topbar .search-container input { width: 100% !important; min-width: 0 !important; }
    .topbar .welcome-text { display: none !important; }
    .topbar #btn-hard-refresh { font-size: 0 !important; padding: 8px 11px !important; }
    .topbar #btn-hard-refresh i { font-size: 15px; }

    /* ---- Form ki cheezein ---- */
    input, select, textarea { max-width: 100%; font-size: 16px !important; }
    input[type="date"], input[type="month"], input[type="time"] { min-width: 0; }
    input[style*="width:"], select[style*="width:"], textarea[style*="width:"] { max-width: 100% !important; }
    [style*="grid-template-columns"]:not([style*="auto-"]):not([style*="repeat("]) { grid-template-columns: 1fr !important; }
    [style*="display:flex"][style*="justify-content:space-between"], .section-header { flex-wrap: wrap; row-gap: 8px; }
    .section-header, .list-header { gap: 8px; }
    button { max-width: 100%; }
    /* grid mein akela bacha aakhri box poori chauraai le (khali jagah na rahe) */
    .content-section [style*="auto-fit"] > :last-child:nth-child(odd), #dashboard-metric-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .content-section [style*="display:flex"]:not([style*="nowrap"]):not([style*="column"]), .content-section [style*="display: flex"]:not([style*="nowrap"]):not([style*="column"]) { flex-wrap: wrap; }
    #pur-top-scroll { display: none !important; }

    .filter-controls { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
    .filter-controls input { flex: 1 1 100%; width: 100% !important; }
    .btn-refresh { width: auto; }

    /* ---- Popups: screen ke andar, andar scroll ---- */
    [style*="position:fixed"][style*="inset:0"] { padding: 10px !important; }
    [style*="position:fixed"][style*="inset:0"] > div { max-width: calc(100vw - 20px) !important; max-height: 92vh; overflow-y: auto; box-sizing: border-box; }
    #gs-results { max-width: calc(100vw - 16px) !important; }

    /* ---- Tables ---- */
    .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; border-radius: 8px; }
    .tbl-hint { font-size: 11px; color: #94a3b8; text-align: right; padding: 2px 4px 4px; }

    /* Form wali tables (jinke andar input/select hain, jaise bill ke item rows): asli table, side mein scroll */
    table.m-form { display: table !important; width: 100%; min-width: 560px; }
    table.m-form thead { display: table-header-group !important; }
    table.m-form tbody { display: table-row-group !important; }
    table.m-form tbody tr, table.m-form thead tr { display: table-row !important; margin: 0 !important; border: 0 !important; border-radius: 0; box-shadow: none !important; background: transparent; }
    table.m-form tbody tr td, table.m-form thead tr th { display: table-cell !important; text-align: left !important; padding: 6px !important; border-bottom: 1px solid #e2e8f0 !important; }
    table.m-form td::before { display: none !important; }
    table.m-form td input, table.m-form td select { min-width: 70px; }

    /* Baaki tables = card: har row ek card, har cell ke aage uski heading */
    table.m-card { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
    table.m-card tbody { display: block !important; width: 100%; }
    table.m-card tbody tr { width: 100% !important; box-sizing: border-box; }
    table.m-card tbody tr td { display: grid !important; grid-template-columns: minmax(78px, 38%) 1fr; column-gap: 10px; align-items: start; text-align: right; }
    table.m-card tbody tr td[data-label]::before { content: attr(data-label); font-weight: 700; font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: .3px; text-align: left; padding-top: 2px; }
    table.m-card tbody tr td:not([data-label]) { display: block !important; text-align: left; }
    table.m-card tbody tr td.m-span { display: block !important; text-align: center; }
    table.m-card tbody tr td.m-span::before { display: none !important; }
    table.m-card tbody tr td .tdv { min-width: 0; overflow-wrap: anywhere; text-align: right; }
    table.m-card tbody tr td:last-child .tdv { text-align: center; }
    table.m-card tbody tr td:last-child[data-label] { display: block !important; }
    table.m-card tbody tr td:last-child[data-label]::before { display: block; margin-bottom: 4px; }
    table.m-card tbody tr td:last-child[data-label] .tdv { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
    table.m-card tfoot { display: block; }
    table.m-card tfoot tr { display: block; }
    table.m-card tfoot td, table.m-card tfoot th { display: block; text-align: right; padding: 6px 12px; }

    /* Project Stage board: 5 column ki jagah side mein scroll, par har column chauda */
    #workStage-section .ws-board { grid-template-columns: repeat(5, minmax(78vw, 1fr)); scroll-snap-type: x mandatory; }
    #workStage-section .ws-col { scroll-snap-align: start; }
}

@media (max-width: 420px) {
    .content-area { padding: 6px !important; }
    h2 { font-size: 1.15rem; }
    .section-header h2 { font-size: 1.1rem; }
    .btn-refresh, .section-header button { width: 100%; justify-content: center; }
}