html, body {
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

.mud-input-input { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important; }

/* ─────────────────────────────────────────────
   Mobile-specific layout fixes (RTL)
   ───────────────────────────────────────────── */

/* تأكد إن الـ MudMainContent بياخد كامل العرض على mobile */
.main-content-fix {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
}

/* الـ Container بياخد الـ width كامل، بيـ center نفسه */
.main-content-fix .mud-container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* MudLayout — اضمن إنه fullwidth */
.mud-layout {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* AppBar — تأكد إنه بيـ stretch */
.mud-appbar {
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
}

/* على mobile (شاشات أقل من 600px) */
@media (max-width: 600px) {
    .mud-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* الـ FAB ميـ overlap الـ Bottom Nav */
    .mud-fab {
        bottom: 76px !important;
    }

    /* الـ cards margin أقل */
    .mud-card,
    .mud-paper {
        margin-bottom: 8px;
    }
}

#blazor-error-ui {
  background: #b00020; color: #fff;
  bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
  display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed;
  width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; left: 0.75rem; top: 0.5rem; }

.receipt-box { max-width: 720px; margin: 24px auto; padding: 24px; border: 1px solid #000; }
.receipt-box h1 { margin: 0 0 8px; font-size: 20px; }
.receipt-box table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.receipt-box td, .receipt-box th { border: 1px solid #ccc; padding: 6px 10px; }

@media print {
  .no-print, .mud-appbar, .mud-drawer { display: none !important; }
  body { background: #fff; }
  .receipt-box { border: 1px solid #000; }
}