:root {
    /* Deep Blue */
    --secondary-color: #3b82f6;
    /* Bright Blue */
    --accent-color: #60a5fa;
    /* Light Blue */
    --text-color: #334155;
    /* Slate 700 */
    --bg-color: #f1f5f9;
    /* Slate 100 */
    --surface-color: #ffffff;
    --border-color: #e2e8f0;
    /* Slate 200 */
    --success-color: #10b981;
    /* Emerald */
    --danger-color: #ef4444;
    /* Red */
    --warning-color: #f59e0b;
    /* Amber */
    --panel-width: 350px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background: var(--bg-color);
    height: 100vh;
    padding: 5px;
    color: var(--text-color);
    font-size: 14px;
    overflow: hidden;
}



.container {
    max-width: 100%;
    margin: 0 auto;
    background: var(--surface-color);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    height: calc(100vh - 12px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

/* Header */
.header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--surface-color);
    flex-shrink: 0;
}

.header h1 {
    font-size: 20px;
    color: var(--primary-color);
    font-weight: 800;
}

.status-group {
    display: flex;
    gap: 5px;
    align-items: center;
}

.api-status {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 15px;
    font-weight: 700;
}

.connected {
    background: #dcfce7;
    color: #166534;
}

.disconnected {
    background: #fee2e2;
    color: #991b1b;
}

.sync-status {
    display: none;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.3s;
}

.sync-waiting {
    background: var(--warning-color);
    color: white;
}

.sync-running {
    background: var(--secondary-color);
    color: white;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

.alert {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    min-width: 320px;
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    display: none;
    animation: slideIn 0.3s ease-out;
    background: var(--surface-color);
    border-left: 4px solid var(--primary-color);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Tabs */
.tabs {
    display: flex;
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    padding: 0 10px;
}

.tab {
    padding: 14px 24px;
    /* [RESIZE] Desktop: Larger padding */
    cursor: pointer;
    border: none;
    background: transparent;
    font-weight: 600;
    color: #64748b;
    /* Slate 500 */
    font-size: 18px;
    /* [RESIZE] Desktop: Larger font */
    /* Optimized: only transition necessary properties for better mobile performance */
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    /* Hint for browser to optimize rendering */
    will-change: color, border-color;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tab:hover {
    color: var(--primary-color);
    background: #f8fafc;
}

.tab.active {
    background: transparent;
    color: var(--secondary-color);
    border-bottom: 2px solid var(--secondary-color);
}

/* --- MULTI-BADGE SYSTEM (NEW, PRO, VIP, SPECIAL) --- */
.tab-badge {
    position: relative;
    overflow: visible !important;
}

/* Badge Base Styling */
.tab-badge::after {
    position: absolute;
    color: white;
    text-transform: uppercase;
    font-weight: 800;
    border-radius: 10px;
    z-index: 10;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Desktop Badge Positioning */
.tab.tab-badge::after {
    top: -4px;
    right: 4px;
    font-size: 8px;
    padding: 2px 6px;
    letter-spacing: 0.5px;
}

/* Mobile Badge Positioning */
.mobile-tab.tab-badge::after {
    top: 5px;
    right: 5px;
    font-size: 7px;
    padding: 1px 4px;
    letter-spacing: 0.3px;
    border-radius: 8px;
}

/* Badge Types */
.badge-special::after {
    content: 'Special';
    background: linear-gradient(45deg, #6366f1, #a855f7);
}

.badge-new::after {
    content: 'New';
    background: linear-gradient(45deg, #10b981, #34d399);
}

.badge-pro::after {
    content: 'Pro';
    background: linear-gradient(45deg, #fbbf24, #f59e0b);
}

.badge-vip::after {
    content: 'Vip';
    background: linear-gradient(45deg, #ef4444, #f97316);
}

/* Special Tab Content Styling (Keep existing indigo look for P2P) */
.tab-special {
    color: #6366f1 !important;
    background: linear-gradient(to bottom, transparent, rgba(99, 102, 241, 0.05)) !important;
}

.tab-special i,
.tab-special svg {
    filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.5));
}

.tab-special.active {
    background: rgba(99, 102, 241, 0.1) !important;
    border-bottom-color: #6366f1 !important;
}

/* Mobile Special Enhancement */
.mobile-tab-special {
    background: linear-gradient(to bottom, transparent, rgba(99, 102, 241, 0.05)) !important;
}

.mobile-tab-special i,
.mobile-tab-special span {
    color: #6366f1 !important;
}

.mobile-tab-special i {
    filter: drop-shadow(0 0 3px rgba(99, 102, 241, 0.3));
}

.mobile-tab-special.active {
    background: rgba(99, 102, 241, 0.1) !important;
}

.tab-content {
    display: none;
    flex: 1;
    padding: 8px 15px 15px 15px;
    overflow: hidden;
}

.tab-content.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Warranty Search Bar */
.warranty-search-bar {
    display: flex;
    gap: 10px;
}

.warranty-search-bar button {
    min-width: 120px;
}

@media screen and (max-width: 768px) {
    .warranty-search-bar {
        flex-wrap: wrap;
    }

    .warranty-search-bar input {
        flex: 1 1 100% !important;
        /* Force full width on new row */
        width: 100% !important;
    }

    .warranty-search-bar button {
        flex: 1;
        /* Share row */
        min-width: auto;
    }
}

/* Warranty Footer (Actions) */
.warranty-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

@media screen and (max-width: 768px) {
    .warranty-footer {
        flex-wrap: wrap;
    }

    .warranty-footer button {
        flex: 1;
        /* Grow to fill space */
    }

    /* Close button full width at bottom */
    .warranty-footer button.btn-warning {
        flex-basis: 100%;
        order: 3;
        /* Force to bottom */
        margin-top: 5px;
    }

    /* Save/Print share top row */
    .warranty-footer button.btn-success,
    .warranty-footer button.btn-info {
        flex-basis: 48%;
        /* Share row */
        order: 1;
    }
}

/* Warranty KPI Cards */
.warranty-kpi-card {
    transition: all 0.3s ease;
}

.warranty-kpi-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    opacity: 1 !important;
}

.warranty-kpi-card:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Layout */
.split-layout {
    display: grid;
    grid-template-columns: var(--panel-width) 1fr;
    gap: 20px;
    height: 100%;
    overflow: hidden;
}

.panel-left {
    height: 100%;
    overflow-y: auto;
    padding-right: 5px;
    padding-top: 4px;
    /* Thêm để tránh bị mất dấu tích xanh ở trên */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 5px;
}

.panel-right {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    margin-top: 4px;
    height: calc(100% - 4px);
}

/* Forms & Inputs */
.input-box {
    background: #f8fafc;
    /* Slate 50 */
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

/* Push customer/checkout info to bottom */
.push-to-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Global: Hide Product Code (SKU) Column */
#productTable th:nth-child(1),
#productTable td:nth-child(1),
#inventoryTable th:nth-child(1),
#inventoryTable td:nth-child(1) {
    display: none !important;
}

.box-title {
    margin-bottom: 10px;
    font-size: 17px;
    color: var(--primary-color);
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}

.form-group {
    margin-bottom: 10px;
    position: relative;
}

label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 15px;
    color: var(--text-color);
}

input,
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 15px;
    transition: 0.2s;
    font-family: inherit;
    background: var(--surface-color);
}

input:focus,
textarea:focus {
    border-color: var(--secondary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Buttons */
button {
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    background: var(--primary-color);
    color: white;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

button:hover {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-success {
    background: var(--success-color);
}

.btn-danger {
    background: var(--danger-color);
}

.btn-info {
    background: var(--secondary-color);
}

.btn-warning {
    background: var(--warning-color);
    color: white;
}

.btn-sm {
    padding: 0;
    font-size: 14px;
    min-width: auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.w-100 {
    width: 100%;
}

.row-2 {
    display: flex;
    gap: 10px;
}

/* Tables */
.table-wrapper {
    overflow-x: auto;
    flex: 1;
    /* Allow it to grow and fill available space */
    overflow-y: auto;
    /* Enable vertical scrolling */
    min-height: 0;
    /* Crucial for nested flex scrolling */
}

.sub-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
    background: #f8fafc;
    /* Slate 50 */
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 5;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    /* Slate 600 */
}

td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

tr:hover {
    background-color: #f8fafc;
}

.bold-text {
    font-weight: 700 !important;
}

.text-red {
    color: var(--danger-color) !important;
}

.text-green {
    color: var(--success-color) !important;
}

/* Checkout Section */
.checkout-section {
    background: #f8fafc;
    /* Match Input Box */
    border-top: 1px solid var(--border-color);
    border-radius: 8px;
    /* Round corners */
    padding: 10px 15px;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
    z-index: 10;
    margin-top: auto;
}

.checkout-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.combo-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fffbeb;
    /* Amber 50 */
    border-radius: 6px;
    border: 1px solid #fcd34d;
    margin-bottom: 5px;
}

.combo-switch label {
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
}

.combo-switch input {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.calc-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    margin-bottom: 5px;
}

.calc-row span.label {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
}

.calc-row .value {
    font-weight: 800;
    font-size: 20px;
    color: var(--danger-color);
    min-width: 100px;
    text-align: right;
}

.final-price-input {
    width: 140px;
    text-align: right;
    font-weight: 800;
    color: var(--danger-color);
    background: #fef2f2;
    border: 2px solid var(--danger-color);
    font-size: 18px;
    border-radius: 4px;
    padding: 4px;
}

/* Config Panel */
#configPanel {
    display: none;
    position: fixed;
    top: 60px;
    right: 20px;
    width: 300px;
    padding: 20px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    z-index: 999;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Report Panel Fix */
#sub-panel-revenue {
    height: 100%;
}

/* Report Cards */
.report-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.card {
    background: var(--surface-color);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border-color);
}

@media screen and (max-width: 768px) {
    .report-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card {
        padding: 25px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        border-width: 2px;
        height: auto !important;
        /* Reset height if inline style has it */
    }

    .card h3 {
        font-size: 20px !important;
        margin-bottom: 15px !important;
    }

    .card .value {
        font-size: 38px !important;
        line-height: 1.1;
    }
}

/* Modal Footer Fix */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.modal-footer button {
    margin: 0 !important;
}

@media screen and (max-width: 480px) {
    .modal-footer button {
        flex: 1;
        justify-content: center;
        min-width: 80px;
        white-space: nowrap;
    }
}

.card h3 {
    font-size: 18px;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 800;
}

.card .value {
    font-size: 42px;
    font-weight: 800;
    color: var(--text-color);
}

.card.revenue .value {
    color: var(--secondary-color);
}

.card.profit .value {
    color: var(--success-color);
}

.card.orders .value {
    color: var(--warning-color);
}

/* Cart Table Specifics */
#cartTable {
    font-size: 13px;
    width: 100%;
    table-layout: fixed;
}

#cartTable th {
    padding: 5px 4px;
    /* Reduced from 8px */
    word-wrap: break-word;
    line-height: 1.3;
    font-size: 13px;
    /* Reduced from 16px */
}

#cartTable td {
    padding: 5px 4px;
    /* Reduced from 8px */
    word-wrap: break-word;
    line-height: 1.3;
}

#cartTable th:nth-child(1),
#cartTable td:nth-child(1) {
    width: 40%;
    font-weight: 600;
}

