/**
 * CePAT — Mobile CSS
 * 所有手机版专用样式集中在这里
 * 适用于所有模块：invoice, quotation, cn, dn, sb, sbcn, sbdn, clients, suppliers 等
 * 加载顺序：在 style.css 之后，优先级更高
 * v1
 */

@media (max-width: 1024px) {

    /* ── Sidebar becomes a hidden off-canvas drawer ── */
    .sidebar {
        width: 270px !important;
        height: 100vh !important;
        height: 100dvh !important;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
        box-shadow: none;
        z-index: 300;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        padding-top: env(safe-area-inset-top, 0px);
    }
    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 32px rgba(0,0,0,0.18);
    }
    .sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px; height: 28px;
        border: none; background: transparent;
        color: var(--text-tertiary);
        cursor: pointer;
        border-radius: 6px;
        flex-shrink: 0;
    }
    .sidebar-close:hover { background: var(--bg-primary); color: var(--text-primary); }

    /* Restore full sidebar menu style (not icon-only) */
    .sidebar-menu a {
        padding: 9px 10px !important;
        justify-content: flex-start !important;
        gap: 9px !important;
        font-size: 14px !important;
        overflow: visible !important;
    }
    .sidebar-menu a svg { width: 16px !important; height: 16px !important; }
    .menu-label { display: block; }

    /* ── Overlay behind drawer ── */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.38);
        z-index: 299;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        transition: opacity 0.25s;
    }
    .sidebar-overlay.show {
        display: block;
        opacity: 1;
    }

    /* ── Hamburger button in topbar ── */
    .topbar-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4.5px;
        width: 34px; height: 34px;
        padding: 0 8px;
        background: transparent;
        border: none;
        cursor: pointer;
        border-radius: var(--radius-sm);
        flex-shrink: 0;
    }
    .topbar-hamburger span {
        display: block;
        height: 1.5px;
        background: var(--text-primary);
        border-radius: 2px;
        transition: transform 0.22s, opacity 0.22s;
        transform-origin: center;
    }
    .topbar-hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .topbar-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .topbar-hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .topbar-hamburger:hover { background: var(--bg-primary); }

    /* ── Main content fills full width (no sidebar indent) ── */
    .main-content { margin-left: 0 !important; width: 100% !important; }

    /* ── Topbar compact ── */
    .topbar { padding: 0 10px; padding-top: env(safe-area-inset-top, 0px); height: calc(48px + env(safe-area-inset-top, 0px)) !important; min-height: calc(48px + env(safe-area-inset-top, 0px)) !important; }
    .topbar-title { font-size: 16px; }

    /* ── LHDN pill — show dot only on mobile ── */
    #topbarLhdn { padding: 5px 8px !important; }
    #topbarLhdnText { display: none !important; }

    /* ── Content & cards ── */
    .content { padding: 10px 12px; }
    .card { margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; }
    .card-header { padding: 10px 12px !important; gap: 6px !important; }
    .card-header > div { gap: 6px !important; }
    .card-header > div > span:first-child { display: none !important; }
    .card-header .search-box { max-width: none !important; flex: 1 !important; min-width: 0 !important; }
    .card-header .search-box input { font-size: 12px; border: none !important; background: transparent !important; }
    .card-header .btn-new, .card-header .btn-add { font-size: 12px !important; padding: 0 10px !important; white-space: nowrap; }
    .card-header select { font-size: 12px !important; padding: 0 20px 0 8px !important; height: 30px !important; }
    .card-header span[style*="font-weight:normal"] { display: none !important; }

    /* ── Table compact ── */
    table th, table td { padding: 9px 8px !important; font-size: 12px; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ── Login page ── */
    .login-body, .login-header { padding-left: 24px; padding-right: 24px; }
}

@media (min-width: 1025px) {
    .topbar-hamburger { display: none !important; }
    .sidebar-overlay { display: none !important; }
    .sidebar-close { display: none !important; }
    .sidebar {
        width: var(--sidebar-w) !important;
        transform: translateX(0) !important;
        position: fixed !important;
        box-shadow: none !important;
        transition: none !important;
    }
    .main-content {
        margin-left: var(--sidebar-w) !important;
        width: calc(100% - var(--sidebar-w)) !important;
    }
}

@media (max-width: 480px) {
    .sidebar { width: 82vw !important; max-width: 300px !important; }
    .content { padding: 8px 10px; }
    .card-header { font-size: 13px; }
    .topbar { height: 46px !important; }
}

