/* ==========================================================================
   نظام معاملات الوكلاء - الإعمار الأول
   مبني على هوية الموقع الرسمي: Institutional Deep Olive & Luxury Gold
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
    /* نفس لوحة ألوان الموقع الرسمي */
    --primary-color: #2c362c;       /* أخضر زيتوني غامق */
    --secondary-color: #4e604e;     /* أخضر دافئ خافت */
    --accent-color: #b88a5a;        /* ذهبي/برونزي فاخر */
    --accent-hover: #9e7348;
    --bg-color: #e8e4d9;            /* كريمي دافئ */
    --card-bg: #efebe2;
    --card-bg-hover: #fcfbf9;
    --white: #ffffff;
    --text-color: #2c362c;
    --text-muted: #5e6b5e;
    --muted: #5e6b5e; /* alias للتوافق مع الأنماط المضمّنة القديمة */
    --text-light: #e8e4d9;
    --border-color: rgba(78, 96, 78, 0.25);

    /* دلالات الحالة - مبنية على نفس العائلة اللونية */
    --success: #4e604e;
    --warning: #b8860b;
    --danger: #a13d2e;
    --info: #5b7a8a;

    --font-ar: 'Cairo', sans-serif;
    --border-radius: 12px;
    --shadow-sm: 0 4px 6px -1px rgba(44, 54, 44, 0.08);
    --shadow-md: 0 10px 15px -3px rgba(44, 54, 44, 0.12), 0 4px 6px -2px rgba(44, 54, 44, 0.05);
    --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { font-size: 16px; }

body {
    font-family: var(--font-ar);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.7;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; transition: 0.2s ease-in-out; }

/* ==========================================================================
   الترويسة العلوية
   ========================================================================== */
.topbar{
    background-color: var(--primary-color);
    color: var(--text-light);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 32px;
    flex-wrap:wrap;
    border-bottom: 3px solid var(--accent-color);
    box-shadow: var(--shadow-md);
}
.brand{
    font-weight:800;
    font-size:19px;
    color: var(--text-light);
}
.topbar nav{display:flex;align-items:center;gap:20px}
.topbar nav a{
    color: var(--text-light);
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    padding: 6px 4px;
    border-bottom: 2px solid transparent;
    transition: var(--transition-smooth);
}
.topbar nav a:hover{ color: var(--accent-color); border-color: var(--accent-color); }
.topbar nav span{
    font-size:13px;
    color: var(--accent-color);
    font-weight:600;
    border-left:1px solid rgba(232,228,217,.3);
    padding-left:18px;
}

.container{max-width:1050px;margin:28px auto;padding:0 16px}

/* ==========================================================================
   البطاقات
   ========================================================================== */
.card{
    background-color: var(--card-bg);
    border:1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding:28px;
    margin-bottom:22px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

h1{font-size:23px;margin-top:0;color:var(--primary-color);font-weight:800}
h2{font-size:19px;color:var(--primary-color);font-weight:700;margin-bottom:12px}

/* ==========================================================================
   النماذج
   ========================================================================== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

label{
    display:block;
    font-size:13px;
    color: var(--primary-color);
    margin-bottom:7px;
    font-weight:700;
}

input, select, textarea{
    width:100%;
    padding:12px 16px;
    border:1px solid var(--border-color);
    border-radius:8px;
    font-size:14px;
    font-family: var(--font-ar);
    background-color: var(--bg-color);
    color: var(--primary-color);
    transition: var(--transition-smooth);
}
input:focus, select:focus, textarea:focus{
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(184,138,90,.15);
    background-color: var(--white);
}

/* ==========================================================================
   الأزرار — نفس نظام الموقع (شكل حبّة كبسولة)
   ========================================================================== */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background-color: var(--accent-color);
    color: var(--primary-color);
    border:2px solid var(--accent-color);
    padding:11px 26px;
    border-radius:30px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    text-decoration:none;
    transition: var(--transition-smooth);
}
.btn:hover{
    background-color:transparent;
    color: var(--accent-color);
    box-shadow: 0 0 15px rgba(184,138,90,.35);
    transform: translateY(-2px);
}
.btn-secondary{
    background-color:transparent;
    color: var(--primary-color);
    border:2px solid var(--secondary-color);
}
.btn-secondary:hover{
    background-color: var(--secondary-color);
    color: var(--white);
    border-color: var(--secondary-color);
}
.btn-sm{padding:7px 16px;font-size:13px}

/* ==========================================================================
   التنبيهات
   ========================================================================== */
.alert{padding:14px 18px;border-radius:8px;margin-bottom:18px;font-size:14px;font-weight:600}
.alert-error{background:rgba(161,61,46,.1);color:var(--danger);border:1px solid var(--danger)}
.alert-success{background:rgba(78,96,78,.15);color:var(--primary-color);border:1px solid var(--secondary-color)}

/* ==========================================================================
   الجداول
   ========================================================================== */
table{width:100%;border-collapse:collapse;font-size:14px}
th, td{padding:12px 14px;text-align:right;border-bottom:1px solid var(--border-color)}
th{background:var(--bg-color);font-weight:700;color:var(--primary-color)}
tr:hover{background: var(--card-bg-hover)}
.price-table td, .price-table th{text-align:center}

/* ==========================================================================
   شارات الحالة
   ========================================================================== */
.badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;color:#fff}
.badge-secondary{background: var(--text-muted)}
.badge-info{background: var(--info)}
.badge-primary{background: var(--primary-color)}
.badge-warning{background: var(--warning)}
.badge-success{background: var(--success)}
.badge-danger{background: var(--danger)}

.footer{text-align:center;color:var(--text-muted);font-size:12px;padding:28px;margin-top:40px}
.login-box{max-width:400px;margin:60px auto}
.checkbox-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.checkbox-row input{width:auto}

/* ==========================================================================
   وصل الطباعة
   ========================================================================== */
.receipt{
    max-width:600px;margin:0 auto;
    background-color: var(--card-bg);
    border:1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding:28px;
}
.receipt h2{text-align:center;margin-bottom:4px;color:var(--primary-color)}
.receipt .sub{text-align:center;color:var(--text-muted);margin-bottom:20px;font-size:13px}
.receipt table{margin-top:12px}
.receipt .total{font-size:17px;font-weight:800;text-align:left;margin-top:14px;color:var(--accent-hover)}
@media print{
  .topbar, .no-print{display:none !important}
  body{background:#fff}
  .receipt{border:none}
}