#cartTable th:nth-child(2),
#cartTable td:nth-child(2) {
    width: 5%;
    text-align: center;
}

#cartTable th:nth-child(3),
#cartTable td:nth-child(3) {
    width: 20%;
    text-align: left;
}

#cartTable th:nth-child(4),
#cartTable td:nth-child(4) {
    width: 20%;
    text-align: left;
    font-weight: 700;
    color: var(--danger-color);
}

#cartTable th:nth-child(5),
#cartTable td:nth-child(5) {
    width: 5%;
    text-align: center;
}

#cartTable tfoot {
    display: table-footer-group;
}

#cartTable tfoot tr {
    background: #fef9c3 !important;
}

/* Yellow 100 */
#cartTable tfoot td {
    padding: 8px 4px !important;
}

#cartTable tfoot input {
    font-size: 15px;
    padding: 6px;
    text-align: center;
}

#cartTable tfoot td:nth-child(1) input {
    text-align: left;
}

#cartTable tfoot td:nth-child(3) input {
    text-align: left;
}

/* Grid Input */
.grid-input {
    width: 100%;
    border: 1px solid var(--border-color);
}

/* Cart Inputs Override (Only in Body) */
#cartList input {
    font-size: 13px !important;
    padding: 3px !important;
    margin-top: 2px !important;
    height: auto !important;
}

/* Invoice Box (Default Hidden) */
/* --- PROFESSIONAL INVOICE A5 --- */
.invoice-box {
    width: 148.5mm;
    min-height: 210mm;
    margin: auto;
    padding: 15mm 10mm;
    background: #fff;
    color: #000;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.4;
    box-sizing: border-box;
    display: none;
    /* Hidden by default, shown in pdf-mode */
}

body.pdf-mode .invoice-box {
    display: block !important;
}

.invoice-box h1,
.invoice-box h2 {
    font-weight: 800;
    color: #000;
}

.invoice-box table {
    width: 100%;
    border-collapse: collapse;
}

.invoice-box th {
    background: #f8f9fa !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    border: 1px solid #000 !important;
    padding: 10px 5px;
}

.invoice-box td {
    padding: 8px 5px;
    border: 1px solid #000 !important;
    font-size: 12px;
}

.invoice-box .val-shop-name {
    color: #1a1a1a;
}

/* Ensure children look right when cloned (inherit from parent often fails if not explicit) */
/* The following rules are kept from the original as they were not explicitly replaced by the provided snippet */
.invoice-box th,
.invoice-box td {
    border: 1px solid #000 !important;
    border-width: 1px !important;
    padding: 4px 5px;
    color: #000 !important;
}