@media (max-width: 1024px) {
    .settings-page { padding: 16px 12px 60px; }
    .settings-page .card { padding: 16px; }
    .settings-page .card-row { grid-template-columns: 1fr; }
    .settings-page .env-selector { grid-template-columns: 1fr 1fr; }
    .settings-page .inline-add { flex-wrap: wrap; }

    /* Tab bar — 2 列 grid，整齐不截字 */
    .settings-page .tab-nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 3px;
        padding: 4px;
    }
    .settings-page .tab-btn {
        flex: none !important;
        padding: 9px 8px;
        font-size: 12px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* form-row 全部变 1 栏 */
    .settings-page .form-row { grid-template-columns: 1fr; }
    .settings-page .form-row-2 { grid-template-columns: 1fr; }
    .settings-page .form-row-3 { grid-template-columns: 1fr; }
    .settings-page .form-row-4 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .settings-page .form-row-4 { grid-template-columns: 1fr; }
    .settings-page .tab-nav { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {

    /* card-header — 通用手机：search 独占第一行，controls 第二行 */
    .card-header {
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    /* First child div (search + select): full width row */
    .card-header > div:first-child {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    /* Second child div (Options + btn-new/btn-add): right-aligned */
    .card-header > div:last-child:not(.header-buttons) {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        justify-content: flex-end !important;
    }
    /* search-box fills available space in first row */
    .card-header .search-box {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    /* select shrinks to fit */
    .card-header select {
        flex-shrink: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        font-size: 13px !important;
        height: var(--ctrl-h) !important;
    }

    /* 隐藏表头 */
    .table-responsive table thead { display: none; }

    /* table wrapper */
    .table-responsive {
        padding: 8px !important;
        background: var(--bg-primary) !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .table-responsive table {
        width: 100% !important;
        max-width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        table-layout: fixed !important;
    }
    /* 防止 card 被撑大 */
    .card { overflow: hidden !important; max-width: 100% !important; }
    .card-body:has(.quote-header) { padding: 14px !important; overflow: visible !important; }
    .card:has(.quote-header) { overflow: visible !important; }
    .card-body { overflow: hidden !important; padding: 0 !important; }

    /* 每行变成卡片 — 白底，有阴影，明显分隔 */
    .table-responsive table:not(.invoice-index-table) tbody tr {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border: 0.5px solid var(--border-med) !important;
        border-radius: var(--radius-md) !important;
        margin: 0 0 10px 0 !important;
        padding: 12px 36px 10px 12px !important;
        background: var(--bg-secondary) !important;
        box-shadow: var(--shadow-sm) !important;
        position: relative !important;
    }
    .table-responsive table:not(.invoice-index-table) tbody tr:last-child { margin-bottom: 0 !important; }
    .table-responsive table:not(.invoice-index-table) tbody tr:hover td { background: transparent !important; }

    /* 所有 td 变成 block */
    .table-responsive table:not(.invoice-index-table) tbody td {
        display: block !important;
        border: none !important;
        padding: 2px 0 !important;
        font-size: 13px !important;
        background: transparent !important;
    }

    /* checkbox 列 — 左上角 absolute */
    .table-responsive table:not(.invoice-index-table) tbody td:first-child {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        width: auto !important;
        padding: 0 !important;
    }

    /* 名字那列 — 缩进让出 checkbox 空间，字体大一点 */
    .table-responsive table:not(.invoice-index-table) tbody td:nth-child(2) {
        padding-left: 26px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        margin-bottom: 3px !important;
        color: var(--text-primary) !important;
    }

    /* 其余信息列 — 小字灰色，缩进对齐 */
    .table-responsive table:not(.invoice-index-table) tbody td:nth-child(3),
    .table-responsive table:not(.invoice-index-table) tbody td:nth-child(4),
    .table-responsive table:not(.invoice-index-table) tbody td:nth-child(5) {
        padding-left: 26px !important;
        color: var(--text-secondary) !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    /* Actions 列 — 右上角 absolute */
    .table-responsive table:not(.invoice-index-table) tbody td:last-child {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        padding: 0 !important;
    }

    /* 空内容隐藏 */
    .table-responsive table:not(.invoice-index-table) tbody td:empty { display: none !important; }
}

@media (max-width: 1024px) {
    .table-responsive table tbody td small {
        color: var(--text-secondary) !important;
        font-size: 12px !important;
    }
}

@media (max-width: 1024px) {
    .card-header .search-box {
        border: 1.5px solid rgba(0,0,0,0.25) !important;
        background: #fff !important;
        border-radius: var(--radius-sm) !important;
    }
    .search-box input {
        border: none !important;
        background: transparent !important;
    }
}

@media (max-width: 1024px) {
    .table-responsive table tbody td:first-child input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        cursor: pointer !important;
        position: relative !important;
    }
    .table-responsive table tbody td:first-child input[type="checkbox"]::before {
        content: '' !important;
        position: absolute !important;
        top: -12px !important;
        left: -12px !important;
        right: -12px !important;
        bottom: -12px !important;
    }
}

@media (max-width: 1024px) {
    .supplier-bank-td {
        padding-left: 0 !important;
        margin-top: 2px !important;
        color: var(--text-secondary) !important;
        font-size: 12px !important;
    }
    /* align bank with other content rows */
    .table-responsive table tbody td.supplier-bank-td {
        padding-left: 26px !important;
    }
}

@media (max-width: 1024px) {

    /* === FILTER BAR === */
    #invoiceCardHeader {
        flex-direction: column !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    /* Row 1: search + status dropdown */
    #invoiceFilterRow {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
        align-items: center !important;
    }
    #invoiceFilterRow > span:first-child { display: none !important; }
    #invoiceFilterRow .search-box {
        flex: 1 !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
    }
    #invoiceFilterRow #statusFilter {
        flex-shrink: 0 !important;
        width: auto !important;
        max-width: 130px !important;
        min-width: 0 !important;
    }
    /* Hide date row from its original position */
    #invoiceDateRow { display: none !important; }
    /* Hide old action row */
    #invoiceActionRow { display: none !important; }
    /* Row 2: date inputs + Options + New */
    #invoiceRow2 {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
    }
    #invoiceRow2 input[type="date"] {
        flex: 1 !important;
        width: 0 !important;
        min-width: 0 !important;
        border: 1.5px solid rgba(0,0,0,0.25) !important;
        background: #fff !important;
        border-radius: var(--radius-sm) !important;
    }
    #invoiceRow2 .date-sep { 
        color: var(--text-tertiary);
        font-size: 13px;
        flex-shrink: 0;
    }

    /* === INVOICE-INDEX-TABLE MOBILE CARD === */
    .invoice-index-table { display: block !important; border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; }
    .invoice-index-table thead { display: none !important; }
    .invoice-index-table tbody { display: block !important; padding: 8px !important; }
    .invoice-index-table tbody tr {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border: 0.5px solid var(--border-med) !important;
        border-radius: var(--radius-md) !important;
        margin: 0 0 10px 0 !important;
        padding: 12px 36px 10px 12px !important;
        background: var(--bg-secondary) !important;
        box-shadow: var(--shadow-sm) !important;
        position: relative !important;
    }
    .invoice-index-table tbody tr:last-child { margin-bottom: 0 !important; }
    /* Checkbox — absolute top-left */
    .table-responsive .invoice-index-table tbody td:first-child {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        width: auto !important;
        padding: 0 !important;
        display: block !important;
        border: none !important;
        background: transparent !important;
        font-size: inherit !important;
    }
    /* Hide all desktop tds */
    .invoice-index-table td.inv-desktop { display: none !important; }
    /* Options ⋮ — absolute top-right */
    .table-responsive .invoice-index-table tbody td:last-child {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        padding: 0 !important;
        display: block !important;
        border: none !important;
        background: transparent !important;
        width: auto !important;
        overflow: visible !important;
    }
    /* Show mobile card td as block filling the row */
    .invoice-index-table td.inv-mobile-card {
        display: block !important;
        padding: 0 0 0 26px !important;
        border: none !important;
        background: transparent !important;
    }

    /* Row 1: Invoice No + dates */
    .imc-row1 {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 3px;
    }
    .imc-invno {
        font-size: 14px;
        font-weight: 600;
        color: #0066cc;
        cursor: pointer;
        flex-shrink: 0;
    }
    .imc-invno:hover { text-decoration: underline; }
    .imc-dates {
        font-size: 12px;
        color: var(--text-secondary);
        white-space: nowrap;
    }

    /* Row 2: Client name */
    .imc-client {
        font-size: 13px;
        color: #0066cc;
        margin-bottom: 4px;
    }
    .imc-client .client-link { cursor: pointer; }
    .imc-client .client-link:hover { text-decoration: underline; }

    /* Row 3: Total / Balance · Status */
    .imc-amounts {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;
        margin-bottom: 4px;
    }
    .imc-total {
        font-size: 13px;
        font-weight: 500;
        color: var(--text-primary);
    }
    .imc-sep {
        font-size: 13px;
        color: var(--text-tertiary);
    }
    .imc-balance {
        font-size: 13px;
        font-weight: 500;
    }
    .imc-cancelled {
        color: #8e8e93 !important;
        text-decoration: line-through;
        font-weight: 400 !important;
    }
    .imc-status { margin-left: 4px; }

    /* Row 4: LHDN */
    .imc-lhdn {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-top: 2px;
    }
    .imc-lhdn-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-secondary);
        letter-spacing: 0.3px;
    }

    /* Checkbox — absolute top-left (reuse global rule) */
    /* Options btn — absolute top-right (reuse global rule) */
}

