body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f3f4f6;
    margin: 0;
}
.container {
    max-width: 1100px; /* Increased width for new layout */
    margin: 2rem auto;
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.hidden { display: none !important; }

/* Loader Styles */
#loading-overlay{position:fixed;inset:0;background-color:rgba(255,255,255,0.7);display:flex;align-items:center;justify-content:center;z-index:100}
.loader{border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* General Styles */
h1, h2, h3 { color: #111827; }
.input-group { margin-bottom: 1rem; }
label { display: block; margin-bottom: 0.5rem; color: #374151; }
input, select, textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-sizing: border-box;
}
button {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 4px;
    background-color: #2563eb;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}
button:hover { background-color: #1d4ed8; }
.button-secondary { background-color: #e5e7eb; color: #111827; }
.button-secondary:hover { background-color: #d1d5db; }
.button-danger { background-color: #dc2626; }
.button-danger:hover { background-color: #b91c1c; }
.button-success { background-color: #16a34a; }
.button-success:hover { background-color: #15803d; }

/* Login, Message & Toast Styles */
#login-section { max-width: 400px; margin-top: 5rem; }
#message { margin-top: 1rem; text-align: center; font-weight: bold; }
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:1rem 2rem;border-radius:8px;background-color:#333;color:white;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:101}
.toast.show{opacity:1;visibility:visible}
.toast.error{background-color:#dc2626}
.success { color: #16a34a; }
.error { color: #dc2626; }

/* App Header & Tabs */
.app-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid #e5e7eb; }
.app-header h1 { margin: 0; font-size: 1.5rem; }
.app-header button { width: auto; font-size: 0.9rem; padding: 0.5rem 1rem; }
.tabs { display: flex; border-bottom: 1px solid #d1d5db; margin-bottom: 1.5rem; }
.tab-button{background:none;border:none;padding:1rem 1.5rem;cursor:pointer;font-size:1rem;color:#6b7280;border-bottom:2px solid transparent}
.tab-button.active{color:#2563eb;border-bottom-color:#2563eb;font-weight:bold}
.content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.content-header h2 { margin: 0; }
.content-header button { width: auto; font-size: 0.9rem; padding: 0.5rem 1rem; }

/* Table Styles */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.75rem 1rem; text-align: right; border-bottom: 1px solid #e5e7eb; }
thead { background-color: #f9fafb; }
th { font-weight: bold; color: #374151; }
.table-img{width:50px;height:50px;border-radius:4px;object-fit:cover}

/* Modal Styles */
.modal-backdrop{position:fixed;inset:0;background-color:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{background:white;padding:2rem;border-radius:8px;width:100%;max-width:500px}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.modal-header h3 { margin: 0; }
.modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; }
.modal-footer button { width: auto; }

/* --- NEW: Rep Interface Enhancements --- */
.rep-grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Left column (cart) is smaller */
    gap: 2rem;
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.5rem;
}
.product-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.product-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}
.product-card-body {
    padding: 0.75rem;
}
.product-card-body h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.add-to-cart-btn {
    width: 100%;
    font-size: 0.8rem;
    padding: 0.5rem;
}
.form-section {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}
#invoice-items-table th, #invoice-items-table td { padding: 0.5rem; font-size: 0.9rem; }
#invoice-total { text-align: left; font-size: 1.25rem; font-weight: bold; margin-top: 1rem; }
.invoice-summary {
    border-top: 1px solid #e5e7eb;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}
.invoice-summary p {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    margin: 0.5rem 0;
}
.invoice-summary .final-total {
    font-size: 1.25rem;
    font-weight: bold;
    color: #16a34a; /* Green for final total */
    margin-top: 1rem;
}
/* Status Badges */
.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    display: inline-block;
}
.status-pending { background-color: #fef3c7; color: #92400e; } /* Amber */
.status-prepared { background-color: #dbeafe; color: #1e40af; } /* Blue */
.status-shipped { background-color: #e0e7ff; color: #4338ca; } /* Indigo */
.status-delivered { background-color: #dcfce7; color: #166534; } /* Green */
.status-cancelled { background-color: #fee2e2; color: #991b1b; } /* Red */
.status-returned { background-color: #f3e8ff; color: #6b21a8; } /* Purple */

/* New styles for order lists and reports */
.item-list-in-table {
    padding-right: 20px;
    margin: 0;
    list-style: disc;
    font-size: 0.85rem;
}
.item-list-in-table li {
    margin-bottom: 2px;
}
.content-header label { margin: 0 0.5rem 0 0; display: inline-block; }
.report-summary {
    padding: 1.5rem;
    background-color: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    font-size: 1.1rem;
    text-align: center;
}
.report-summary strong { color: #059669; font-size: 1.4rem; }

/* === Responsive Design for All Devices === */

/* For tablets and smaller devices (less than 900px) */
@media (max-width: 900px) {
    .rep-grid { 
        grid-template-columns: 1fr; /* Stack the product grid and invoice form */
    }
    .product-grid { 
        max-height: none; /* Remove fixed height on mobile */
    }
    .content-header { 
        flex-direction: column; 
        align-items: flex-start;
        gap: 1rem;
    }
    .content-header > div { 
        margin-top: 0; /* Adjusted from 1rem to 0 for better alignment with gap */
        width: 100%;
    }
}

/* For mobile phones (less than 768px) */
@media (max-width: 768px) {
    body {
        -webkit-text-size-adjust: 100%; /* Prevents iOS font size inflation */
    }

    .container {
        margin: 0.5rem;   /* Reduce margin to use more screen space */
        padding: 1rem;    /* Reduce internal padding */
    }

    /* Stack the main header items vertically */
    .app-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    /* Make tabs scrollable horizontally if they don't fit */
    .tabs {
        overflow-x: auto;
        white-space: nowrap;
        -ms-overflow-style: none;  /* Hide scrollbar on IE and Edge */
        scrollbar-width: none;  /* Hide scrollbar on Firefox */
    }
    .tabs::-webkit-scrollbar {
        display: none; /* Hide scrollbar on Chrome, Safari, and Opera */
    }

    #login-section {
        margin-top: 2rem;
        padding: 1.5rem;
        width: auto;
        max-width: 90%;
    }

    /* --- Critical for Mobile: Make tables scrollable horizontally --- */
    table {
        display: block;
        width: 100%;
        overflow-x: auto; /* This allows the table to be scrolled left-to-right */
        white-space: nowrap; /* Prevents table content from wrapping */
    }
    th, td {
        white-space: nowrap; /* Ensure cell content does not wrap unnecessarily */
    }
    /* --- End of table fix --- */

    /* Adjust product grid for smaller cards */
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.75rem;
    }

    .product-card img {
        height: 100px; /* Make product images smaller */
    }

    /* Adjust modals to fit smaller screens */
    .modal {
        width: 90%;
        padding: 1.5rem;
    }
    
    /* Stack modal buttons vertically for easier tapping */
    .modal-footer {
        flex-direction: column;
        gap: 0.75rem;
    }
    .modal-footer button {
        width: 100%; 
    }

    /* Fix headers in Packer interface */
    #packer-content-area .content-header,
    #packer-content-area .content-header > div {
        flex-direction: column;
        align-items: stretch; /* Make items full-width */
        width: 100%;
        gap: 0.75rem;
    }
    #packer-content-area .content-header select,
    #packer-content-area .content-header button {
        width: 100%;
        margin-left: 0;
    }
}
/* في ملف style.css */
.button-danger {
    background-color: #ef4444; /* لون أحمر موحد */
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* تنسيق إضافي لتمييز زر الحذف وتفريقه عن زر التعديل */
.order-actions .delete-btn {
    margin-right: 0.5rem; /* فاصل بين زر التعديل وزر الحذف */
}

.button-danger:hover {
    background-color: #dc2626;
}