/* Transaction ID Status Styles */
.status-message {
    margin-top: 5px;
    font-size: 14px;
    padding: 5px;
    border-radius: 4px;
}

.status-checking {
    color: #666;
    font-style: italic;
}

.status-success {
    color: #28a745;
    font-weight: bold;
}

.status-error {
    color: #dc3545;
    font-weight: bold;
}

.status-warning {
    color: #ffc107;
    font-weight: bold;
}

/* Form validation styles */
input:invalid {
    border-color: #dc3545;
}

input:valid {
    border-color: #28a745;
}

/* Disabled button style */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Existing transaction details */
.existing-transaction-details {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
    margin-top: 10px;
    font-size: 14px;
}

.existing-transaction-details h4 {
    margin: 0 0 8px 0;
    color: #dc3545;
}

.existing-transaction-details p {
    margin: 2px 0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Pyidaungsu', 'Myanmar3', sans-serif;
}

body {
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header Styles */
.header {
    background: #2c3e50;
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo h1 {
    font-size: 1.5rem;
    margin: 0;
}

.navigation ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
}

.navigation a {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.navigation a:hover {
    background-color: rgba(255,255,255,0.1);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logout-btn {
    background: #e74c3c;
    padding: 5px 15px;
    border-radius: 4px;
}

/* Form Styles */
.form-group {
    margin-bottom: 1rem;
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

input, select, textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}

/* Button Styles */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-primary {
    background: #3498db;
    color: white;
}

.btn-primary:hover {
    background: #2980b9;
}

.btn-secondary {
    background: #95a5a6;
    color: white;
}

.btn-secondary:hover {
    background: #7f8c8d;
}

.btn-success {
    background: #27ae60;
    color: white;
}

.btn-warning {
    background: #f39c12;
    color: white;
}

.btn-info {
    background: #17a2b8;
    color: white;
}

.btn-error {
    background: #e74c3c;
    color: white;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Alert Styles */
.alert {
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.alert-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.alert-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.alert-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

/* Card Styles */
.card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dashboard-cards .card {
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.dashboard-cards .card h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.dashboard-cards .card p {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
}

/* Table Styles */
.table-container {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

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

.data-table th,
.data-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.data-table th {
    background: #f8f9fa;
    font-weight: bold;
    color: #2c3e50;
}

.data-table tr:hover {
    background: #f8f9fa;
}

.final-price {
    font-weight: bold;
    color: #27ae60;
}

/* Price Display */
.price-display {
    background: #f8f9fa;
    padding: 0.75rem;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-weight: bold;
}

.price-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

/* Status Messages */
.status-message {
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.status-checking {
    color: #f39c12;
    font-style: italic;
}

.status-success {
    color: #27ae60;
    font-weight: bold;
}

.status-error {
    color: #e74c3c;
    font-weight: bold;
}

.status-warning {
    color: #f39c12;
    font-weight: bold;
}

/* Login Styles */
.login-body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.login-form {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.login-form h1 {
    text-align: center;
    margin-bottom: 0.5rem;
    color: #2c3e50;
}

.login-form h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #7f8c8d;
    font-weight: normal;
}

.login-info {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 0.9rem;
}

.login-info h4 {
    margin-bottom: 0.5rem;
    color: #2c3e50;
}

/* Quick Actions */
.quick-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* Summary Cards */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.summary-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.summary-card h3 {
    font-size: 0.9rem;
    color: #7f8c8d;
    margin-bottom: 0.5rem;
}

.big-number {
    font-size: 2rem;
    font-weight: bold;
    color: #2c3e50;
    margin: 0;
}

/* Filter Section */
.filter-section {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Report Table */
.report-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.report-table th,
.report-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.report-table th {
    background: #2c3e50;
    color: white;
    font-weight: bold;
}

/* User Management */
.users-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.users-table th,
.users-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.users-table th {
    background: #f8f9fa;
    font-weight: bold;
}

.role-badge, .status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

.role-admin {
    background: #e74c3c;
    color: white;
}

.role-staff1, .role-staff2 {
    background: #3498db;
    color: white;
}

.status-active {
    background: #27ae60;
    color: white;
}

.status-inactive {
    background: #95a5a6;
    color: white;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 2rem;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    position: relative;
}

.close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: #7f8c8d;
}

.close:hover {
    color: #2c3e50;
}

/* Unauthorized Page */
.unauthorized-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #f5f5f5;
}

.unauthorized-content {
    text-align: center;
    background: white;
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.unauthorized-content h1 {
    color: #e74c3c;
    margin-bottom: 1rem;
}

.unauthorized-content p {
    color: #7f8c8d;
    margin-bottom: 2rem;
}

/* Footer */
.footer {
    background: #2c3e50;
    color: white;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer p {
    margin: 0.25rem 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .navigation ul {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .dashboard-cards,
    .summary-cards {
        grid-template-columns: 1fr;
    }
    
    .quick-actions {
        flex-direction: column;
    }
    
    .data-table {
        font-size: 0.9rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.5rem;
    }
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.btn-edit {
    background: #3498db;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
}

.btn-delete {
    background: #e74c3c;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
}

.btn-edit:hover {
    background: #2980b9;
}

.btn-delete:hover {
    background: #c0392b;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* Breadcrumb */
.breadcrumb {
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.breadcrumb a {
    color: #3498db;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span {
    color: #7f8c8d;
}

/* Record Info */
.record-info {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.record-info p {
    margin: 0.25rem 0;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 2rem;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    position: relative;
}

.close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: #7f8c8d;
}

.close:hover {
    color: #2c3e50;
}

.confirm-dialog {
    text-align: center;
    padding: 2rem;
}

.confirm-dialog h3 {
    margin-bottom: 1rem;
    color: #e74c3c;
}

.confirm-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
}

/* Responsive Design for Action Buttons */
@media (max-width: 768px) {
    .action-buttons {
        flex-direction: column;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* Dashboard Cards Improvements */
.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dashboard-cards .card {
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.dashboard-cards .card:hover {
    transform: translateY(-5px);
}

.dashboard-cards .card h3 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    opacity: 0.9;
    font-weight: normal;
}

.dashboard-cards .card .big-number {
    font-size: 2rem;
    font-weight: bold;
    margin: 0.5rem 0;
}

.dashboard-cards .card small {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Recent Sales Section */
.recent-sales {
    margin-top: 2rem;
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.recent-sales h2 {
    margin-bottom: 1rem;
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
}

/* Quick Actions */
.quick-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 2rem 0;
}

.quick-actions .btn {
    flex: 1;
    min-width: 200px;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .dashboard-cards {
        grid-template-columns: 1fr;
    }
    
    .quick-actions {
        flex-direction: column;
    }
    
    .quick-actions .btn {
        min-width: auto;
    }
}
/* User Management Styles */
.user-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #3498db;
}

.user-info p {
    margin: 5px 0;
    font-size: 14px;
    line-height: 1.4;
}

.cannot-delete {
    color: #e74c3c;
    font-size: 11px;
    font-weight: bold;
    background: #ffeaa7;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Role and Status Badges */
.role-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.role-admin {
    background: #e74c3c;
    color: white;
}

.role-staff1, .role-staff2 {
    background: #3498db;
    color: white;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
}

.status-active {
    background: #27ae60;
    color: white;
}

.status-inactive {
    background: #95a5a6;
    color: white;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.btn-edit {
    background: #3498db;
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    transition: background 0.3s;
}

.btn-delete {
    background: #e74c3c;
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    transition: background 0.3s;
}

.btn-edit:hover {
    background: #2980b9;
}

.btn-delete:hover {
    background: #c0392b;
}

.btn-delete:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
    .action-buttons {
        flex-direction: column;
    }
    
    .users-table {
        font-size: 12px;
    }
    
    .users-table th,
    .users-table td {
        padding: 8px 4px;
    }
}

/* =========================================
   Mobile Dropdown Menu (Hamburger Menu)
   ========================================= */

/* 1. Menu Toggle Button (Hamburger Icon) */
.menu-toggle {
    display: none; /* Desktop မှာ ဖျောက်ထားမယ် */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* အပေါ်ဆုံးမှာ ရှိနေအောင် */
}

/* မျဉ်းသုံးကြောင်းပုံစံ */
.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #ffffff; /* မျဉ်းကြောင်းအရောင် (အဖြူ) */
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

/* 2. Desktop Styles (Default) */
/* ဒီနေရာမှာ သင့်ရဲ့ Desktop အတွက် မူလ CSS တွေ ရှိနှင့်ပြီးသား ဖြစ်ပါမယ်။
   ဥပမာ: .navigation ul { display: flex; ... }
   ဒါကြောင့် mobile အတွက်ပဲ အဓိကထားပြီး အောက်မှာ ရေးလိုက်ပါတယ်။
*/

/* 3. Mobile Styles (max-width: 768px) */
@media (max-width: 768px) {
    
    /* Hamburger ခလုတ်ကို Mobile မှာ ပြမယ် */
    .menu-toggle {
        display: block;
    }
    
    .header-container {
        flex-direction: row; /* Logo နဲ့ ခလုတ်ကို တစ်တန်းတည်းထားမယ် */
        justify-content: space-between; /* ဘေးတစ်ဖက်တစ်ချက် ကပ်မယ် */
        align-items: center;
        padding: 15px;
    }
    
    /* Navigation menu ကို Mobile မှာ ပုံမှန်အားဖြင့် ဖျောက်ထားမယ် */
    .navigation {
        display: none; 
        position: absolute; /* နေရာရွှေ့လို့ရအောင် */
        top: 65px; /* Header အောက်နား (သင့် header အမြင့်ပေါ်မူတည်ပြီး ချိန်ညှိပါ) */
        left: 0;
        width: 100%;
        background-color: #2c3e50; /* သင့် header နောက်ခံအရောင် (သို့) ပိုရင့်သောအရောင် */
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    /* JavaScript က 'is-open' class ထည့်လိုက်မှ ပြမယ် */
    .navigation.is-open {
        display: block;
    }

    /* Link တွေကို အပေါ်အောက် ဒေါင်လိုက် စီမယ် */
    .navigation ul {
        flex-direction: column;
        width: 100%;
        padding: 0; 
    }

    .navigation ul li {
        margin: 0;
        width: 100%;
    }
    
    .navigation ul li a {
        display: block; /* နေရာအပြည့် ယူမယ် */
        padding: 15px 20px; /* နှိပ်ရလွယ်အောင် နေရာချဲ့မယ် */
        color: #ffffff;
        border-bottom: 1px solid #34495e; /* ကြားမျဉ်း */
    }
    
    .navigation ul li:last-child a {
        border-bottom: none;
    }

    /* User Menu ကို သီးသန့်ပုံစံထုတ်မယ် */
    .user-menu {
        flex-direction: column;
        align-items: flex-start !important;
        padding: 15px 20px;
        background-color: #23313f; /* user menu အတွက် နောက်ခံခွဲထားလိုက်သည် */
    }

    .user-menu span {
        margin-bottom: 15px;
        color: #ecf0f1;
    }

    .logout-btn {
        width: 100%;
        text-align: center;
    }
    
    /* Hamburger ခလုတ်ကို နှိပ်လိုက်ရင် 'X' ပုံစံ ပြောင်းမယ် */
    .menu-toggle.is-open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.is-open span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
}

/* =========================================
   Mobile Styles for records.php
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. Data Table Container */
    /* * ဒါက အရေးအကြီးဆုံးပါ။ 
     * Table ကို ဘေးတိုက် scroll ဆွဲလို့ရအောင် လုပ်ပေးပါမယ်။
     */
    .table-container {
        overflow-x: auto; /* Enable horizontal scrolling */
        width: 100%;
        -webkit-overflow-scrolling: touch; /* iOS အတွက် ပိုမို ချောမွေ့စေရန် */
    }

    /* * Table ကို အနည်းဆုံး အကျယ်တစ်ခု သတ်မှတ်ပေးပါမယ်။
     * ဒါမှ ကော်လံတွေက ကျုံ့မသွားဘဲ scroll bar ပေါ်လာပါမယ်။
     */
    .data-table {
        /* ကော်လံ ၁၀ ခုစာအတွက် min-width ကို 900px လောက် ထားပေးပါ */
        min-width: 900px;
    }

    /* 2. Edit Modal Form (ပြင်ဆင်ရန် Form) */
    /* * Form ထဲက အကွက်တွေကို mobile မှာ အပေါ်အောက် စီပေးပါမယ်။
     * (သင့် .css မှာ .form-row က flex ဖြစ်တယ်လို့ ယူဆပြီး ရေးထားပါတယ်)
     */
    #editForm .form-row,
    #editForm .price-section {
        flex-direction: column; /* Stack items vertically */
    }

    /* 3. Action Buttons in Table */
    /* * "ပြင်ဆင်ရန်" နဲ့ "ဖျက်ရန်" ခလုတ်တွေကို 
     * လိုအပ်ရင် အပေါ်အောက် စီပေးပါမယ်။
     */
    .action-buttons {
        flex-direction: column; /* Stack buttons */
        align-items: flex-start; /* Align them left */
    }
    
    .action-buttons .btn-edit,
    .action-buttons .btn-delete {
        width: 100%; /* Make buttons full width */
        margin-bottom: 5px; /* Add space between them */
        text-align: center;
    }
}

/* =========================================
   Mobile Styles for records.php
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. Data Table Container */
    /* * ဒါက အရေးအကြီးဆုံးပါ။ 
     * Table ကို ဘေးတိုက် scroll ဆွဲလို့ရအောင် လုပ်ပေးပါမယ်။
     */
    .table-container {
        overflow-x: auto; /* Enable horizontal scrolling */
        width: 100%;
        -webkit-overflow-scrolling: touch; /* iOS အတွက် ပိုမို ချောမွေ့စေရန် */
    }

    /* * Table ကို အနည်းဆုံး အကျယ်တစ်ခု သတ်မှတ်ပေးပါမယ်။
     * ဒါမှ ကော်လံတွေက ကျုံ့မသွားဘဲ scroll bar ပေါ်လာပါမယ်။
     */
    .data-table {
        /* ကော်လံ ၁၀ ခုစာအတွက် min-width ကို 900px လောက် ထားပေးပါ */
        min-width: 900px;
    }

    /* 2. Edit Modal Form (ပြင်ဆင်ရန် Form) */
    /* * Form ထဲက အကွက်တွေကို mobile မှာ အပေါ်အောက် စီပေးပါမယ်။
     * (သင့် .css မှာ .form-row က flex ဖြစ်တယ်လို့ ယူဆပြီး ရေးထားပါတယ်)
     */
    #editForm .form-row,
    #editForm .price-section {
        flex-direction: column; /* Stack items vertically */
    }

    /* 3. Action Buttons in Table */
    /* * "ပြင်ဆင်ရန်" နဲ့ "ဖျက်ရန်" ခလုတ်တွေကို 
     * လိုအပ်ရင် အပေါ်အောက် စီပေးပါမယ်။
     */
    .action-buttons {
        flex-direction: column; /* Stack buttons */
        align-items: flex-start; /* Align them left */
    }
    
    .action-buttons .btn-edit,
    .action-buttons .btn-delete {
        width: 100%; /* Make buttons full width */
        margin-bottom: 5px; /* Add space between them */
        text-align: center;
    }
}

/* =========================================
   Mobile Styles for user-management.php
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. Add User Form */
    /* Form input တွေကို အပေါ်အောက် ဒေါင်လိုက် စီမယ် */
    .user-form .form-row {
        flex-direction: column;
    }

    /* 2. Users Table */
    /* Mobile မှာ Table ကို ဘေးတိုက် scroll ဆွဲလို့ရအောင် လုပ်မယ် */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .users-table {
        min-width: 700px; /* ကော်လံ ၆ ခုစာ အကျယ် */
    }

    /* 3. Action Buttons in Table */
    /* ခလုတ်တွေကို အပေါ်အောက် စီမယ် */
    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 5px; /* ခလုတ်များကြား နေရာခြားမယ် */
    }
    
    .action-buttons .btn-sm {
        width: 100%;
        text-align: center;
    }
}

/* =========================================
   Styles for Delete & Modal Functionality
   (ဒါက records.php မှာ ရှိပြီးသားဖြစ်နိုင်ပါတယ်)
   (မရှိသေးရင် (သို့) သေချာအောင် ထပ်ထည့်ပါ)
   ========================================= */

/* Edit/Delete Button Styles */
.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
}

.btn-edit {
    background: #3498db;
    color: white;
}
.btn-edit:hover {
    background: #2980b9;
}

.btn-delete {
    background: #e74c3c;
    color: white;
}
.btn-delete:hover {
    background: #c0392b;
}

/* Modal General Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}
.modal-content {
    background-color: white;
    margin: 10% auto; /* Vertically centered */
    padding: 2rem;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.modal-content .close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    color: #7f8c8d;
}
.modal-content .close:hover {
    color: #2c3e50;
}

/* Confirmation Dialog (Delete) */
.confirm-dialog {
    text-align: center;
}
.confirm-dialog h3 {
    margin-bottom: 1rem;
    color: #e74c3c;
}
.confirm-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
}

/* =========================================
   Dashboard Font Color Fix
   ========================================= */

/* 1. ကိန်းဂဏန်းကြီး (big-number) အတွက် အရောင် */
/* Admin dashboard and Staff dashboard numbers */
.card p.big-number,
#staff-total-sales,
#staff-total-revenue,
#staff-today-sales {
    color: #ffeaa7; /* ပိုမိုထင်ရှားတဲ့ အနက်/အပြာရင့်ရောင် */
    font-weight: 700;  /* ပိုထူပြီး ထင်ရှားအောင် Bold လုပ်ပါမယ် */
}

/* 2. ခေါင်းစဉ် (h3) အတွက် အရောင် */
.card h3 {
    color: #ffffff; /* အနည်းငယ် ပိုရင့်သောအရောင် */
}

/* 3. ခေါင်းစဉ်ငယ် (small) အတွက် အရောင် */
.card small {
    color: #ffffff; /* မီးခိုးရောင်ကို ပိုရင့်အောင် ပြောင်းလိုက်ပါ (အရင်ထက် ပိုမြင်ရပါမယ်) */
}

/* =========================================
   Mobile Styles for edit_sale.php
   ========================================= */

@media (max-width: 768px) {
    
    /* * Form input တွေကို အပေါ်အောက် စီပါမယ်။
     */
    .sales-form .form-row {
        flex-direction: column;
    }
    
    /* * ဈေးနှုန်း input တွေကို အပေါ်အောက် စီပါမယ်။
     */
    .sales-form .price-section {
        flex-direction: column;
    }

    /* * ခလုတ်တွေကို အပေါ်အောက် စီပါမယ်။
     */
    .form-actions {
        display: flex;
        flex-direction: column;
        gap: 10px; /* Space between buttons */
    }
    
    .form-actions .btn {
        width: 100%;
    }
}