/* === MODULE INDEX — FILTER BAR (mobile) ===
   Covers: Quotation, SB, CN, DN, SBCN, SBDN, Payment
   ================================================ */
@media (max-width: 1024px) {
    #quoteCardHeader,
    #sbCardHeader,
    #cnCardHeader,
    #dnCardHeader,
    #sbcnCardHeader,
    #sbdnCardHeader,
    #payCardHeader {
        flex-direction: column !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    /* Row 1: search + controls */
    #quoteFilterRow,
    #sbFilterRow,
    #cnFilterRow,
    #dnFilterRow,
    #sbcnFilterRow,
    #sbdnFilterRow,
    #payFilterRow {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
        align-items: center !important;
    }
    #quoteFilterRow > span:first-child,
    #sbFilterRow > span:first-child,
    #cnFilterRow > span:first-child,
    #dnFilterRow > span:first-child,
    #sbcnFilterRow > span:first-child,
    #sbdnFilterRow > span:first-child,
    #payFilterRow > span:first-child { display: none !important; }

    #quoteFilterRow .search-box,
    #sbFilterRow .search-box,
    #sbFilterRow form.search-box,
    #cnFilterRow .search-box,
    #dnFilterRow .search-box,
    #sbcnFilterRow .search-box,
    #sbdnFilterRow .search-box,
    #payFilterRow .search-box {
        flex: 1 !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
    }
    /* Status / date filters — shrink to fit */
    #quoteFilterRow #statusFilter,
    #sbcnFilterRow #statusFilter,
    #sbdnFilterRow #statusFilter {
        flex-shrink: 0 !important;
        width: auto !important;
        max-width: 130px !important;
        min-width: 0 !important;
    }
    /* Date range inputs in action row — all modules */
    .mod-date-range {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    .mod-date-range input[type="date"] {
        flex: 1 !important;
        width: 0 !important;
        min-width: 0 !important;
        border: 1.5px solid rgba(0,0,0,0.25) !important;
        background: #fff !important;
        border-radius: var(--radius-sm) !important;
    }
    .mod-date-range .date-sep {
        flex-shrink: 0 !important;
    }
    /* Row 2: Options + New (right-aligned) */
    #quoteActionRow,
    #sbActionRow,
    #cnActionRow,
    #dnActionRow,
    #sbcnActionRow,
    #sbdnActionRow,
    #payActionRow {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
    }
    #quoteActionRow .options-dropdown,
    #sbActionRow .options-dropdown,
    #cnActionRow .options-dropdown,
    #dnActionRow .options-dropdown,
    #sbcnActionRow .options-dropdown,
    #sbdnActionRow .options-dropdown,
    #payActionRow .options-dropdown {
        margin-left: auto !important;
    }
    #quoteActionRow .btn-new,
    #sbActionRow .btn-new,
    #cnActionRow .btn-new,
    #dnActionRow .btn-new,
    #sbcnActionRow .btn-new,
    #sbdnActionRow .btn-new,
    #payActionRow .btn-new {
        margin-left: 0 !important;
    }
    /* Hide counts & total-amount badges on mobile */
    #quoteActionRow > span[style*="font-weight:normal"],
    #sbActionRow > span[style*="font-weight:normal"],
    #cnActionRow > span[style*="font-weight:normal"],
    #dnActionRow > span[style*="font-weight:normal"],
    #sbcnActionRow > span[style*="font-weight:normal"],
    #sbdnActionRow > span[style*="font-weight:normal"],
    #payActionRow > span[style*="font-weight:normal"],
    #cnActionRow > span[style*="font-size:12px"],
    #dnActionRow > span[style*="font-size:12px"],
    #sbcnActionRow > span[style*="font-size:12px"],
    #sbdnActionRow > span[style*="font-size:12px"],
    #cnActionRow > span[style*="color:var(--text-secondary)"],
    #dnActionRow > span[style*="color:var(--text-secondary)"],
    #sbcnActionRow > span[style*="color:var(--text-secondary)"],
    #sbdnActionRow > span[style*="color:var(--text-secondary)"] { display: none !important; }
}