.invoice-box th {
    font-weight: bold;
    text-align: center;
    background: #eee !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    position: static !important;
    /* Fix missing borders in PDF/Print */
    border: 1px solid #000 !important;
}

.invoice-box td {
    border: 1px solid #000 !important;
}

.invoice-box h1 {
    font-size: 22px !important;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    color: #000 !important;
}

.invoice-box h2 {
    font-size: 16px !important;
    margin: 5px 0;
    color: #000 !important;
}

.invoice-box p {
    margin: 2px 0;
    color: #000 !important;
}

.invoice-box .policy-text {
    font-size: 10px !important;
    margin-top: 10px;
    border-top: 1px solid #000;
    padding-top: 5px;
    color: #000 !important;
}

/* Print Styles Override (Standard Browser Print) */
@media print {
    @page {
        size: auto;
        margin: 0;
        /* Important: Clear browser default margins */
    }

    body * {
        visibility: hidden;
    }

    .invoice-box,
    .invoice-box * {
        visibility: visible;
    }

    .invoice-box {
        display: block !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        z-index: 9999;
        background: white;
        box-sizing: border-box;
    }

    /* A5 Optimization */
    .invoice-box.size-a5 {
        max-width: 148mm;
        height: auto !important;
        min-height: auto !important;
        padding: 5mm;
        font-size: 12px;
    }

    .invoice-box.size-a5 .invoice-header {
        margin-bottom: 5px !important;
        padding-bottom: 5px !important;
    }

    .invoice-box.size-a5 .inv-signatures {
        margin-top: 15px !important;
    }

    .invoice-box.size-a5 .sig-box {
        min-height: 60px !important;
    }

    /* A4 Optimization - Maximize Area */
    .invoice-box.size-a4 {
        max-width: 100% !important;
        height: auto !important;
        padding: 5mm 10mm;
        /* Minimal internal margins */
        font-size: 17px;
        /* Larger base scale for A4 */
    }

    /* Scale specific elements on A4 */
    .invoice-box.size-a4 .val-shop-name {
        font-size: 30px !important;
        letter-spacing: -1px !important;
    }

    .invoice-box.size-a4 .inv-info-box {
        font-size: 18px !important;
        /* Address/Phone text */
        padding: 10px !important;
    }

    .invoice-box.size-a4 #invCust {
        font-size: 22px !important;
        /* Large Customer Name */
    }

    .invoice-box.size-a4 h2 {
        font-size: 24px !important;
        margin: 10px 0 !important;
    }

    .invoice-box.size-a4 table th,
    .invoice-box.size-a4 table td {
        padding: 6px 8px !important;
        font-size: 14px !important;
        /* Balanced font size */
        line-height: 1.2 !important;
    }

    .invoice-box.size-a4 .policy-text {
        font-size: 15px !important;
        /* Larger Warranty Policy */
        margin-top: 15px !important;
    }

    .invoice-box.size-a4 .sig-label {
        font-size: 16px !important;
        /* Larger Signature Titles */
    }

    .invoice-box table,
    .invoice-box th,
    .invoice-box td {
        border: 1px solid #000 !important;
    }

    /* Compress A5 table as well */
    .invoice-box.size-a5 .inv-info-box {
        font-size: 11px !important;
    }

    .invoice-box.size-a5 #invCust {
        font-size: 13px !important;
    }

    .invoice-box.size-a5 .policy-text {
        font-size: 10px !important;
    }

    .invoice-box.size-a5 .sig-label {
        font-size: 12px !important;
    }

    .invoice-box.size-a5 table th,
    .invoice-box.size-a5 table td {
        padding: 3px 4px !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
    }

    .no-print {
        display: none !important;
    }
}

