/* هوية بصرية Ahmed Hossny — أسود / أبيض / رمادي، مستوحاة من شكل اللوجو السداسي */

:root {
  --ah-black: #141414;
  --ah-charcoal: #262626;
  --ah-gray: #6b6b6b;
  --ah-light-gray: #e9e9e9;
  --ah-off-white: #f7f7f6;
  --ah-white: #ffffff;
  --ah-accent: #e2231a; /* أحمر اللوجو الأصلي */
  --radius: 10px;
  --shadow: 0 2px 10px rgba(0,0,0,0.06);
}

* { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: 'Tajawal', 'Cairo', Tahoma, sans-serif;
  background: var(--ah-off-white);
  color: var(--ah-black);
  direction: rtl;
}

a { color: inherit; text-decoration: none; }

.topbar {
  background: var(--ah-black);
  color: var(--ah-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 3px solid var(--ah-accent);
}

.topbar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 4px;
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 18px;
}

.hex-logo {
  width: 34px;
  height: 34px;
  display: inline-block;
  object-fit: contain;
}

/* القائمة بقت فيها بنود كتير (أوامر، عملاء، مخزون، موظفين، إنتاجية، محاسبة...)
   فالبنود بقت أقرب لبعض وبتلتف في أكتر من سطر بشكل مرتب بدل ما تزحم السطر */
.topbar nav a {
  margin-inline-start: 0;
  padding: 5px 9px;
  border-radius: 7px;
  color: #d8d8d8;
  font-size: 13.5px;
  white-space: nowrap;
}
.topbar nav a:hover { color: var(--ah-white); background: #262626; }

.topbar .user-chip {
  font-size: 13px;
  color: var(--ah-gray);
  background: var(--ah-charcoal);
  padding: 6px 12px;
  border-radius: 20px;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

@media (max-width: 480px) {
  .container { padding: 16px 10px 50px; }
  .card { padding: 14px; }
  .topbar { padding: 12px; }
}

.card {
  background: var(--ah-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--ah-light-gray);
}

h1, h2, h3 { color: var(--ah-black); }
h1 { font-size: 22px; }
h2 { font-size: 18px; margin-top: 0; }

.btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  transition: background .15s ease, opacity .15s ease;
}
.btn:active { opacity: .85; }
.btn-primary { background: var(--ah-black); color: var(--ah-white); }
.btn-primary:hover { background: var(--ah-charcoal); }
.btn-outline { background: transparent; color: var(--ah-black); border: 1px solid var(--ah-black); }
.btn-whatsapp { background: #25D366; color: #fff; }
.btn-danger { background: #b3261e; color: #fff; }
.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 7px; }

table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
th, td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--ah-light-gray); font-size: 14px; white-space: nowrap; }
th { background: var(--ah-off-white); font-weight: 700; color: var(--ah-charcoal); }

/* الجداول المعقدة (فيها خانات إدخال) بتتحول لكروت على الموبايل والتابلت الصغير —
   نطاق أوسع من 480 عشان مايحصلش سحب أفقي في المنطقة بين الموبايل والتابلت */
