:root { --ink:#111827; --muted:#64748b; --line:#111; --blue:#2563eb; --paper:#fff; }
* { box-sizing:border-box; }
body { margin:0; background:#eef2f7; color:var(--ink); font-family:Tahoma, Arial, sans-serif; }
button,input,select { font-family:"Times New Roman",Times,serif; font-weight:700; text-align:center; }
.app-shell { width:min(1120px, calc(100% - 32px)); margin:32px auto 60px; }
.editor { margin-bottom:28px; padding:24px; border:1px solid #dbe3ef; border-radius:18px; background:#fff; box-shadow:0 16px 45px rgba(15,23,42,.08); }
.editor-heading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; margin-bottom:22px; text-align:center; width:100%; }
.eyebrow { margin:0 0 5px; color:var(--blue); font-size:13px; font-weight:700; }
h1 { margin:0; font-family:"Times New Roman",Times,serif; font-size:30px; font-weight:700; }
.customer-fields,.item-form { display:grid; gap:14px; }
.customer-fields { grid-template-columns:1fr 2fr 1fr; margin-bottom:14px; }
.print-settings { display:grid; grid-template-columns:minmax(280px, 1fr); gap:14px; margin-bottom:14px; }
.print-settings select, .customer-fields select { width:100%; height:45px; padding:0 12px; border:1px solid #cbd5e1; border-radius:9px; background:#fff; outline:none; font-family:"Times New Roman",Times,serif; font-weight:700; font-size:inherit; text-align:center; text-align-last:center; appearance:auto; cursor:pointer; transition:.2s; }
.print-settings select option, .customer-fields select option { text-align:center; }
.item-form { grid-template-columns:2fr .65fr .8fr auto; align-items:end; }
label { display:grid; gap:7px; color:#334155; font-size:16px; font-weight:700; text-align:center; font-family:"Times New Roman",Times,serif; }
input { width:100%; height:45px; padding:0 12px; border:1px solid #cbd5e1; border-radius:9px; outline:none; transition:.2s; font-family:"Times New Roman",Times,serif; font-weight:700; text-align:center; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.button { min-height:45px; padding:0 20px; border:0; border-radius:9px; color:white; cursor:pointer; font-family:"Times New Roman",Times,serif; font-size:16px; font-weight:700; text-align:center; }
.button-add { background:var(--blue); }
.button-print { background:#0f172a; }
.button-success { background:#059669; }
.button-secondary { background:#475569; }
.button-refresh { background:#d97706; }
.button-group { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.button:hover { filter:brightness(1.1); }
.hint { margin:13px 0 0; color:var(--muted); font-size:13px; }
.invoice { position:relative; min-height:1080px; padding:32px; border:1.5px solid var(--line); background:var(--paper); box-shadow:0 12px 35px rgba(15,23,42,.09); }
.invoice-header { min-height:245px; }
.truck-logo { width:260px; height:125px; margin:0 50px 5px auto; color:#111; transform:scaleX(-1); }
.truck-logo svg { width:100%; height:100%; }
.invoice-meta { font-size:22px; font-weight:700; }
.date-line { display:flex; align-items:center; gap:60px; margin:5px 15px 42px 0; }
.date-line span { direction:ltr; min-width:180px; letter-spacing:8px; }
.customer-line { display:flex; align-items:flex-end; gap:14px; }
.customer-line span { flex:1; min-height:30px; padding:0 10px 5px; border-bottom:3px dotted #111; }
.invoice-table-wrap { position:relative; min-height:700px; }
.invoice-table { width:100%; border-collapse:collapse; table-layout:fixed; direction:rtl; }
.invoice-table th,.invoice-table td { border:3px solid #111; text-align:center; }
.invoice-table th { position:relative; height:58px; padding:8px; background:#fff; font-size:20px; }
.invoice-table th::before,.invoice-table th::after { content:""; position:absolute; z-index:2; top:-8px; width:25px; height:16px; background:#fff; border-bottom:3px solid #111; border-radius:0 0 50% 50%; }
.invoice-table th::before { right:-14px; transform:rotate(90deg); }
.invoice-table th::after { left:-14px; transform:rotate(-90deg); }
.invoice-table td { height:640px; padding:0; font-size:17px; vertical-align:top; overflow-wrap:anywhere; }
.total-col { width:19%; }.details-col { width:47%; }.quantity-col { width:14%; }.price-col { width:20%; }
.column-content { display:flex; flex-direction:column; width:100%; }
.column-item { display:flex; align-items:flex-start; justify-content:center; min-height:58px; padding:14px 7px; line-height:1.65; }
.details-content .column-item { position:relative; padding-inline:34px; }
.delete-button { position:absolute; left:5px; top:11px; width:25px; height:25px; border:0; border-radius:50%; background:#fee2e2; color:#b91c1c; cursor:pointer; font-weight:bold; }
.invoice-empty { position:absolute; inset:60px 0 0; display:grid; place-items:center; color:#94a3b8; border:3px solid #111; border-top:0; font-size:17px; }
.invoice-empty[hidden] { display:none; }
.invoice-footer { display:flex; justify-content:flex-start; gap:20px; margin-top:18px; padding:14px 18px; border:3px solid #111; font-size:20px; }
.invoice-footer strong { min-width:140px; }
@media (max-width:760px) {
  .app-shell { width:min(100% - 18px, 1120px); margin-top:10px; }
  .editor-heading { align-items:center; flex-direction:column; }
  .button-group { justify-content:center; }
  .button { width:auto; min-width:120px; }
  .customer-fields,.item-form,.print-settings { grid-template-columns:1fr; }
  .button { width:100%; }
  .invoice { min-height:800px; padding:15px; overflow-x:auto; }
  .invoice-header,.invoice-table-wrap,.invoice-footer { min-width:650px; }
}
.print-sheet { display:none; }
@page { size:A4 portrait; margin:8mm; }
@media print {
  body { background:#fff; }
  .app-shell { width:auto; margin:0; }
  .editor { display:none !important; }
  .invoice { min-height:277mm; padding:8mm; border:1.5px solid #000; box-shadow:none; }
  .invoice-header { min-height:63mm; }
  .truck-logo { width:66mm; height:31mm; margin-right:13mm; }
  .invoice-meta { font-size:16pt; }
  .date-line { margin-bottom:11mm; }
  .actions-col { display:none; }
  .invoice-table-wrap { min-height:178mm; }
  .invoice-table th { height:14mm; font-size:15pt; }
  .invoice-table td { height:164mm; font-size:13pt; }
  .column-item { min-height:13mm; padding-top:3mm; }
  .delete-button { display:none; }
  .invoice-empty { inset:14mm 0 0; }
  .invoice-footer { margin-top:4mm; }
}

/* تثبيت البيانات فوق صورة نموذج الفاتورة */
.invoice { container-type:inline-size; width:100%; min-height:0; padding:0; border:0; aspect-ratio:1054 / 1490; overflow:hidden; }
.invoice-template { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; object-fit:fill; user-select:none; pointer-events:none; }
.overlay-date,.overlay-invoice-number,.overlay-customer,.overlay-column { position:absolute; z-index:2; color:#111; font-family:"Times New Roman",Times,serif; font-size:clamp(8px,2.47cqw,26px); font-weight:700; line-height:1.2; }
.overlay-date { top:16.15%; right:13.5%; width:18%; direction:ltr; text-align:center; font-size:clamp(7px,2.28cqw,24px); }
.overlay-invoice-number { top:16.55%; right:76.75%; width:17%; direction:ltr; color:#d00000; text-align:left; font-family:"Times New Roman",Times,serif; }
.overlay-customer { top:19.35%; right:25.5%; width:63.5%; height:3.2%; padding:0 .8%; text-align:right; white-space:nowrap; overflow:hidden; }
.overlay-column { top:29.45%; bottom:8.3%; display:flex; flex-direction:column; text-align:center; }
.overlay-total { right:4.7%; width:17.2%; }
.overlay-details { right:22.9%; width:44.5%; }
.overlay-quantity { right:68.5%; width:11.5%; }
.overlay-price { right:81.2%; width:14.8%; }
.column-item { display:flex; align-items:flex-start; justify-content:center; min-height:5%; padding:1.5% 3%; font-family:"Times New Roman",Times,serif; font-size:clamp(8px,2.47cqw,26px); font-weight:700; line-height:1.3; }
.overlay-details .column-item { position:relative; padding-inline:8%; }
.invoice-empty { z-index:3; inset:34% 25% auto; display:block; border:0; color:#a1a1aa; text-align:center; font-size:clamp(7px,1.62cqw,17px); }
.invoice-empty[hidden] { display:none; }
.screen-total { position:absolute; z-index:3; right:4.7%; bottom:3.45%; display:block; width:17.2%; min-height:3.6%; padding:.3% .5%; background:transparent; color:#111; text-align:center; font-family:"Times New Roman",Times,serif; font-size:clamp(8px,2.47cqw,26px); font-weight:700; line-height:1.2; }
.total-in-words { position:absolute; z-index:3; right:22.9%; bottom:4.25%; display:block; width:44.5%; height:4.2%; padding:.45% 1% 0; overflow:hidden; color:#111; text-align:center; direction:rtl; overflow-wrap:anywhere; font-family:"Times New Roman",Times,serif; font-size:clamp(8px,2.18cqw,23px); font-weight:700; line-height:1.05; }
.delete-button { left:1%; top:8%; }

@media (max-width:760px) {
  .invoice { min-height:0; padding:0; overflow:hidden; }
  .button-group { width: 100%; display: flex; flex-direction: column; gap: 8px; }
}

@media print {
  @page { size:A4 portrait; margin:0; }
  html,body,.app-shell { margin:0; padding:0; }
  .app-shell > .invoice { display:none !important; }
  .print-sheet { display:flex; align-items:stretch; justify-content:center; width:100vw; height:100vh; overflow:hidden; direction:ltr; }
  .print-sheet .invoice { flex:1 1 0; width:auto; height:100%; min-height:0; padding:0; border:0; aspect-ratio:auto; box-shadow:none; overflow:hidden; }
  .print-sheet.is-landscape .invoice { flex:0 0 50%; max-width:50%; }
  .print-sheet.is-portrait { flex-direction:column; }
  .print-sheet .invoice-template { width:100%; height:100%; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .overlay-date,.overlay-invoice-number,.overlay-customer,.overlay-column,.column-item,.screen-total { font-family:"Times New Roman",Times,serif; font-size:13px; font-weight:700; }
  .total-in-words { font-family:"Times New Roman",Times,serif; font-size:12px; font-weight:700; }
  .overlay-date { font-size:12px; }
  .column-item { min-height:12mm; padding-top:2mm; }
  .invoice-empty { display:none !important; }
  .modal { display:none !important; }
  .login-screen { display:none !important; }
}

/* تصميم المودال للفواتير المحفوظة */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal.is-active {
  opacity: 1;
  pointer-events: auto;
}
.modal-content {
  background: #fff;
  border-radius: 18px;
  width: min(800px, 90%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}
.modal.is-active .modal-content {
  transform: translateY(0);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
}
.modal-header h2 {
  margin: 0;
  font-family: "Times New Roman", Times, serif;
  font-size: 23px;
  font-weight: 700;
  color: var(--ink);
}
.close-button {
  background: none;
  border: 0;
  font-size: 28px;
  font-weight: bold;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.close-button:hover {
  color: var(--ink);
}
.modal-body {
  padding: 24px;
  overflow-y: auto;
}
.modal-empty-state {
  text-align: center;
  color: var(--muted);
  padding: 40px 0;
  font-size: 16px;
}
.modal-table-container {
  overflow-x: auto;
}
.modal-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.modal-table th, .modal-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
  font-family: "Times New Roman", Times, serif;
}
.modal-table th {
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  font-size: 14px;
}
.modal-table td {
  color: var(--ink);
  font-size: 15px;
}
.modal-table tbody tr:hover {
  background: #f8fafc;
}
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.btn-action {
  padding: 6px 12px;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: white;
}
.btn-load {
  background: var(--blue);
}
.btn-delete {
  background: #ef4444;
}
.btn-action:hover {
  filter: brightness(1.1);
}

/* شاشة تسجيل الدخول */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(circle at top left, #1e293b, #0f172a);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.login-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.login-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 24px;
  width: min(400px, 90%);
  padding: 40px 32px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  text-align: center;
  transform: scale(0.95);
  animation: loginAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes loginAppear {
  to {
    transform: scale(1);
  }
}
.login-logo {
  margin-bottom: 20px;
  display: inline-flex;
  padding: 16px;
  background: #eff6ff;
  border-radius: 50%;
}
.login-card h2 {
  margin: 0 0 10px;
  font-size: 22px;
  color: #0f172a;
}
.login-subtitle {
  margin: 0 0 28px;
  color: #64748b;
  font-size: 14px;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-form .input-group input {
  text-align: center;
  font-size: 16px;
  letter-spacing: 2px;
  border: 2px solid #e2e8f0;
}
.login-form .input-group input:focus {
  border-color: var(--blue);
}
.login-actions {
  display: flex;
  gap: 12px;
}
.button-login {
  background: var(--blue);
  font-size: 16px;
  flex: 1;
}
.button-cancel {
  background: #94a3b8;
  font-size: 16px;
  flex: 1;
}
.button-cancel:hover {
  background: #64748b;
  filter: none;
}
.login-error {
  color: #ef4444;
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  padding: 10px;
  background: #fef2f2;
  border-radius: 8px;
  border: 1px solid #fecaca;
}
.button-danger {
  background: #ef4444;
}

/* واجهة الهاتف: أحجام مريحة من دون تكبير مبالغ فيه */
@media screen and (max-width: 760px) {
  body { font-size:14px; }
  .app-shell { width:calc(100% - 16px); margin:8px auto 24px; }
  .editor { margin-bottom:14px; padding:16px 12px; border-radius:14px; }
  .editor-heading { gap:14px; margin-bottom:16px; }
  .eyebrow { font-size:11px; }
  h1 { font-size:22px; line-height:1.35; }
  label { gap:5px; font-size:14px; }
  input,.print-settings select { min-height:44px; height:44px; padding-inline:10px; font-size:16px; }
  .customer-fields,.item-form,.print-settings { gap:10px; margin-bottom:10px; }
  .button-group { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .button { width:100%; min-height:42px; padding:8px 10px; font-size:13px; }
  .item-form .button-add { margin-top:2px; }
  .hint { margin-top:10px; font-size:11px; text-align:center; }
  .invoice { width:100%; box-shadow:0 6px 18px rgba(15,23,42,.1); }
  .delete-button { width:18px; height:18px; top:4%; font-size:12px; line-height:18px; padding:0; }

  .modal { padding:8px; }
  .modal-content { width:100%; max-height:92vh; border-radius:14px; }
  .modal-header { padding:13px 14px; }
  .modal-header h2 { font-size:17px; }
  .modal-body { padding:10px; }
  .modal-table { min-width:590px; }
  .modal-table th,.modal-table td { padding:9px 8px; }
  .modal-table th { font-size:12px; }
  .modal-table td { font-size:13px; }
  .btn-action { padding:6px 9px; font-size:12px; }
}
/* تأثير الاهتزاز عند كلمة المرور الخاطئة */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.login-card.shake {
  animation: shake 0.4s ease;
}