@media (max-width: 1024px) {
    /* Edit page: locked buttons wrap */
    .edit-btn-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

@media (max-width: 1024px) {
    /* Hide desktop header-buttons on mobile — replaced by mobile-bottom-bar */
    .header-buttons {
        display: none !important;
    }
    /* Hide items card bottom Add Row + Save row on mobile */
    .card:has(.items-table) > .card-body > div:last-child {
        display: none !important;
    }
    /* Add bottom padding to page so content isn't hidden behind bar */
    .content { padding-bottom: 72px !important; }
}

/* ══════════════════════════════════════════════
   MOBILE BOTTOM BAR — fixed action bar
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .mobile-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        background: #fff;
        border-top: 0.5px solid #d0d0d0;
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
    }
    .mbb-spacer { flex: 1; }
    .mbb-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        border-radius: 8px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }
    .mbb-add-row {
        padding: 0 14px;
        background: #fff;
        color: var(--text-primary, #1d1d1f);
        border: 1px solid rgba(0,0,0,0.22);
    }
    .mbb-add-row:active { background: #f0f0f0; }
    .mbb-secondary {
        width: 38px;
        min-width: 38px;
        padding: 0;
        background: #fff;
        color: var(--text-primary, #1d1d1f);
        border: 1px solid rgba(0,0,0,0.22);
    }
    .mbb-secondary:active { background: #f0f0f0; }
    .mbb-secondary svg { flex-shrink: 0; }
    .mbb-disabled { opacity: 0.4; }
    .mbb-back {
        padding: 0 12px;
        gap: 4px;
        background: #fff;
        color: var(--accent, #0066cc);
        border: 1px solid rgba(0,102,204,0.3);
    }
    .mbb-back:active { background: rgba(0,102,204,0.05); }
    .mbb-back svg { flex-shrink: 0; stroke: var(--accent, #0066cc); }
    .mbb-save {
        padding: 0 18px;
        background: var(--text-primary, #1d1d1f);
        color: #fff;
        border: none;
        font-weight: 600;
    }
    .mbb-save:active { opacity: 0.85; }

    /* Options menu — moved to body by JS, pops up above bottom bar */
    .mbb-options-menu {
        display: none !important;
        position: fixed !important;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        right: 12px !important;
        top: auto !important;
        left: auto !important;
        z-index: 210 !important;
        background: #fff !important;
        border: 0.5px solid var(--border-med, #d0d0d0) !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
        min-width: 160px !important;
        overflow: hidden !important;
    }
    .mbb-options-menu.show {
        display: block !important;
    }
    /* Overlay behind options menu */
    .mbb-options-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 205;
        background: transparent;
    }
    .mbb-options-overlay.show {
        display: block;
    }
}
@media (min-width: 1025px) {
    .mobile-bottom-bar { display: none !important; }
    .mbb-options-overlay { display: none !important; }
}

/* Options dropdown in edit header — prevent card overflow clipping */
.card:has(.quote-header) { overflow: visible !important; }
.card:has(.quote-header) .card-body { overflow: visible !important; }