/* [FIX] PDF Generation Mode (Exclusive View) */
/* When this class is added to body, we hide everything and show ONLY the invoice */
body.pdf-mode {
    background: white !important;
    overflow: visible !important;
    height: auto !important;
    width: 100% !important;
    min-height: 100vh !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.pdf-mode .container,
body.pdf-mode .header,
body.pdf-mode .tabs,
body.pdf-mode .modal {
    display: none !important;
}

body.pdf-mode .invoice-box {
    display: block !important;
    position: relative !important;
    margin: 0 auto !important;
    background: white !important;
    color: black !important;
    z-index: 99999;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    float: none !important;
}

body.pdf-mode .invoice-box.size-a5 {
    width: 148mm !important;
    padding: 10mm;
    font-size: 12px;
}

body.pdf-mode .invoice-box.size-a4 {
    width: 210mm !important;
    padding: 20mm 25mm;
    /* Balanced PDF margins */
    font-size: 16px;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    body {
        overflow: auto;
        height: auto;
    }

    .container {
        height: auto;
        overflow-y: auto;
        min-height: 100vh;
    }

    .split-layout {
        height: auto;
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow: visible;
    }

    .panel-left {
        order: 2;
    }

    .panel-right {
        order: 0;
    }

    /* Move Warranty KPIs between search and list on mobile */
    #tab-warranty .split-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    #tab-warranty .panel-right {
        display: contents !important;
    }

    #tab-warranty .panel-right>div:first-child {
        order: 1 !important;
        /* Search bar header */
        border-bottom: 1px solid var(--border-color) !important;
        background: #f1f2f6 !important;
    }

    #tab-warranty .panel-left {
        order: 2 !important;
        /* KPI section */
        padding: 10px !important;
        background: #f8f9fa !important;
        border-bottom: 1px solid var(--border-color) !important;
        margin-bottom: 0 !important;
    }

    #tab-warranty #warrantyCards {
        order: 3 !important;
        /* List cards */
        padding-top: 5px !important;
    }

    .checkout-section {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        right: 0;
        border-top: 2px solid var(--primary-color);
        border-radius: 20px 20px 0 0 !important;
        /* Rounded top only for mobile sheet look */
        z-index: 999;
        padding: 10px;
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
    }

    /* Responsive Tables */
    table th:nth-child(3),
    table td:nth-child(3),
    table th:nth-child(4),
    table td:nth-child(4) {
        display: none;
    }

    /* Exceptions */
    #cartTable th,
    #cartTable td {
        display: table-cell !important;
    }

    #supplierTable th:nth-child(3),
    #supplierTable td:nth-child(3) {
        display: none !important;
        /* [FIX] Hide Total Import in mobile */
    }

    #supplierTable th:nth-child(4),
    #supplierTable td:nth-child(4) {
        display: table-cell !important;
        /* [FIX] Show Debt in mobile */
    }


    /* [FIX] Warranty Table: Show all columns on mobile */
    #warrantyTicketTable th:nth-child(3),
    #warrantyTicketTable td:nth-child(3),
    #warrantyTicketTable th:nth-child(4),
    #warrantyTicketTable td:nth-child(4),
    #warrantyTicketTable th:nth-child(5),
    #warrantyTicketTable td:nth-child(5),
    #warrantyTicketTable th:nth-child(6),
    #warrantyTicketTable td:nth-child(6) {
        display: table-cell !important;
    }

    /* Customer (1): Bold + Single Line */
    #warrantyTicketTable td:nth-child(1) {
        font-weight: 800 !important;
        white-space: nowrap !important;
        /* Allow width to adapt, handled by global rule below */
    }

    /* Phone (2): Single Line */
    #warrantyTicketTable td:nth-child(2) {
        white-space: nowrap !important;
        font-weight: 600 !important;
    }

    /* Date (4), Status (5), Actions (6): Visible */
    #warrantyTicketTable th:nth-child(4),
    #warrantyTicketTable td:nth-child(4),
    #warrantyTicketTable th:nth-child(5),
    #warrantyTicketTable td:nth-child(5),
    #warrantyTicketTable th:nth-child(6),
    #warrantyTicketTable td:nth-child(6) {
        display: table-cell !important;
        white-space: nowrap !important;
        font-size: 13px;
    }

    button,
    input,
    select {
        font-size: 16px;
        /* [RESIZE] Larger input/button text */
        padding: 12px 15px;
        /* [RESIZE] Easier to tap */
    }

    /* Touch friendly */
    .status-group button {
        display: none;
    }

    .tabs {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        border-bottom: 2px solid #ddd;
        /* Hide scrollbar for neatness but allow scroll */
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 2px;
        /* Fix clipping of active border */
    }

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

    .tab {
        display: inline-block;
        padding: 15px 25px;
        /* [RESIZE] Larger touch area */
        font-size: 16px;
        /* [RESIZE] Bigger text */
        flex: none;
    }

    .tab-content {
        padding: 10px 5px;
    }

    /* Mobile Cart Table */
    /* Mobile Cart - Card View Transformation */
    #cartTable,
    #cartTable tbody,
    #cartTable tfoot,
    #cartTable tr,
    #cartTable td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    #cartTable thead {
        display: none;
        /* Hide header */
    }

    /* Cart Items as Cards */
    #cartList tr {
        background: #fff;
        margin-bottom: 12px;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        border: 1px solid #e2e8f0;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        /* Allow wrapping */
        align-items: center;
    }

    /* 1. Product Name (Full Width) */
    #cartList td:nth-child(1) {
        width: 100% !important;
        font-weight: 700;
        font-size: 15px;
        color: #2c3e50;
        margin-bottom: 8px;
        padding-right: 30px !important;
        border-bottom: 1px solid #f1f2f6;
        padding-bottom: 5px !important;
    }

    /* FIX: Combo Divider specific override */
    #cartList tr.combo-divider-row td:nth-child(1),
    #cartList tr.drop-outside-row td:nth-child(1) {
        padding-right: 0 !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* 2. Quantity (Left) */
    #cartList td:nth-child(2) {
        width: auto !important;
        font-size: 13px;
        color: #666;
        padding: 0 !important;
        margin-right: 15px;
    }

    #cartList td:nth-child(2)::before {
        content: "SL: ";
        color: #999;
    }

    /* 3. Price (Middle) */
    #cartList td:nth-child(3) {
        width: auto !important;
        font-size: 13px;
        color: #666;
        padding: 0 !important;
    }

    #cartList td:nth-child(3)::before {
        content: "x ";
        color: #ccc;
        margin: 0 5px;
    }

    /* 4. Total (Right Aligned, takes remaining space) */
    #cartList td:nth-child(4) {
        flex: 1;
        text-align: right !important;
        font-size: 15px;
        font-weight: 800;
        color: var(--danger-color);
        padding: 0 !important;
    }

    #cartList td:nth-child(4)::before {
        content: "= ";
        font-weight: normal;
        color: #ccc;
        margin-right: 2px;
    }

    /* 5. Delete Button (Absolute Top Right) */
    #cartList td:nth-child(5) {
        position: absolute;
        top: 8px;
        right: 8px;
        width: auto !important;
        padding: 0 !important;
    }

    /* Style the delete button itself */
    #cartList td:nth-child(5) button {
        width: 40px;
        height: 40px;
        border-radius: 6px;
        font-size: 24px;
        /* Updated to 24px */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        line-height: 1;
        /* Ensure vertical centering */
    }

    /* Input Footer - Optimized Grid */
    /* Input Footer - Optimized Grid */
    #cartTable tfoot {
        display: block;
        /* Container */
        width: 100%;
        padding: 0 !important;
        background: #fff9c4 !important;
    }

    #cartTable tfoot tr {
        display: grid;
        width: 100% !important;
        grid-template-columns: 80px 1fr 40px;
        gap: 8px;
        padding: 10px !important;
        box-sizing: border-box;
    }

    #cartTable tfoot td {
        display: block;
        padding: 0 !important;
        background: transparent !important;
        width: auto !important;
        /* Let Grid control width */
    }

    /* 1. Search Input (Full Width) */
    #cartTable tfoot td:nth-child(1) {
        grid-column: 1 / -1;
        /* Span all columns */
        margin-bottom: 5px;
    }

    /* 2. Quantity (Left) */
    #cartTable tfoot td:nth-child(2) {
        grid-column: 1 / 2;
    }

    /* 3. Price (Middle) */
    #cartTable tfoot td:nth-child(3) {
        grid-column: 2 / 3;
    }

    /* 4. Add Button (Right) */
    #cartTable tfoot td:nth-child(4) {
        grid-column: 3 / 4;
    }

    /* Input Styling Enhancements */
    #cartTable tfoot input {
        width: 100%;
        height: 40px;
        font-size: 15px !important;
        border: 1px solid #ccc;
        border-radius: 6px;
        padding: 0 10px;
        box-sizing: border-box;
        /* Fix width issues */
        background: #fff;
    }

    /* Specific adjustments */
    #cartTable tfoot td:nth-child(2) input {
        text-align: center;
        background: #fff;
    }

    #cartTable tfoot button {
        width: 100%;
        height: 40px;
        border-radius: 6px;
        background: var(--secondary-color);
        color: white;
        font-weight: bold;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        font-size: 24px;
        /* Updated to 24px */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        line-height: 1;
        /* Ensure vertical centering */
    }

}

/* User Management Styles */
.user-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.user-perm-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}

.user-perm-list label {
    width: 48%;
    /* 2 items per row */
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    background: #f8fafc;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    line-height: normal;
}

.user-perm-list label input {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
}

