body {
    font-family: 'Vazir', sans-serif;
    background-color: #f0f4f8;
    margin: 0;
    direction: rtl;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}




/* اگر خواستید می‌توانید JS هم اضافه کنید تا کاربر وقتی عدد انگلیسی وارد می‌کند همزمان به فارسی تبدیل شود */


/* همه فیلدهای متنی و انتخابی */
input, select, textarea {
    font-family: 'Vazir', sans-serif !important;
}

/* جدول آیتم‌ها */
#itemsTable, #itemsTable th, #itemsTable td {
    font-family: 'Vazir', sans-serif;
}

/* دکمه‌ها */
button {
    font-family: 'Vazir', sans-serif;
}



.main-content {
    margin-right: 240px;
    padding: 25px;
    flex: 1;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.header h2 {
    margin: 0;
    color: #0d3b66;
}


footer {
    text-align: center;
    padding: 15px 0;
    color: #1c3b57;
    font-size: 14px;
    margin-top: 40px;
}

footer span {
    display: block;
}

button {
    font-family: 'Vazir', sans-serif;
    cursor: pointer;
    transition: all 0.3s;
}

form {
    font-family: 'Vazir', sans-serif;
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9fbfd;
    border-radius: 10px;
    border: 1px solid #dde4ed;
    font-size: 14px;
}

/* فرم ردیف مشتری و راننده/پلاک */
.form-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.form-row .form-group {
    flex: 1;
    min-width: 200px;
}

form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #1c3b57;
}

form input, form select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    box-sizing: border-box;
}

/* جدول آیتم‌ها */
#itemsTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#itemsTable th, #itemsTable td {
    border: 1px solid #ccd6e0;
    padding: 8px 10px;
    text-align: center;
    font-size: 14px;
}

#itemsTable th {
    background-color: #e8f0fe;
    font-weight: bold;
}

#itemsTable td.productName {
    width: 200px;
    font-weight: bold;
}

#itemsTable td input {
    width: 80px;
    padding: 4px 6px;
    font-size: 13px;
}


/* دکمه افزودن و حذف */
#addItem, .removeRow {
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    color: #fff;
    background-color: #4a90e2;
    font-size: 14px;
    
}

/* دکمه افزودن آیتم */
#addItem {
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    color: #fff;
    background-color: #4a90e2;
    font-size: 14px;
    margin-top: 15px; /* فاصله از جدول */
    display: inline-block;
    transition: background-color 0.3s ease;
}

#addItem:hover {
    background-color: #357ABD;
}
/* دکمه ثبت نهایی */
form button[type="submit"] {
    display: block;
    margin: 20px auto 0 auto;
    background-color: #e67e22;
    color: white;
    font-size: 16px;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
}

form button[type="submit"]:hover {
    background-color: #cf6a1b;
    transform: translateY(-2px);
}

/* وزن باسکول اجباری */
input.scale-weight:required {
    border-color: #e74c3c;
}

/* وزن باسکول اجباری */
input.roll_code:required {
    border-color: #e74c3c;
}

/* نوار بالای فرم */
.form-header {
    background-color: #e0f0ff;
    padding: 15px 20px;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    height: 50px; /* ارتفاع ثابت */
}

.form-header h2 {
    margin: 0 auto;
    font-size: 20px;
    font-weight: bold;
    color: #1c3b57;
}

#datetime {
    font-size: 14px;
    color: #0d3b66;
    min-width: 120px;
    text-align: left;
    font-variant-numeric: tabular-nums;
}


/* پلاک خودرو */
#vehiclePlate {
    width: 200px;
    text-align: center;
    direction: ltr;
    font-weight: bold;
    font-size: 14px;
}

/* ردیف فرم */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
}

/* گروه فرم در ردیف */
.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ردیف حق توزین به صورت افقی */
.weighing-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
        margin-top: 25px; /* فاصله بیشتر از دکمه افزودن کالا */

}

.weighing-row label {
    white-space: nowrap;
    font-weight: bold;
}