@media (max-width: 1024px) {

    /* === EDIT PAGE — HEADER CARD ===
       Layout (mobile):
         [quote-info: col]
           qi-row 1: [Invoice No ──────] [Term ▾]
           qi-row 2: [Date: ──────────] [Due: ──]
         [header-buttons: PDF Send Options ← Back Save]
       ================================================ */
    .quote-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .quote-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .qi-row {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    /* Invoice No: grows to fill row */
    .qi-row .quote-no-input {
        flex: 1 !important;
        min-width: 0 !important;
        width: 0 !important;
        font-size: 15px !important;
        box-sizing: border-box !important;
    }
    /* Term: fixed, doesn't grow */
    .qi-row .qi-term {
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .qi-row .qi-term select {
        min-width: 80px !important;
        max-width: 120px !important;
    }
    /* Date / Due: each takes half the row */
    .qi-row .quote-date {
        flex: 1 !important;
        min-width: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .qi-row .quote-date input[type="date"] {
        flex: 1 !important;
        min-width: 0 !important;
        width: 0 !important;
        box-sizing: border-box !important;
    }

    /* === Mobile reorder: Remarks moves below Totals, above Terms === */
    #invoiceForm {
        display: flex !important;
        flex-direction: column !important;
    }
    .two-col {
        display: contents !important;
    }
    /* Also break open Terms+Totals wrapper */
    #invoiceForm > div[style*="gap:16px"][style*="margin-top"] {
        display: contents !important;
    }
    /* Header card */
    #invoiceForm > .card:has(.quote-header) { order: 1 !important; }
    #clientCard { order: 2 !important; }
    /* Items card */
    #invoiceForm > .card:has(.items-table) { order: 3 !important; }
    /* Totals (width:380px div) */
    #invoiceForm > div[style*="gap:16px"][style*="margin-top"] > div[style*="width:380px"],
    div[style*="width:380px;flex-shrink:0"],
    div[style*="width:380px; flex-shrink:0"] { order: 4 !important; width: 100% !important; }
    /* Remarks */
    #remarkCard { order: 5 !important; }
    /* Terms (flex:1 div containing termsCard) */
    #invoiceForm > div[style*="gap:16px"][style*="margin-top"] > div[style*="flex:1"],
    div[style*="flex:1"]:has(#termsCard) { order: 6 !important; width: 100% !important; }

    /* === Self-Billed edit: same mobile reorder pattern === */
    #mainForm {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Break open Terms+Totals wrapper in SB */
    #mainForm > div[style*="gap:16px"][style*="margin-top"] {
        display: contents !important;
    }
    /* SB Header card */
    #headerCard { order: 1 !important; }
    /* SB Supplier card */
    #supplierCard { order: 2 !important; }
    /* SB Items card */
    #itemsCard { order: 3 !important; }
    /* SB Totals */
    #totalsWrap { order: 4 !important; width: 100% !important; }
    /* SB Remarks — already covered by generic #remarkCard order:5 rule above */
    /* SB Terms */
    #termsWrap { order: 6 !important; width: 100% !important; }

    /* Supplier card header: same row layout as Client card */
    #supplierCard .card-header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    #supplierCard .card-header > .client-actions {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    /* Remarks card header: center text */
    #remarkCard .card-header {
        justify-content: center !important;
    }

    /* Client card header: To (Client) + Add/Change/Edit on same row */
    #clientCard .card-header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    #clientCard .card-header > .client-actions {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    /* ── Client info-box — collapsible with fade ── */
    #clientCard .card-body { overflow: visible !important; padding: 12px !important; }
    .info-box {
        background: #f9f9f9 !important;
        border: 0.5px solid #e8e8e8 !important;
        border-radius: 10px !important;
        padding: 14px !important;
        min-height: 0 !important;
        cursor: pointer !important;
        position: relative !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .info-box .name {
        font-weight: 600 !important;
        font-size: 15px !important;
        margin-bottom: 4px !important;
    }
    /* Collapse: hide address lines behind fade */
    .info-box .mbb-addr-wrap {
        max-height: 20px;
        overflow: hidden;
        position: relative;
        transition: max-height 0.3s ease;
    }
    .info-box .mbb-addr-wrap::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 20px;
        background: linear-gradient(transparent, #f9f9f9);
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    /* Phone row — hidden when collapsed */
    .info-box .mbb-tel-row {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
        margin: 0;
        padding: 0;
        border-top: 0.5px solid transparent;
    }
    /* Expanded state */
    .info-box.mbb-expanded .mbb-addr-wrap {
        max-height: 200px;
    }
    .info-box.mbb-expanded .mbb-addr-wrap::after {
        opacity: 0;
    }
    .info-box.mbb-expanded .mbb-tel-row {
        max-height: 60px;
        opacity: 1;
        margin-top: 8px;
        padding-top: 8px;
        border-top-color: #e0e0e0;
    }

    /* ══════════════════════════════════════════════
       ITEMS TABLE — inline-flex card layout
       Works in Safari without JS DOM manipulation
       ══════════════════════════════════════════════ */

    .items-table-wrap { overflow-x: visible !important; }

    /* Escape table context */
    .items-table               { display: block !important; width: 100% !important; min-width: 0 !important; }
    .items-table thead         { display: none !important; }
    .items-table tbody         { display: block !important; width: 100% !important; }
    .items-table tbody tr.item-row {
        display: block !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--radius-md) !important;
        margin: 0 0 10px 0 !important;
        padding: 8px !important;
        background: var(--bg-secondary) !important;
        box-sizing: border-box !important;
        width: 100% !important;
        position: relative !important;
        font-size: 0 !important;
    }
    .items-table tbody tr.item-row:last-child { margin-bottom: 0 !important; }

    /* All td inline-flex by default, font-size restored */
    .items-table tbody td {
        display: inline-flex !important;
        align-items: center !important;
        vertical-align: middle !important;
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
    }

    /* ── Row 1: No(20px) + Desc(fill) + Delete(28px) = 100% width → Row 2 wraps ── */
    .items-table td.col-drag   { display: none !important; }

    .items-table td.col-no {
        width: 20px !important;
        flex-shrink: 0 !important;
        font-size: 11px !important;
        color: var(--text-secondary) !important;
        justify-content: center !important;
    }
    .items-table td:nth-child(3) {
        width: calc(100% - 44px) !important;
        min-width: 0 !important;
    }
    .items-table td:nth-child(3) textarea {
        width: 100% !important; height: 34px !important; min-height: 34px !important;
        box-sizing: border-box !important; font-size: 13px !important; resize: none !important;
    }
    .items-table td.col-action {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ── Row 2: four tds inline, must not wrap to line 3 ── */
    .items-table td.col-qty,
    .items-table td.col-price,
    .items-table td.col-total,
    .items-table td.col-code {
        width: auto !important;
        height: 32px !important;
        gap: 3px !important;
        margin-top: 6px !important;
        margin-right: 4px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }
    .items-table td.col-qty   { margin-left: 20px !important; }
    .items-table td.col-code  { margin-left: 0px !important; margin-right: 0 !important; }

    /* Labels */
    .items-table td.col-qty::before   { content: 'Qty';   font-size: 10px; color: var(--text-secondary); margin-right: 2px; }
    .items-table td.col-price::before { content: 'Price'; font-size: 10px; color: var(--text-secondary); margin-right: 2px; }
    .items-table td.col-total::before { content: 'Total'; font-size: 10px; color: var(--text-secondary); margin-right: 2px; }
    .items-table td.col-code::before  { content: 'Class'; font-size: 10px; color: var(--text-secondary); margin-right: 2px; }

    /* Inputs */
    .items-table td.col-qty input {
        width: 40px !important; height: 28px !important;
        font-size: 12px !important; text-align: center !important; box-sizing: border-box !important;
    }
    .items-table td.col-price input {
        width: 70px !important; height: 28px !important;
        font-size: 12px !important; text-align: right !important; box-sizing: border-box !important;
    }
    .items-table td.col-total { font-size: 14px !important; }
    .items-table td.col-total .item-total,
    .items-table .item-total {
        background: transparent !important; padding: 0 !important;
        font-size: 14px !important; font-weight: 700 !important; color: var(--text-primary) !important;
        display: inline !important; line-height: 1 !important;
    }
    .items-table .code-picker-btn {
        font-size: 11px !important; padding: 3px 7px !important;
        height: 26px !important; width: auto !important;
    }

    /* Terms + Totals */
    div[style*="display:flex;gap:16px;margin-top:16px"],
    div[style*="display:flex; gap:16px; margin-top:16px"] { flex-direction: column !important; }
    div[style*="width:380px;flex-shrink:0"],
    div[style*="width:380px; flex-shrink:0"] { width: 100% !important; }

    /* ── Payments table → card layout ── */
    .payments-table { border-collapse: separate !important; border-spacing: 0 !important; overflow: visible !important; }
    .payments-table thead { display: none !important; }
    .payments-table tbody { overflow: visible !important; }
    .payments-table tbody tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--radius-md) !important;
        margin: 0 0 10px 0 !important;
        padding: 10px 36px 10px 12px !important;
        background: var(--bg-secondary) !important;
        position: relative !important;
        gap: 0 8px !important;
        overflow: visible !important;
    }
    .payments-table tbody td {
        display: inline !important;
        border: none !important;
        padding: 0 !important;
        font-size: 13px !important;
    }
    /* ⋮ button darker */
    .payments-table .options-btn {
        color: var(--text-primary) !important;
        font-size: 18px !important;
        font-weight: 700 !important;
    }
    /* Row 1: Date + Amount + Method + Reference — inline */
    .payments-table tbody td:nth-child(1) {
        font-weight: 600 !important;
    }
    .payments-table tbody td:nth-child(2) {
        font-weight: 600 !important;
        color: #34c759 !important;
    }
    .payments-table tbody td:nth-child(3) { font-size: 12px !important; }
    .payments-table tbody td:nth-child(4) {
        font-size: 12px !important;
        color: var(--text-secondary) !important;
    }
    /* Row 2: Notes — full width */
    .payments-table tbody td:nth-child(5) {
        display: block !important;
        width: 100% !important;
        font-size: 12px !important;
        color: var(--text-secondary) !important;
        margin-top: 2px !important;
    }
    /* Row 3: By — full width */
    .payments-table tbody td:nth-child(6) {
        display: block !important;
        width: 100% !important;
        font-size: 11px !important;
        color: var(--text-tertiary) !important;
        margin-top: 2px !important;
    }
    /* Actions — top right */
    .payments-table tbody td:last-child {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        padding: 0 !important;
        display: block !important;
        width: auto !important;
        overflow: visible !important;
    }
    .payments-table .options-dropdown {
        overflow: visible !important;
    }
    .payments-table .options-menu {
        z-index: 100 !important;
        position: absolute !important;
        right: 0 !important;
        top: 100% !important;
    }
    #paymentsSection .card-body {
        padding-bottom: 60px !important;
    }

    /* ── Payment Index — mobile card (no checkbox, left-aligned) ── */
    #payCardHeader ~ .card-body .invoice-index-table td.inv-mobile-card {
        padding-left: 12px !important;
    }
    #payCardHeader ~ .card-body .invoice-index-table tbody tr {
        padding: 12px 36px 10px 12px !important;
    }
    /* Payment has no checkbox — first td is inv-desktop, must stay hidden */
    #payCardHeader ~ .card-body .table-responsive .invoice-index-table tbody td:first-child {
        position: static !important;
        display: none !important;
    }

    /* ── Summary section mobile ── */
    .summary-section .summary-header {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .summary-section .method-breakdown {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .summary-section .method-item {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
    }

    /* ── Terms & Conditions — collapsed by default on mobile ── */
    #termsBody {
        display: none !important;
    }
    #termsBody.terms-open {
        display: block !important;
        padding: 12px !important;
    }
    #termsToggleIcon { display: inline !important; }
}