/* Mobile Responsive Tweaks for User Modal */
@media screen and (max-width: 768px) {
    #userModal .modal-content {
        width: 95% !important;
        margin: 5% auto !important;
        padding: 15px !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    .user-form-grid {
        grid-template-columns: 1fr;
        /* Stack inputs */
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #userModal table thead th:nth-child(3),
    #userModal table tbody td:nth-child(3),
    #userModal table thead th:nth-child(4),
    #userModal table tbody td:nth-child(4) {
        display: none;
    }

    #userModal table td,
    #userModal table th {
        padding: 8px 5px !important;
        font-size: 13px;
    }

    /* Header Adjustments */
    .val-shop-name {
        font-size: 16px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
        /* Limit width to prevent pushing status off */
    }

    #userModal h2 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    /* Form Actions Wrapper */
    .user-form-actions {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }

    .user-form-actions button {
        flex: 1;
        width: 50% !important;
        margin: 0 !important;
    }

    /* Header Buttons Wrapper */
    .user-list-header {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px;
    }

    .user-list-header .user-list-title {
        margin-top: 0 !important;
        font-size: 14px;
        white-space: nowrap;
    }

    .user-list-header button {
        width: auto !important;
        padding: 4px 8px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* Prevent ugly wrapping for address */
    .shop-address-line {
        font-size: 14px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        /* Allow full width */
        display: block;
    }

    /* Mobile Panel Header Resize */
    .panel-header-row {
        align-items: center !important;
    }

    .panel-header-row h2 {
        font-size: 16px !important;
        /* Smaller title */
        margin: 0 !important;
    }

    .panel-header-row button {
        font-size: 13px !important;
        /* Smaller text */
        padding: 6px 12px !important;
        /* Compact button */
        width: auto !important;
        height: auto !important;
    }

    /* Compact Report Switcher */
    .report-switch-header button {
        font-size: 16px !important;
        font-weight: bold !important;
        padding: 10px 8px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hide SKU column on mobile in product table */
    #productTable th:nth-child(1),
    #productTable td:nth-child(1) {
        display: none;
    }

    /* Ensure Price and Stock columns are visible on mobile */
    #productTable th:nth-child(3),
    #productTable td:nth-child(3),
    #productTable th:nth-child(4),
    #productTable td:nth-child(4) {
        display: table-cell !important;
    }

    /* Reorder UNIFIED Reports Tab for Mobile: Filters & Nav First */
    #tab-reports .split-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    #tab-reports .panel-left {
        order: 1 !important;
        /* Move to Top */
    }

    #tab-reports .panel-right {
        order: 2 !important;
        /* Move to Bottom */
    }

    /* Reorder Revenue Panel for Mobile: Filters First */
    #panel-revenue .split-layout {
        display: flex;
        flex-direction: column;
    }

    #panel-revenue .panel-left {
        order: 1 !important;
        /* Move to Top */
    }

    #panel-revenue .panel-right {
        order: 2 !important;
        /* Move to Bottom */
    }

    /* Reorder Inventory Panel for Mobile: Filters First */
    #tab-products .split-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    #tab-products .panel-left {
        order: 1 !important;
        /* Move to Top */
    }

    #tab-products .panel-right {
        order: 2 !important;
        /* Move to Bottom */
    }

    /* Reorder Debt Tab for Mobile: KPIs First */
    #tab-customers .split-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    #tab-customers .panel-left {
        order: 1 !important;
        /* Move to Top */
    }

    #tab-customers .panel-right {
        order: 2 !important;
        /* Move to Bottom */
    }

    /* Reorder Cashbook Tab for Mobile */
    #tab-cashbook .split-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    #tab-cashbook .panel-left {
        order: 1 !important;
    }

    #tab-cashbook .panel-right {
        order: 2 !important;
    }

    /* Inventory Filters Row: Mobile Only */
    /* Inventory Filters Row: Global (PC Default - 1 Row) */
    /* Inventory Filters Row: Global (2 Rows for PC & Mobile) */
    /* Inventory Filters Row: CSS Grid (2x2 Equal) */
    .inventory-filter-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 10px;
    }

    .inventory-filter-row .btn-filter {
        /* Reset flex props */
        width: 100% !important;
        /* Force fill grid cell */
        min-width: 0;
        flex: unset;

        font-size: 14px !important;
        font-weight: bold !important;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        background: #f8fafc;
        border-radius: 4px;
        border: 1px solid #e2e8f0;
        line-height: normal;
        margin-bottom: 0;
        /* Let grid gap handle spacing */
    }

    .user-perm-list label input {
        width: 16px;
        height: 16px;
        margin: 0;
        flex-shrink: 0;
    }

    /* KPI Card Optimization for Mobile */
    .warranty-kpi-card {
        padding: 8px !important;
    }

    /* Value Text */
    .warranty-kpi-card>div:first-child {
        font-size: 24px !important;
        line-height: 1.2;
    }

    /* Label Text */
    .warranty-kpi-card>div:last-child {
        font-size: 13px !important;
        margin-top: 4px !important;
    }

    /* Icon Helper */
    .warranty-kpi-card i {
        width: 14px !important;
        height: 14px !important;
    }

    /* Mobile Responsive Tweaks for User Modal */
    @media screen and (max-width: 768px) {
        #userModal .modal-content {
            width: 95% !important;
            margin: 5% auto !important;
            padding: 15px !important;
            max-height: 90vh;
            overflow-y: auto;
        }

        .user-form-grid {
            grid-template-columns: 1fr;
            /* Stack inputs */
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        #userModal table thead th:nth-child(3),
        #userModal table tbody td:nth-child(3),
        #userModal table thead th:nth-child(4),
        #userModal table tbody td:nth-child(4) {
            display: none;
        }

        #userModal table td,
        #userModal table th {
            padding: 8px 5px !important;
            font-size: 13px;
        }

        /* Header Adjustments */
        .val-shop-name {
            font-size: 16px !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 180px;
            /* Limit width to prevent pushing status off */
        }

        #userModal h2 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        /* Form Actions Wrapper */
        .user-form-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .user-form-actions button {
            flex: 1;
            width: 50% !important;
            margin: 0 !important;
        }

        /* Header Buttons Wrapper */
        .user-list-header {
            flex-direction: row !important;
            align-items: center !important;
            gap: 10px;
        }

        .user-list-header .user-list-title {
            margin-top: 0 !important;
            font-size: 14px;
            white-space: nowrap;
        }

        .user-list-header button {
            width: auto !important;
            padding: 4px 8px;
            font-size: 12px;
            white-space: nowrap;
        }

        /* Prevent ugly wrapping for address */
        .shop-address-line {
            font-size: 14px !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            /* Allow full width */
            display: block;
        }

        /* Mobile Panel Header Resize */
        .panel-header-row {
            align-items: center !important;
        }

        .panel-header-row h2 {
            font-size: 16px !important;
            /* Smaller title */
            margin: 0 !important;
        }

        .panel-header-row button {
            font-size: 13px !important;
            /* Smaller text */
            padding: 6px 12px !important;
            /* Compact button */
            width: auto !important;
            height: auto !important;
        }

        /* Compact Report Switcher */
        .report-switch-header button {
            font-size: 16px !important;
            font-weight: bold !important;
            padding: 10px 8px !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Hide SKU column on mobile in product table (REMOVED - Handled Globally) */

        /* Ensure Import Price (3), Price (4) and Stock (5) columns are visible on mobile */
        #productTable th:nth-child(3),
        #productTable td:nth-child(3),
        #productTable th:nth-child(4),
        #productTable td:nth-child(4),
        #productTable th:nth-child(5),
        #productTable td:nth-child(5) {
            display: table-cell !important;
        }

        /* Reorder Revenue Panel for Mobile: Filters First */
        #panel-revenue .split-layout {
            display: flex;
            flex-direction: column;
        }

        #panel-revenue .panel-left {
            order: 1 !important;
            /* Move to Top */
        }

        #panel-revenue .panel-right {
            order: 2 !important;
            /* Move to Bottom */
        }

        /* Reorder Inventory Panel for Mobile: Filters First */
        #panel-inventory .panel-left {
            order: 1 !important;
            /* Move to Top */
        }

        #panel-inventory .panel-right {
            order: 2 !important;
            /* Move to Bottom */
        }

        /* Inventory Filters Row */
        /* Inventory Filters Row: Mobile adjustments (Layout inherited from Grid) */
        .inventory-filter-row .btn-filter {
            /* Inherit Grid layout, just adjust typography */
            flex: unset;

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
            font-size: 16px !important;
            font-weight: 700 !important;
            padding: 12px 5px !important;
            margin-bottom: 0;

            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            background: #f8fafc;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
            line-height: normal;
            white-space: normal;
        }

        /* Compact Revenue Filter for Mobile */
        #panel-revenue .input-box {
            padding: 10px;
        }

        #dateRangeArea {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 5px !important;
            padding-top: 5px !important;
            border-top: 1px dashed #ccc;
        }

        #dateRangeArea .form-group {
            width: 48%;
            /* Side-by-side */
            flex: 1;
            margin-bottom: 0;
        }

        #dateRangeArea .form-group label {
            font-size: 11px;
            /* Smaller label */
            margin-bottom: 2px;
        }

        #dateRangeArea input[type="date"] {
            padding: 6px;
            /* Compact input */
            font-size: 13px;
        }

        #dateRangeArea button {
            width: 100%;
            margin-top: 10px !important;
            padding: 10px;
        }

        /* Compact Report Cards */
        .report-cards .card {
            padding: 10px !important;
        }

        .report-cards .card h3 {
            font-size: 11px !important;
            margin-bottom: 2px !important;
        }

        .report-cards .card .value {
            font-size: 18px !important;
        }

        /* Compact Inputs for Mobile Panel Left */
        .panel-left .input-box .form-group {
            margin-bottom: 5px !important;
        }

        .panel-left .input-box input {
            padding: 5px !important;
            /* Fix text cut-off */
            height: auto;
        }

        /* Ensure Cart Footer inputs also have small padding */
        #cartTable tfoot input {
            padding: 5px !important;
        }

        /* Reverse Import Tab Layout on Mobile */
        #tab-products .split-layout {
            flex-direction: column-reverse;
        }

        /* Inventory Table Mobile Customization */
        /* Hide Code (1) (REMOVED - Handled Globally) */

        /* Show Stock (3) and Value (4) */
        #inventoryTable th:nth-child(3),
        #inventoryTable td:nth-child(3),
        #inventoryTable th:nth-child(4),
        #inventoryTable td:nth-child(4) {
            display: table-cell !important;
        }

        /* Hide Import Price in Product List (Tab Nhập Hàng) */
        #productTable th:nth-child(3),
        #productList td:nth-child(3) {
            display: none;
        }
    }
}