.weighing-row input {
    width: 150px; /* کوچک‌تر */
    padding: 6px 8px;
    font-family: 'Vazir', sans-serif;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.plate-container {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
    width: fit-content;
    background: white;
    margin-bottom: 15px;
}

.plate-container input {
    width: 50px;
    text-align: center;
    border: none;
    border-left: 1px solid #ccc;
    font-family: 'Vazir', sans-serif;
    font-size: 14px;
    padding: 6px;
}

.plate-container input:focus {
    outline: none;
    background: #f0f8ff;
}

.iran-box {
    background: #eee;
    padding: 0 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    border-left: 1px solid #ccc;
}

.plate-box {
    display: flex;
    align-items: center;
    border: 2px solid #000;
    border-radius: 6px;
    overflow: hidden;
    width: fit-content;
    background: #fff;
    margin-bottom: 20px;
    direction: ltr; /* چیدمان اعداد شبیه واقعی */
}



.plate-box input {
    width: 50px;
    height: 40px;
    text-align: center;
    font-family: 'Vazir', sans-serif;
    font-size: 16px;
    border: none;
    border-left: 1px solid #000;
}

.plate-box input:focus {
    outline: none;
    background: #f9f9f9;
}

.plate-iran {
    background: #eee;
    padding: 0 10px;
    font-size: 12px;
    font-weight: bold;
    border-left: 1px solid #000;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}


option { justify-content:center; text-align:center;}

/* مدال مشترک مشتری و راننده */
.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.4);}
.modal-content { background:#fff; margin:8% auto; padding:0; border-radius:8px; width:450px; max-height:450px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.2); font-family:'Vazir', sans-serif;}
.modal-search { width:100%; padding:8px; margin-bottom:10px; border-radius:5px; border:1px solid #ccc;}
.modal-header { display:flex; font-weight:bold; background:#007bff; color:#fff; padding:8px 12px; border-bottom:1px solid #ccc; justify-content:center; text-align:center;}
.modal-list { flex:1; overflow-y:auto;}
.modal-item { display:flex; padding:8px 12px; cursor:pointer; border-bottom:1px solid #ddd; justify-content:center; text-align:center;}
.modal-item.even { background:#f9f9f9; }
.modal-item.odd { background:#e6e6e6; }
.modal-item:hover { background:#cce5ff; font-weight:bold; }
.col { flex:1; display:flex; justify-content:center; align-items:center; }
.name-col { flex:2; } 
.phone-col, .plate-col { flex:1; }

.plate-col { display:flex; justify-content:center; gap:4px; }
.plate-part { width:30px; height:25px; line-height:25px; text-align:center; border:1px solid #ccc; border-radius:3px; background:#f1f1f1; font-weight:bold; }


.breadcrumb {
  background: linear-gradient(135deg, #d7c0f7, #a9b4fc);
    position: relative; /* اضافه کن */
    overflow: hidden; /* نوار موج از بیرون نمایش داده نشه */

  
  padding: 14px 20px;
  border-radius: 8px;
  margin: 0 0 20px 0;
  
  margin: 10px 0 20px;
  font-size: 13px;
  font-family: Vazir, Tahoma, sans-serif;
}


.breadcrumb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%; /* شروع از سمت راست */
    width: 10%; /* نوار نازک‌تر */
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    transform: skewX(-30deg); /* حالت موجی ملایم */
    animation: wave 8s linear infinite; /* سرعت کمتر */
    pointer-events: none;
    border-radius: 8px;
}

@keyframes wave {
    0% { left: 100%; }
    100% { left: -20%; } /* تا چپ کامل حرکت کند */
}

.breadcrumb a {
  color: #0d3b66;
  text-decoration: none;
}
.breadcrumb span {
  color: #555;
}

.page-header {
    text-align: center;
  background: #0d3b66;
  color: #fff;
  padding: 14px 20px;
  border-radius: 8px;
  margin: 0 0 20px 0;
  font-family: Vazir, Tahoma, sans-serif;
}
.page-header h1 {
  margin: 0;
  font-size: 20px;
}