@media (min-width: 1025px) {
    /* Restore full table rendering — all !important to beat mobile rules */
    table.items-table        { display: table !important; width: 100% !important; min-width: 0 !important; }
    table.items-table thead  { display: table-header-group !important; }
    table.items-table tbody  { display: table-row-group !important; width: auto !important; }
    table.items-table tbody tr.item-row {
        display: table-row !important;
        border: none !important;
        border-bottom: 0.5px solid var(--border-color) !important;
        border-radius: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        margin: 0 !important;
        grid-template-areas: unset !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
    }
    table.items-table tbody td {
        display: table-cell !important;
        padding: 8px 6px !important;
        vertical-align: middle !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
    }
    /* Restore all hidden tds */
    table.items-table td.col-price,
    table.items-table td.col-total,
    table.items-table td.col-code,
    table.items-table td.col-action { display: table-cell !important; }
    /* col-qty: normal table-cell */
    table.items-table td.col-qty {
        display: table-cell !important;
        height: auto !important;
        flex: none !important;
        grid-area: unset !important;
    }
    table.items-table td.col-qty::before { content: none !important; }
    .m-lbl { display: none !important; }
}

@media (max-width: 1024px) {
    /* ── Prevent iOS Safari auto-zoom on input focus (requires >= 16px) ── */
    input[type="text"],
    input[type="date"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select,
    .form-control,
    .form-select {
        font-size: 16px !important;
    }

    /* ── Deepen all input/textarea/select borders on mobile ── */
    input[type="text"],
    input[type="date"],
    input[type="number"],
    input[type="email"],
    textarea,
    select,
    .form-control,
    .form-select {
        border: 1.5px solid rgba(0,0,0,0.28) !important;
    }
    /* Preserve summary section dark-theme date inputs */
    .summary-section input[type="date"] {
        border: 1px solid rgba(255,255,255,0.3) !important;
        background: rgba(255,255,255,0.15) !important;
        color: white !important;
        font-size: 12px !important;
        color-scheme: dark !important;
    }
    input[type="text"]:focus,
    input[type="date"]:focus,
    textarea:focus,
    select:focus,
    .form-control:focus {
        border-color: var(--accent, #0066cc) !important;
        outline: none !important;
    }
    .summary-section input[type="date"]:focus {
        border-color: rgba(255,255,255,0.6) !important;
    }

    /* ── Add Row button border darker ── */
    .btn-secondary {
        border: 1px solid rgba(0,0,0,0.22) !important;
    }

    /* ── Items table card border already set above, also deepen items-table-wrap card ── */
    .items-table tbody tr.item-row {
        border: 1.5px solid rgba(0,0,0,0.18) !important;
    }
}

@media (max-width: 1024px) {
    /* ── Swap Terms & Totals order: Totals first, Terms below ── */
    div[style*="display:flex;gap:16px;margin-top:16px"],
    div[style*="display:flex; gap:16px; margin-top:16px"] {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Totals (second child, width:380px) → show first */
    div[style*="display:flex;gap:16px;margin-top:16px"] > div[style*="width:380px"],
    div[style*="display:flex; gap:16px; margin-top:16px"] > div[style*="width:380px"] {
        order: 1 !important;
        width: 100% !important;
    }
    /* Terms (first child, flex:1) → show second */
    div[style*="display:flex;gap:16px;margin-top:16px"] > div[style*="flex:1"],
    div[style*="display:flex; gap:16px; margin-top:16px"] > div[style*="flex:1"] {
        order: 2 !important;
        width: 100% !important;
    }
}

@media (max-width: 1024px) {

    /* Hide invoiceDateRow without display:none (Safari inline style override) */
    #invoiceDateRow {
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        flex: 0 0 0 !important;
        visibility: hidden !important;
        position: absolute !important;
        pointer-events: none !important;
    }

    .qi-row .quote-no-input { flex: 1 1 0 !important; min-width: 0 !important; width: 0 !important; }
    .qi-row .qi-term { flex: 0 0 140px !important; width: 140px !important; max-width: 140px !important; overflow: hidden !important; }
    #paymentTermSelect {
        width: 100% !important; min-width: 0 !important; max-width: none !important;
        font-size: 13px !important; height: 34px !important;
        flex: 1 1 0 !important; box-sizing: border-box !important;
        padding: 0 24px 0 8px !important;
    }
    .header-buttons a[href*="pdf.php"] {
        font-size: 0 !important; width: 36px !important; min-width: 36px !important; max-width: 36px !important;
        padding: 0 !important; display: inline-flex !important; align-items: center !important;
        justify-content: center !important; flex-shrink: 0 !important;
    }
    .header-buttons a[href*="pdf.php"]::before {
        content: ''; display: block; width: 16px; height: 16px; pointer-events: none; flex-shrink: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.8'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E") no-repeat center/contain;
    }
    .header-buttons a.btn[onclick*="openSendModal"] {
        font-size: 0 !important; width: 36px !important; min-width: 36px !important; max-width: 36px !important;
        padding: 0 !important; display: inline-flex !important; align-items: center !important;
        justify-content: center !important; flex-shrink: 0 !important; gap: 0 !important;
    }
    .header-buttons a[onclick*="openSendModal"] svg { width: 15px !important; height: 15px !important; pointer-events: none !important; flex-shrink: 0 !important; display: block !important; }
    .header-buttons .options-dropdown > button {
        font-size: 0 !important; width: 36px !important; min-width: 36px !important; max-width: 36px !important;
        padding: 0 !important; display: inline-flex !important; align-items: center !important;
        justify-content: center !important; flex-shrink: 0 !important;
    }
    .header-buttons .options-dropdown > button svg { display: none !important; }
    .header-buttons .options-dropdown > button::before {
        content: ''; display: block; width: 16px; height: 16px; pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Ccircle cx='12' cy='5' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='19' r='1.8'/%3E%3C/svg%3E") no-repeat center/contain;
    }
    .header-buttons > a[href="index.php"] { font-size: 13px !important; padding: 0 10px !important; flex-shrink: 0 !important; }
}

@media (min-width: 1025px) {
    .quote-header { flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; gap: 16px !important; }
    .quote-info { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px !important; width: auto !important; }
    .qi-row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 12px !important; width: auto !important; }
    .qi-row .quote-no-input { flex: 0 0 auto !important; width: 200px !important; min-width: 0 !important; font-size: 18px !important; }
    .qi-row .qi-term { flex: 0 0 auto !important; width: auto !important; max-width: none !important; overflow: visible !important; }
    #paymentTermSelect { min-width: 110px !important; width: auto !important; max-width: none !important; font-size: 13px !important; height: 34px !important; flex: 0 0 auto !important; padding: 0 24px 0 10px !important; }
    .qi-row .quote-date { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
    .qi-row .quote-date input[type="date"] { flex: 0 0 auto !important; width: auto !important; height: 34px !important; }
    .header-buttons { flex-wrap: nowrap !important; gap: 8px !important; }
    #termsToggleIcon { display: none !important; }
    #termsBody { max-height: none !important; overflow: visible !important; padding: 12px !important; }
}

/* ── Product Module: Mobile ── */
@media (max-width: 1024px) {

    /* Edit form stacks vertically */
    .form-row-product {
        flex-direction: column;
        gap: 10px;
    }
    .form-group-product.fg-wide {
        flex: 1;
    }
    .product-form {
        max-width: none !important;
        width: 100% !important;
        padding: 14px !important;
        box-sizing: border-box !important;
    }

    /* Product edit: hide header Back+Save on mobile, show bottom bar */
    .product-header-btns {
        display: none !important;
    }
    .product-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        background: #fff;
        border-top: 0.5px solid #d0d0d0;
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
    }

    /* Categories + New buttons row: same pattern as quoteActionRow */
    .product-actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .product-actions .btn-action-blue {
        margin-left: auto !important;
    }
    .product-actions .btn-new {
        margin-left: 0 !important;
    }

    /* Product list: card layout */
    #productTable thead { display: none !important; }

    #productTable tbody tr {
        display: block !important;
        position: relative;
        background: #fff;
        border: 0.5px solid var(--border-color);
        border-radius: 12px;
        margin-bottom: 8px;
        min-height: 88px;
        overflow: hidden;
        padding: 10px 36px 10px 96px !important;
    }

    #productTable tbody td {
        display: none !important;
        border: none !important;
        padding: 0 !important;
        text-align: left !important;
    }

    /* Image — left side, square crop */
    #productTable tbody td:nth-child(1) {
        display: block !important;
        position: absolute;
        top: 8px;
        left: 8px;
        width: 72px !important;
        height: 72px !important;
        overflow: hidden !important;
        border-radius: 8px !important;
    }
    #productTable tbody td:nth-child(1) .prod-img {
        width: 72px !important;
        height: 72px !important;
        border-radius: 8px !important;
        border: none !important;
        background: #f0f0f0 !important;
    }
    #productTable tbody td:nth-child(1) .prod-img img {
        width: 72px !important;
        height: 72px !important;
        object-fit: cover !important;
        display: block !important;
    }
    #productTable tbody td:nth-child(1) .prod-img svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* Row 1: Product name only */
    #productTable tbody td:nth-child(2) {
        display: block !important;
        padding: 0 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }
    #productTable tbody td:nth-child(2) .prod-sku {
        display: none !important;
    }

    /* Row 2: SKU + Category — same line */
    #productTable tbody td:nth-child(3) {
        display: block !important;
        padding: 3px 0 0 0 !important;
        font-size: 12px !important;
    }
    #productTable tbody td:nth-child(3) .prod-sku-mobile {
        display: inline !important;
        color: var(--text-secondary) !important;
    }

    /* Unit — hide */
    /* Cost — hide */

    /* Row 3: Price + Status */
    #productTable tbody td:nth-child(6) {
        display: inline-block !important;
        padding: 3px 0 0 0 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
    }

    /* Status badge — inline after price */
    #productTable tbody td:nth-child(7) {
        display: inline-block !important;
        padding: 3px 0 0 6px !important;
    }

    /* Actions ⋮ — top right */
    #productTable tbody td:nth-child(8) {
        display: block !important;
        position: absolute;
        top: 8px;
        right: 8px;
    }

    /* Empty state row */
    #productTable tbody td[colspan] {
        display: block !important;
        position: static !important;
        text-align: center !important;
        padding: 30px 0 !important;
        width: 100% !important;
    }

    /* Category modal full width on mobile */
    #categoryModal .modal {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 20px !important;
    }
}