/* Capitalize Navigation Tabs */
/* Capitalize Navigation Tabs */
.tab {
    text-transform: uppercase !important;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Space between Icon and Text */
}

/* Desktop SVG Icon Style */
.tab svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    position: relative;
    top: 2px;
    /* Re-align with 18px text */
}

/* --- MOBILE BOTTOM NAVIGATION --- */
.mobile-bottom-nav {
    display: none;
    /* Hidden on Desktop */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    justify-content: flex-start;
    /* Changed from space-around to prevent cutout on scroll */
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
    /* Allow scrolling */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.mobile-bottom-nav::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.mobile-bottom-nav {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.mobile-tab {
    flex: 1;
    min-width: 75px;
    /* Prevent shrinking too small */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0 14px 0;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    border: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    /* Keep text on one line */
}

.mobile-tab svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    margin-bottom: 4px;
}

.mobile-tab span {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

.mobile-tab.active {
    color: var(--secondary-color);
}

.mobile-tab:active {
    background-color: #f1f5f9;
}

/* --- CARD LAYOUT STYLES --- */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 15px;
    overflow-y: auto;
}

.data-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
}

.data-card:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f1f5f9;
}

.card-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border-radius: 8px;
    flex-shrink: 0;
}

.card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    flex: 1;
    line-height: 1.3;
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
}

.info-label {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    flex-shrink: 0;
    min-width: fit-content;
    white-space: nowrap;
}

.info-value {
    color: #475569;
    line-height: 1.4;
    flex: 1;
}

.card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

/* Responsive Visibility */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

/* Adjustments for Mobile */
@media screen and (max-width: 768px) {

    /* Toggle Visibility */
    .desktop-only {
        display: none !important;
    }

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

    .mobile-only.scanner-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Hide Desktop-Only Columns */
    .hide-mobile {
        display: none !important;
    }

    /* Hide Desktop Tabs */
    .tabs {
        display: none !important;
    }

    /* Show Bottom Nav */
    .mobile-bottom-nav {
        display: flex !important;
    }

    /* Add padding to body so content isn't hidden behind nav */
    body {
        padding-bottom: 80px !important;
        height: auto !important;
        overflow-y: auto !important;

        .product-card {
            padding: 12px !important;
            margin-bottom: 12px !important;
        }
    }

    .container {
        height: auto !important;
        /* Allow scroll on mobile */
        overflow: visible !important;
        border: none;
        box-shadow: none;
    }

    /* Adjust Header for Mobile */
    .header {
        position: sticky;
        top: 0;
        z-index: 900;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    /* Mobile-optimized KPI Cards */
    .warranty-kpi-card {
        padding: 8px !important;
    }

    .warranty-kpi-card>div:first-child {
        font-size: 24px !important;
        /* Reduce number size from 36px to 24px */
    }

    .warranty-kpi-card>div:last-child {
        font-size: 12px !important;
        /* Reduce label size from 15px to 12px */
        margin-top: 3px !important;
    }
}

/* ==================================================== */
/* FIXED ROW HEIGHT - GLOBAL TABLE OPTIMIZATION */
/* ==================================================== */

/* Apply fixed height to all data table rows */
#warrantyTicketTable tbody tr,
#inventoryTable tbody tr,
#debtTable tbody tr,
#historyTable tbody tr {
    height: 70px;
    max-height: 70px;
}