@media (max-width: 768px) {
  table.responsive-cards { display: block; overflow-x: visible; }
  table.responsive-cards thead { display: none; }
  table.responsive-cards tbody { display: block; }
  table.responsive-cards tr { display: block; border: 1px solid var(--ah-light-gray); border-radius: 10px; margin-bottom: 10px; padding: 10px 12px; background: var(--ah-white); }
  table.responsive-cards td { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: none; border-bottom: 1px solid #f0f0f0; padding: 8px 0; white-space: normal; }
  table.responsive-cards td:last-child { border-bottom: none; }
  table.responsive-cards td::before { content: attr(data-label); font-weight: 700; color: var(--ah-gray); font-size: 11px; flex-shrink: 0; }
  table.responsive-cards td > * { flex: 1; min-width: 0; }
  table.responsive-cards td input, table.responsive-cards td select, table.responsive-cards td textarea { width: 100% !important; margin-bottom: 0; }
  table.responsive-cards td form { display: flex; flex: 1; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
}

/* جدول بنود أمر الشغل: على الموبايل كل بند يبقى كارت رأسي بدل السحب الأفقي.
   الخانات المخفية (التكلفة وقت ما "حساب قطع الغيار" مقفول) بتفضل مخفية
   لأن الـstyle المكتوب على الخانة نفسها أقوى من الملف ده. */
@media (max-width: 768px) {
  table.items-table { display: block; }
  table.items-table tr:first-child { display: none; }
  table.items-table tr { display: block; border: 1px solid var(--ah-light-gray); border-radius: 10px; margin-bottom: 10px; padding: 8px 11px; background: var(--ah-white); }
  table.items-table td { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; border: none; border-bottom: 1px solid #f4f4f4; padding: 6px 0; width: auto !important; }
  table.items-table td:last-child { border-bottom: none; }
  table.items-table td::before { content: attr(data-label); font-weight: 700; color: var(--ah-gray); font-size: 11px; flex: 0 0 74px; }
  table.items-table td input, table.items-table td select { flex: 1; width: 100% !important; min-width: 0; }
  table.items-table td .inv-note { flex: 1 0 100%; margin: 0 0 0 74px; }
}

@media (max-width: 480px) {
  table { font-size: 12px; }
  th, td { padding: 6px 5px; font-size: 12px; }
  .col-hide-mobile { display: none; }
  input, select, textarea { font-size: 16px; } /* 16px يمنع iOS من تكبير الصفحة تلقائيًا وقت الكتابة */
}

.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.badge-admin { background: #1d1d1d; color: #fff; }
.badge-branch_manager { background: var(--ah-accent); color: #fff; }
.badge-engineer { background: var(--ah-light-gray); color: var(--ah-charcoal); }

input, select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d8d8d8;
  border-radius: 9px;
  background: #fbfbfb;
  font-family: inherit;
  font-size: 14px;
  color: var(--ah-black);
  margin-bottom: 14px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
input:hover, select:hover, textarea:hover { border-color: #bcbcbc; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ah-accent);
  background: var(--ah-white);
  box-shadow: 0 0 0 3px rgba(226, 35, 26, .10);
}
input::placeholder, textarea::placeholder { color: #b0b0b0; }
input[type="checkbox"] { -webkit-appearance: checkbox; appearance: checkbox; width: auto; }
input[type="date"] { min-height: 44px; } /* عشان أيقونة التقويم متتقصش على iOS */
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 16px;
  padding-left: 34px;
}
textarea { line-height: 1.6; resize: vertical; min-height: 70px; }
label { font-size: 13px; color: var(--ah-charcoal); font-weight: 500; display: block; margin-bottom: 5px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } }

.items-table input[type=text] { margin-bottom: 0; }
.items-table input[type=number] { margin-bottom: 0; width: 100px; }

.totals-box { background: var(--ah-off-white); border-radius: 8px; padding: 14px; }
.totals-box .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.totals-box .row.final { font-weight: 800; font-size: 17px; border-top: 2px solid var(--ah-accent); margin-top: 6px; padding-top: 8px; }

.flash-error { background: #fde8e6; color: #8a1c14; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }
.flash-ok { background: #e7f7ea; color: #1c6b2c; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ah-black); }
.login-box { background: var(--ah-white); border-radius: 14px; padding: 36px; width: 340px; max-width: calc(100vw - 32px); text-align: center; }
.login-box .hex-logo { width: 56px; height: 56px; margin-bottom: 10px; }

/* طباعة الفاتورة بشكل قريب من نموذج الورشة الورقي */
@media print {
  .no-print { display: none !important; }
  /* العناصر دي مخفية على الشاشة وبتظهر وقت الطباعة بس (رأس وتذييل التقارير) */
  .print-only { display: block !important; }
  body { background: #fff; }
  .print-sheet { box-shadow: none; border: none; }
  .card { border: 1px solid #ddd !important; box-shadow: none !important; break-inside: avoid; }
  a { text-decoration: none; color: #141414 !important; }
}