/* MTQ Sales Portal — RTL Arabic Styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; background: #f0f2f5; color: #333; direction: rtl; }
a { color: #FE5200; text-decoration: none; }

/* Login */
.login-body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #FE5200, #1C1B17); }
.login-card { background: #fff; border-radius: 12px; padding: 40px; width: 400px; max-width: 90vw; box-shadow: 0 8px 30px rgba(0,0,0,0.2); }
.login-card h1 { text-align: center; color: #FE5200; margin-bottom: 5px; }
.subtitle { text-align: center; color: #666; margin-bottom: 25px; }

/* Tabs */
.tabs { display: flex; margin-bottom: 20px; border-bottom: 2px solid #eee; }
.tab { flex: 1; padding: 10px; text-align: center; background: none; border: none; cursor: pointer; font-size: 16px; color: #666; }
.tab.active { color: #FE5200; border-bottom: 3px solid #FE5200; font-weight: bold; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Forms */
label { display: block; margin: 10px 0 5px; font-weight: 600; color: #555; }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; margin-bottom: 8px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #FE5200; box-shadow: 0 0 0 3px rgba(254,82,0,0.15); }
.otp-input { font-size: 24px; text-align: center; letter-spacing: 8px; }
.form-select { padding: 10px; }
.form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.form-row input, .form-row select { flex: 1; min-width: 120px; }

/* Buttons */
.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-sm, .btn-link { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 600; transition: all 0.2s; }
.btn-primary { background: #FE5200; color: #fff; }
.btn-primary:hover { background: #D44600; }
.btn-secondary { background: #e8eaed; color: #333; }
.btn-success { background: #0f9d58; color: #fff; }
.btn-success:hover { background: #0b8043; }
.btn-danger { background: #d93025; color: #fff; }
.btn-danger:hover { background: #b3261e; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-link { background: none; color: #FE5200; padding: 5px; }
.btn-group { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-add { width: 100%; padding: 8px; background: #FE5200; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
.btn-remove { background: #d93025; color: #fff; border: none; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.btn-nav { background: #fff; color: #FE5200; border: 1px solid #FE5200; padding: 6px 14px; border-radius: 6px; }

/* Navbar */
.navbar { background: #1C1B17; color: #fff; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 56px; position: sticky; top: 0; z-index: 100; }
.nav-brand { font-size: 18px; font-weight: bold; }
.nav-links { display: flex; gap: 15px; }
.nav-links a { color: #fff; font-size: 14px; padding: 6px 10px; border-radius: 6px; }
.nav-links a:hover { background: rgba(255,255,255,0.15); }
.nav-user { display: flex; align-items: center; gap: 10px; }
.btn-logout { color: #ffcdd2; font-size: 13px; }

/* Container */
.container { max-width: 1100px; margin: 20px auto; padding: 0 15px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

/* Cards */
.card { background: #fff; border-radius: 10px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.form-card { background: #f8f9fa; border-radius: 8px; padding: 15px; }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 25px; }
.stat-card { background: #fff; border-radius: 10px; padding: 20px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.08); transition: transform 0.2s; text-decoration: none; color: inherit; display: block; }
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.stat-card.highlight { background: #FE5200; color: #fff; }
.stat-card.warning { border-right: 4px solid #f9ab00; }
.stat-card.success { border-right: 4px solid #0f9d58; }
.stat-card.danger { border-right: 4px solid #d93025; }
.stat-number { font-size: 32px; font-weight: bold; }
.stat-label { font-size: 14px; color: #666; margin-top: 5px; }
.stat-card.highlight .stat-label { color: #e8eaed; }

/* Tables */
.data-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
.data-table th { background: #f8f9fa; padding: 10px 12px; text-align: right; font-weight: 600; color: #555; border-bottom: 2px solid #eee; }
.data-table td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; }
.data-table tr:hover { background: #f8f9fa; }
.data-table .text-left { text-align: right; }
.total-row td { font-weight: bold; background: #f0f7ff; }
.empty { text-align: center; color: #999; padding: 30px !important; }

/* Badges */
.badge { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.badge-lg { font-size: 14px; padding: 6px 14px; }
.badge-secondary { background: #e8eaed; color: #666; }
.badge-warning { background: #fef7e0; color: #b06000; }
.badge-success { background: #e6f4ea; color: #137333; }
.badge-info { background: #fff3e8; color: #FE5200; }
.badge-danger { background: #fce8e6; color: #c5221f; }

/* Filter bar */
.filter-bar { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.filter-btn { padding: 6px 14px; border-radius: 20px; background: #e8eaed; color: #555; font-size: 13px; }
.filter-btn.active { background: #FE5200; color: #fff; }

/* Search */
.search-bar { margin-bottom: 15px; }
.search-bar form { display: flex; gap: 8px; }
.search-bar input { flex: 1; }

/* Pagination */
.pagination { text-align: center; margin: 20px 0; }
.pagination a { display: inline-block; padding: 6px 14px; margin: 0 4px; background: #e8eaed; border-radius: 6px; }
.pagination a:hover { background: #FE5200; color: #fff; }
.pagination span { color: #666; }

/* Products Grid */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; margin-bottom: 15px; }
.product-card { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 12px; text-align: center; transition: all 0.2s; }
.product-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.product-card.in-cart { border-color: #0f9d58; background: #f0fff4; }
.product-card img { width: 100%; height: 120px; object-fit: contain; border-radius: 6px; margin-bottom: 8px; background: #f8f9fa; }
.product-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.product-code { font-size: 12px; color: #999; margin-bottom: 4px; }
.product-price { color: #0f9d58; font-weight: bold; font-size: 16px; margin-bottom: 8px; }
.product-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 8px; text-align: right; }
.product-inputs label { font-size: 11px; color: #777; margin: 0; }
.product-inputs input { padding: 5px; font-size: 13px; text-align: center; }
.qty-input, .disc-input { width: 100%; }

/* Detail grid */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }

/* Pending cards */
.pending-list { display: flex; flex-direction: column; gap: 12px; }
.pending-card { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 15px; }
.pending-info { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; margin-bottom: 10px; }
.pending-name { font-weight: bold; font-size: 16px; color: #FE5200; }
.pending-amount { font-weight: bold; color: #0f9d58; font-size: 16px; }
.pending-date { color: #999; font-size: 13px; }
.pending-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.reject-form { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.reject-input { flex: 1; padding: 8px; }

/* Messages */
.message { padding: 10px 15px; border-radius: 8px; margin-top: 10px; font-size: 14px; }
.message.error { background: #fce8e6; color: #c5221f; }
.message.success { background: #e6f4ea; color: #137333; }

/* Empty state */
.empty-state { text-align: center; padding: 40px; color: #999; }

/* Customer select */
.customer-select { display: flex; gap: 10px; align-items: center; }
.customer-select select { flex: 1; }

/* Responsive */
@media (max-width: 768px) {
    .navbar { flex-wrap: wrap; height: auto; padding: 10px; }
    .nav-links { flex-wrap: wrap; gap: 8px; }
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .form-row { flex-direction: column; }
    .pending-info { flex-direction: column; gap: 5px; }
    .customer-select { flex-direction: column; }
}