/* Fix cell height and enable vertical centering */
#warrantyTicketTable tbody td,
#inventoryTable tbody td,
#debtTable tbody td,
#historyTable tbody td {
    max-height: 70px;
    overflow: hidden;
    vertical-align: middle;
    line-height: 1.4;
}

/* Line clamp for cells with long text (first 2 columns) */
/* Line clamp wrapper class */
.cell-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    max-height: 40px;
    /* Limit height roughly to 2 lines */
}

/* Limit height roughly to 2 lines */


/* [PC] Increase Product & Issue Column Width & Font Size */
#warrantyTicketTable td:nth-child(3) {
    width: auto;
    /* Let it flow */
    max-width: 40%;
    /* Prevent it from pushing Customer col too much */
    font-size: 15px !important;
    /* [REQ] Increase text size */
    font-weight: 500;
}

#warrantyTicketTable td:nth-child(3) small {
    font-size: 13px !important;
    /* Make "Lỗi:" readable */
}

/* [PC] Customer Column - Prevent crushing */
#warrantyTicketTable td:nth-child(1) {
    min-width: 140px;
    /* Ensure enough space for names */
    max-width: 200px;
    width: auto;
}

/* [PC] Actions Column - Prevent wrapping */
#warrantyTicketTable td:nth-child(6) {
    white-space: nowrap !important;
    width: 1%;
    /* Shrink to fit content */
}

/* Responsive adjustments for small screens */
@media (max-width: 1439px) {

    /* Reduce font size for better fit */
    #warrantyTicketTable,
    #inventoryTable,
    #debtTable,
    #historyTable {
        font-size: 13px;
    }

    /* Reduce cell padding */
    #warrantyTicketTable td,
    #warrantyTicketTable th,
    #inventoryTable td,
    #inventoryTable th,
    #debtTable td,
    #debtTable th {
        padding: 8px 6px;
    }

    /* Hide phone numbers in warranty table to save space */
    #warrantyTicketTable .customer-phone {
        display: none;
    }
}

/* ==================================================== */
/* END FIXED ROW HEIGHT OPTIMIZATION */
/* ==================================================== */
/* KPI Card Hover Effect */
.warranty-kpi-card {
    transition: all 0.2s ease;
}

.warranty-kpi-card:hover {
    opacity: 1 !important;
    transform: scale(1.02) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    z-index: 10;
}

/* ==================================================== */
/* PRODUCT CARDS (MOBILE) */
/* ==================================================== */
.product-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border-color: #3b82f6;
}

.product-card:active {
    transform: translateY(0);
}

/* Responsive KPI Labels (Debt Tab) */
.kpi-card-label {
    font-size: 12px;
}

@media (min-width: 768px) {
    .kpi-card-label {
        font-size: 15px;
    }
}

/* ==================================================== */
/* [PC Optimization] Compact Left Panel for 1200x800 */
/* ==================================================== */
@media screen and (min-width: 1024px) {

    /* Tighten Panel Gap */
    .panel-left {
        gap: 8px;
        padding-right: 2px;
    }

    /* Compact Input Box */
    .input-box {
        padding: 10px 12px;
    }

    .box-title {
        margin-bottom: 6px;
        font-size: 15px;
        padding-bottom: 4px;
    }

    .form-group {
        margin-bottom: 6px;
    }

    label {
        font-size: 13px;
        margin-bottom: 2px;
    }

    input,
    select,
    textarea {
        padding: 7px 10px;
        font-size: 14px;
    }

    /* Compact Checkout Section */
    .checkout-section {
        margin-top: 10px;
        padding: 10px 12px;
    }

    .combo-switch {
        padding: 4px 8px;
        margin-bottom: 4px;
    }

    .combo-switch label {
        font-size: 12px;
    }

    .calc-row {
        margin-bottom: 3px;
        gap: 8px;
    }

    .calc-row span.label {
        font-size: 13px;
    }

    .calc-row .value {
        font-size: 18px;
    }

    #lblTotalPayable {
        font-size: 20px !important;
    }

    .final-price-input {
        width: 120px;
        font-size: 16px;
        padding: 4px 8px;
    }

    /* Buttons in Left Panel */
    .panel-left button {
        padding: 8px 12px;
        font-size: 14px;
    }

    /* Reports Tab Specifics */
    .report-cards {
        gap: 8px;
        margin-top: 5px;
    }

    .card {
        padding: 8px;
    }

    .card h3 {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .card .value {
        font-size: 24px;
    }

    #dateRangeArea {
        margin-top: 5px;
        padding-top: 5px;
    }

    #dateRangeArea .form-group {
        margin-bottom: 5px;
    }
}

/* ========================================
   ORDER HISTORY CARD LIST VIEW (MOBILE)
   ======================================== */

/* Hide table on mobile, show cards */
@media screen and (max-width: 768px) {
    #historyModal .table-wrapper.desktop-only {
        display: none !important;
    }

    .mobile-card-list {
        display: block !important;
    }
}

/* Show table on desktop, hide cards */
@media screen and (min-width: 769px) {
    #historyModal .table-wrapper.desktop-only {
        display: block !important;
    }

    .mobile-card-list {
        display: none !important;
    }
}

/* Mobile Card List Container */
.mobile-card-list {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
    max-height: 400px;
    overflow-y: auto;
}

/* Individual Order Card - Report Tab Style */
.order-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.order-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.order-card:active {
    transform: translateY(0) scale(0.98);
}

/* Card Header - Icon + ID + Actions Layout */
.order-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.order-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f5e9;
    border-radius: 10px;
    color: #4caf50;
}

.order-card-main {
    flex: 1;
    min-width: 0;
}

.order-card-id {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2px;
    word-break: break-word;
}

.order-card-date {
    font-size: 12px;
    color: #64748b;
    font-weight: 400;
}

.order-card-actions {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

/* Card Body - Info Rows */
.order-card-body {
    margin-bottom: 0;
}

.order-card-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-info-row {
    display: flex;
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.order-info-label {
    font-weight: 600;
    color: #64748b;
    min-width: 90px;
    flex-shrink: 0;
}

.order-info-value {
    color: #1e293b;
    flex: 1;
    word-break: break-word;
    font-weight: 500;
}

/* Colored values for revenue/profit */
.order-info-value.revenue {
    font-weight: 700;
    color: #10b981;
    font-size: 15px;
}

.order-info-value.profit {
    font-weight: 700;
    color: #ef4444;
    font-size: 15px;
}

/* Card Footer - Remove border, simple layout */
.order-card-footer {
    display: none;
    /* Hide footer since total is in body */
}

.order-card-total {
    font-size: 18px;
    font-weight: 800;
    color: #10b981;
}

/* Action Buttons Styling */
.order-card-actions button {
    padding: 8px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 36px;
    height: 36px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.order-card-actions button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* --- DEBT SEGMENTED CONTROL --- */
.debt-tab-switch {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.btn-tab-switch {
    padding: 8px 20px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #4b5563;
    border-radius: 20px;
    /* Pill shape */
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 120px;
    text-align: center;
}

.btn-tab-switch:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.btn-tab-switch.active {
    background: var(--primary-color, #e74c3c);
    /* Use theme color */
    color: white;
    border-color: var(--primary-color, #e74c3c);
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Mobile Tweak */
@media screen and (max-width: 768px) {
    .debt-tab-switch {
        padding: 8px;
        gap: 8px;
    }

    .btn-tab-switch {
        flex: 1;
        /* Equal width on mobile */
        padding: 10px;
        font-size: 15px;
    }
}

/* ==================================================== */
/* KHO P2P - Light Theme (matching web app)             */
/* ==================================================== */

/* P2P Tab Container */
#tab-p2p {
    background: var(--bg-color);
    color: var(--text-color);
    border-radius: 0;
    padding: 0 !important;
}

#tab-p2p.active {
    background: var(--bg-color);
}

/* P2P Toolbar */
.p2p-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.p2p-region-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
}

.p2p-region-selector select {
    background: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.p2p-region-selector select:focus {
    border-color: #6366f1;
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.p2p-search-box {
    flex: 1;
    position: relative;
    min-width: 200px;
}

.p2p-search-box input {
    width: 100%;
    background: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 13px;
}

.p2p-search-box input::placeholder {
    color: #94a3b8;
}

.p2p-search-box input:focus {
    border-color: #6366f1;
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.p2p-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.p2p-checkbox-label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.p2p-checkbox-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #6366f1;
}

.p2p-btn-refresh {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: #64748b;
    border-radius: 6px;
    padding: 7px 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.p2p-btn-refresh:hover {
    background: var(--bg-color);
    color: var(--text-color);
    border-color: #6366f1;
}

/* P2P Sub-tabs */
.p2p-sub-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 15px;
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
}

.p2p-sub-tab {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.p2p-sub-tab:hover {
    color: var(--text-color);
    background: var(--bg-color);
}

.p2p-sub-tab.active {
    color: #fff;
    background: #6366f1;
}

.p2p-badge {
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
}

.p2p-status-bar {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.p2p-status {
    display: flex;
    align-items: center;
    gap: 4px;
}

.p2p-status.loading i {
    animation: p2p-spin 1s linear infinite;
}

@keyframes p2p-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.p2p-result-count {
    color: #64748b;
    font-weight: 600;
}

/* P2P List Header */
.p2p-list-header {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1fr 0.8fr 0.8fr;
    gap: 8px;
    padding: 8px 15px;
    background: var(--bg-color);
    border-bottom: 2px solid #6366f1;
    font-size: 11px;
    font-weight: 700;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* P2P List Container */
.p2p-list-container {
    flex: 1;
    overflow-y: auto;
    background: var(--surface-color);
}

.p2p-list-body {
    display: flex;
    flex-direction: column;
}

/* P2P Item Row */
.p2p-item {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1fr 0.8fr 0.8fr;
    gap: 8px;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 13px;
    align-items: center;
    background: var(--surface-color);
}

.p2p-item:hover {
    background: #f0f0ff;
    border-left: 3px solid #6366f1;
    padding-left: 12px;
}

.p2p-item:active {
    background: #e8e8fd;
}

.p2p-item.sold-out {
    opacity: 0.45;
}

.p2p-item.sold-out:hover {
    opacity: 0.7;
}

.p2p-item-name {
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p2p-item-shop {
    color: #64748b;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p2p-item-phone {
    color: #64748b;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
}

.p2p-item-status {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.p2p-item-status.available {
    color: var(--success-color);
}

.p2p-item-status.sold-out {
    color: var(--danger-color);
}

.p2p-item-time {
    color: #94a3b8;
    font-size: 11px;
    text-align: right;
}

/* P2P Empty State */
.p2p-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #94a3b8;
    text-align: center;
    gap: 10px;
}

.p2p-empty p {
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
}

.p2p-empty small {
    font-size: 12px;
    color: #94a3b8;
}

/* P2P Bookmark Group */
.p2p-bookmark-group {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin: 8px 12px;
    overflow: hidden;
    background: var(--surface-color);
}

.p2p-bookmark-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}

.p2p-bookmark-shop-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6366f1;
    font-size: 13px;
}

.p2p-bookmark-phone {
    color: #94a3b8;
    font-family: 'Consolas', monospace;
    font-size: 12px;
}

.p2p-btn-remove-bookmark {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.p2p-btn-remove-bookmark:hover {
    color: var(--danger-color);
    background: rgba(239, 68, 68, 0.08);
}

.p2p-bookmark-item {
    padding-left: 30px !important;
}

.p2p-bookmark-item .p2p-item-name {
    flex: 1;
}

/* P2P Action Sheet */
.p2p-action-sheet-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    align-items: flex-end;
    justify-content: center;
}

.p2p-action-sheet-overlay.active {
    display: flex;
}

.p2p-action-sheet {
    width: 100%;
    max-width: 500px;
    background: var(--surface-color);
    border-radius: 16px 16px 0 0;
    padding: 20px;
    animation: p2p-slide-up 0.3s ease;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

@keyframes p2p-slide-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.p2p-action-header {
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
}

.p2p-action-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 4px 0;
}

.p2p-action-header p {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 8px 0;
}

.p2p-action-status {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
    text-transform: uppercase;
}

.p2p-action-status.available {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.p2p-action-status.sold-out {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

.p2p-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.p2p-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.p2p-btn-call {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.p2p-btn-call:hover {
    background: rgba(16, 185, 129, 0.2);
}

.p2p-btn-zalo {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.p2p-btn-zalo:hover {
    background: rgba(59, 130, 246, 0.2);
}

.p2p-btn-copy {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.p2p-btn-copy:hover {
    background: rgba(245, 158, 11, 0.2);
}

.p2p-btn-bookmark {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.p2p-btn-bookmark:hover {
    background: rgba(99, 102, 241, 0.2);
}

.p2p-action-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    background: var(--bg-color);
    color: #64748b;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.p2p-action-cancel:hover {
    background: var(--border-color);
    color: var(--text-color);
}

/* P2P Mobile Responsive */
@media screen and (max-width: 768px) {
    .p2p-toolbar {
        flex-direction: column;
        gap: 8px;
        padding: 10px;
    }

    .p2p-region-selector,
    .p2p-search-box,
    .p2p-filter-actions {
        width: 100%;
    }

    .p2p-filter-actions {
        justify-content: space-between;
    }

    .p2p-list-header {
        display: none;
    }

    .p2p-item {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 4px 8px;
        padding: 10px 12px;
    }

    .p2p-item-name {
        grid-column: 1 / -1;
        font-size: 14px;
    }

    .p2p-item-shop {
        grid-column: 1;
    }

    .p2p-item-phone {
        display: none;
    }

    .p2p-item-status {
        text-align: right;
    }

    .p2p-item-time {
        display: none;
    }

    .p2p-sub-tabs {
        padding: 6px 10px;
    }

    .p2p-action-sheet {
        max-width: 100%;
    }
}